/* ===========================================================
   ProgencyAI — application stylesheet
   Design tokens & base extracted from the original mockup,
   extended with components (tables, forms, settings, chat).
   =========================================================== */
/* The `hidden` attribute must always win, even over components that set an explicit display. */
[hidden] { display: none !important; }

:root {
  /* v36 StaffCentral direction: light, airy, friendly consumer-SaaS.
     Sidebar is WHITE in light mode; these vars keep working for dark.css. */
  --sidebar-bg: #ffffff;
  --sidebar-grad-1: #ffffff;
  --sidebar-grad-2: #ffffff;
  --sidebar-grad-3: #ffffff;

  --bg: #EAEEF5;            /* light cool blue-gray canvas */
  --bg-soft: #F1F4FA;
  --card: #ffffff;
  --border: #E7EBF3;
  --border-soft: #EDF0F6;  /* hairline — table row separators only */

  --ink: #101828;
  --ink-2: #344054;
  --ink-3: #667085;        /* muted */
  --ink-muted: #98A2B3;

  --brand: #2F80FF;        /* primary blue */
  --brand-hover: #1F6FEF;
  --brand-2: #2F80FF;      /* keep gradients single-hue blue now */
  --teal: #2ED573;         /* accents: green */
  --blue: #2F80FF;
  --purple: #2F80FF;
  --pink: #FF5BA0;
  --green: #2ED573;
  --amber: #FFB020;
  --red: #FF4B2B;          /* orange/red */

  --radius: 18px;
  --radius-sm: 12px;
  --shadow-sm: 0 2px 8px rgba(16, 24, 40, 0.05);
  --shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0 18px 48px rgba(16, 24, 40, 0.12);

  --sidebar-w: 252px;
  --sidebar-w-collapsed: 78px;
  --topbar-h: 72px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ===== Layout shell ===== */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
  transition: grid-template-columns .35s cubic-bezier(.2,.8,.2,1);
}
.app.collapsed { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }

/* ===== Sidebar (v36: WHITE in light mode) ===== */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--sidebar-bg);
  color: var(--ink-2);
  border-right: 1px solid var(--border);
  padding: 20px 14px 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 30;
}
.brand {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 10px 18px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 14px;
  white-space: nowrap;
}
.brand-mark {
  width: 38px; height: 38px; border-radius: 12px;
  background: linear-gradient(135deg, #2F80FF, #1F6FEF);
  display: grid; place-items: center; color: white;
  box-shadow: 0 8px 18px rgba(47,128,255,.32); flex-shrink: 0;
}
.brand-mark i { font-size: 22px; }
.brand-name { font-weight: 800; font-size: 18px; letter-spacing: -.2px; color: var(--ink); }
.brand-name span { color: var(--brand); }

.nav {
  list-style: none; padding: 0; margin: 6px 0 0;
  display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto; flex: 1; scrollbar-width: thin;
}
.nav::-webkit-scrollbar { width: 4px; }
.nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.nav-section {
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--ink-muted);
  padding: 14px 14px 6px; white-space: nowrap;
}
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 999px;
  color: var(--ink-3); font-size: 14px; font-weight: 600;
  position: relative; transition: background .18s, color .18s, transform .18s; white-space: nowrap;
}
.nav-item i { font-size: 19px; flex-shrink: 0; width: 22px; text-align: center; color: var(--ink-muted); transition: color .18s; }
.nav-item i.nav-caret { font-size: 15px; width: auto; }
.nav-item .nav-label { flex: 1; }
.nav-item .badge { font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--red); color: #fff; }
.nav-item:hover { background: var(--bg-soft); color: var(--ink); }
.nav-item:hover i { color: var(--ink-2); }
.nav-item.active { color: #fff; background: var(--brand); box-shadow: 0 6px 16px rgba(47,128,255,.32); }
.nav-item.active i { color: #fff; }
.nav-item.active .badge { background: rgba(255,255,255,.22); color: #fff; }

/* Collapsible nav groups */
.nav-group { display: flex; flex-direction: column; }
.nav-row { display: flex; align-items: center; gap: 2px; }
.nav-row .nav-item { flex: 1; min-width: 0; }
button.nav-item.nav-parent {
  width: 100%; border: 0; background: none; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2;
  color: var(--ink-3);
}
button.nav-item.nav-parent:hover { color: var(--ink); }
.nav-caret-btn {
  background: none; border: 0; color: var(--ink-muted); cursor: pointer;
  padding: 8px 6px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0;
}
.nav-caret-btn:hover { background: var(--bg-soft); color: var(--ink-2); }
.nav-caret { font-size: 15px; transition: transform .2s ease; display: block; }
.nav-group.open .nav-caret { transform: rotate(90deg); }
.nav-sub {
  list-style: none; margin: 1px 0 4px; padding: 0;
  max-height: 0; overflow: hidden; transition: max-height .24s ease;
}
.nav-group.open .nav-sub { max-height: 640px; }
.nav-subitem {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px 8px 44px; margin: 1px 0; border-radius: 999px;
  color: var(--ink-3); font-size: 13px; font-weight: 500;
  white-space: nowrap; position: relative;
}
.nav-subitem::before {
  content: ''; position: absolute; left: 26px; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand);
}
.nav-subitem:hover { background: var(--bg-soft); color: var(--ink); }
.nav-subitem.active { color: var(--brand); background: rgba(47,128,255,.10); font-weight: 700; }
.nav-subitem.active::before { background: var(--brand); }
.nav-subitem.disabled { opacity: .55; cursor: default; }
.nav-subitem.disabled:hover { background: none; color: var(--ink-muted); }
.nav-subitem .nav-label { flex: 1; }
/* Right-aligned rounded count badge on child links */
.nav-subitem .badge, .nav-subitem .nav-count {
  font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--bg-soft); color: var(--ink-3); flex-shrink: 0;
}
.nav-subitem.active .badge, .nav-subitem.active .nav-count { background: rgba(47,128,255,.16); color: var(--brand); }
.nav-soon {
  font-size: 9px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  background: var(--bg-soft); color: var(--ink-3); padding: 2px 6px; border-radius: 999px;
}

.sidebar-footer {
  margin-top: 10px; padding: 12px 10px 4px; flex-shrink: 0;
  border-top: 1px solid var(--border-soft);
  display: flex; align-items: center; gap: 10px;
  color: var(--ink-3); font-size: 13px; white-space: nowrap;
  cursor: pointer;
}
.sidebar-footer:hover { color: var(--ink); }
.sidebar-footer i { font-size: 18px; }

.app.collapsed .brand-name,
.app.collapsed .nav-label,
.app.collapsed .nav-section,
.app.collapsed .nav-item .badge,
.app.collapsed .nav-caret,
.app.collapsed .nav-caret-btn,
.app.collapsed .nav-sub,
.app.collapsed .sidebar-footer span { display: none; }
.app.collapsed .nav-item { justify-content: center; padding: 12px; }
.app.collapsed .brand { justify-content: center; padding: 6px 0 18px; }
.app.collapsed .sidebar-footer { justify-content: center; }

/* ===== Main column ===== */
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  position: sticky; top: 0; height: var(--topbar-h);
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border-soft);
  box-shadow: 0 1px 0 rgba(16,24,40,.02);
  display: flex; align-items: center; gap: 12px; padding: 0 24px; z-index: 20;
}
.toggle-btn {
  width: 38px; height: 38px; border-radius: 12px;
  border: 1px solid var(--border); background: #fff;
  display: grid; place-items: center; color: var(--ink-2); transition: background .15s;
}
.toggle-btn:hover { background: var(--bg-soft); }
.toggle-btn i { font-size: 18px; }
.page-title { font-size: 20px; font-weight: 800; letter-spacing: -.3px; color: var(--ink); margin-right: 8px; }
.crumb { color: var(--ink-muted); font-size: 13px; font-weight: 500; }

/* AI search — rounded pill */
.search-wrap { flex: 1; min-width: 0; max-width: 520px; margin: 0 12px 0 auto; position: relative; }
.search {
  width: 100%; height: 44px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg-soft);
  display: flex; align-items: center; padding: 0 14px 0 44px;
  transition: box-shadow .2s, border-color .2s, background .2s;
}
.search:focus-within { background: #fff; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(47,128,255,.12); }
.search input { flex: 1; border: none; outline: none; font-family: inherit; font-size: 14px; color: var(--ink); background: transparent; }
.search input::placeholder { color: var(--ink-muted); }
.search .ai-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 999px;
  background: linear-gradient(135deg, #2F80FF, #1F6FEF); color: #fff;
  display: grid; place-items: center; font-size: 13px; box-shadow: 0 2px 6px rgba(47,128,255,.4);
}
.search .kbd { font-size: 11px; font-weight: 600; color: var(--ink-muted); border: 1px solid var(--border); padding: 2px 6px; border-radius: 6px; background: #fff; }
.search .ai-badge { font-size: 10px; font-weight: 800; letter-spacing: .5px; color: #fff; background: var(--brand); padding: 3px 8px; border-radius: 999px; margin-right: 8px; }

.top-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 999px; background: var(--bg-soft);
  border: 1px solid transparent; display: grid; place-items: center; color: var(--ink-2);
  position: relative; transition: background .15s, color .15s, transform .15s;
}
.icon-btn:hover { background: #fff; border-color: var(--border); color: var(--ink); }
.icon-btn i { font-size: 19px; }
.icon-btn .dot {
  position: absolute; top: 9px; right: 10px; min-width: 16px; height: 16px; border-radius: 999px;
  background: var(--red); color: #fff; font-size: 9.5px; font-weight: 800;
  display: grid; place-items: center; border: 2px solid var(--bg-soft); padding: 0 3px;
}
.profile-btn {
  display: flex; align-items: center; gap: 10px; padding: 5px 10px 5px 5px; border-radius: 999px;
  background: var(--bg-soft); border: 1px solid transparent; transition: background .15s, border-color .15s;
  font: inherit; cursor: pointer; /* rendered as a <button> since it opens the account menu */
}
.profile-btn:hover { background: #fff; border-color: var(--border); }
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, #2F80FF, #1F6FEF); color: #fff;
  font-weight: 700; font-size: 13px; display: grid; place-items: center; position: relative;
}
.avatar.online::after { content: ""; position: absolute; bottom: 0; right: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--green); border: 2px solid #fff; }
.profile-meta { line-height: 1.15; min-width: 0; }
.profile-meta .name { font-size: 13px; font-weight: 700; color: var(--ink); max-width: 108px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-meta .role { font-size: 11px; color: var(--ink-3); font-weight: 500; max-width: 108px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== Content ===== */
.content { padding: 28px 28px 40px; display: flex; flex-direction: column; gap: 22px; }
.greeting { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.greeting h1 { font-size: 28px; font-weight: 800; margin: 0 0 4px; letter-spacing: -.4px; }
.greeting p { margin: 0; color: var(--ink-3); font-size: 14px; }
.greeting .actions { display: flex; gap: 10px; }

.btn {
  height: 42px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--border);
  background: #fff; color: var(--ink-2); font-weight: 600; font-size: 13.5px;
  display: inline-flex; align-items: center; gap: 8px; transition: background .15s, transform .15s, box-shadow .15s;
}
.btn:hover { background: var(--bg-soft); }
.btn.primary { background: var(--brand); color: #fff; border: none; box-shadow: 0 6px 16px rgba(47,128,255,.30); }
.btn.primary:hover { background: var(--brand-hover); transform: translateY(-1px); }
.btn.danger { background: #fff; color: var(--red); border-color: rgba(255,75,43,.32); }
.btn.danger:hover { background: rgba(255,75,43,.08); }
.btn.sm { height: 34px; padding: 0 12px; font-size: 12.5px; border-radius: 10px; }

/* KPI grid */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.kpi {
  background: var(--card); border-radius: var(--radius); padding: 20px;
  border: none; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden;
  transition: transform .25s, box-shadow .25s;
}
.kpi:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(16,24,40,.10); }
.kpi-head { display: flex; align-items: center; justify-content: space-between; }
.kpi-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; }
.kpi-icon.teal { background: rgba(46,213,115,.14); color: #17a85a; }
.kpi-icon.purple { background: rgba(47,128,255,.12); color: var(--brand); }
.kpi-icon.green { background: rgba(46,213,115,.14); color: #17a85a; }
.kpi-icon.amber { background: rgba(255,176,32,.16); color: #b7791f; }
.kpi-icon.blue { background: rgba(47,128,255,.12); color: var(--brand); }
.kpi-icon.red { background: rgba(255,75,43,.12); color: var(--red); }
.kpi-trend { font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; }
.kpi-trend.up { color: #17a85a; background: rgba(46,213,115,.14); }
.kpi-trend.down { color: var(--red); background: rgba(255,75,43,.1); }
.kpi-trend.flat { color: var(--ink-3); background: var(--bg-soft); }
.kpi-label { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.kpi-value { font-size: 32px; font-weight: 800; color: var(--ink); letter-spacing: -.6px; line-height: 1; margin-top: 4px; }
.kpi-sub { font-size: 12px; color: var(--ink-muted); margin-top: 2px; }

.row-2 { display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; }
.row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.card { background: var(--card); border-radius: var(--radius); padding: 22px; border: none; box-shadow: var(--shadow); }
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.card-title { font-size: 16px; font-weight: 800; letter-spacing: -.2px; color: var(--ink); }
.card-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.card-link { font-size: 12.5px; font-weight: 700; color: var(--brand); display: inline-flex; align-items: center; gap: 4px; }

/* Compliance gauge */
.compliance { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: center; }
.gauge-wrap { position: relative; width: 220px; height: 220px; }
.gauge-center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.gauge-center .pct { font-family: "Plus Jakarta Sans", sans-serif; font-size: 40px; font-weight: 700; color: var(--ink); letter-spacing: -.5px; }
.gauge-center .lbl { font-size: 11.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 1.2px; font-weight: 600; margin-top: 2px; }
.gauge-legend { display: flex; flex-direction: column; gap: 10px; }
.legend-row { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.legend-row .label { flex: 1; color: var(--ink-2); font-weight: 500; }
.legend-row .val { font-weight: 700; color: var(--ink); }

/* Notices */
.notice { display: flex; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--bg-soft); border-left: 3px solid var(--brand); margin-bottom: 10px; transition: transform .15s; }
.notice:hover { transform: translateX(2px); }
.notice:last-child { margin-bottom: 0; }
.notice .ico { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-size: 16px; flex-shrink: 0; }
.notice .body { flex: 1; min-width: 0; }
.notice .ttl { font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.notice .meta { font-size: 12px; color: var(--ink-3); }
.notice.red { border-left-color: var(--red); } .notice.red .ico { background: rgba(239,68,68,.12); color: var(--red); }
.notice.amber { border-left-color: var(--amber); } .notice.amber .ico { background: rgba(245,158,11,.14); color: var(--amber); }
.notice.blue { border-left-color: var(--blue); } .notice.blue .ico { background: rgba(14,165,233,.12); color: var(--blue); }
.notice.green { border-left-color: var(--green); } .notice.green .ico { background: rgba(16,185,129,.12); color: var(--green); }

/* Bars */
.bar-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; font-size: 13px; }
.bar-row .lbl { width: 92px; color: var(--ink-2); font-weight: 500; }
.bar-row .track { flex: 1; height: 10px; border-radius: 6px; background: var(--bg-soft); overflow: hidden; }
.bar-row .fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, #1F6FEF, #2F80FF); }
.bar-row.teal .fill { background: linear-gradient(90deg, #14b8a6, #2F80FF); }
.bar-row.amber .fill { background: linear-gradient(90deg, #f59e0b, #fb923c); }
.bar-row.green .fill { background: linear-gradient(90deg, #10b981, #14b8a6); }
.bar-row .val { width: 36px; text-align: right; font-weight: 700; color: var(--ink); }

/* Timeline / activity */
.timeline { display: flex; flex-direction: column; gap: 4px; }
.timeline-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--border-soft); }
.timeline-item:last-child { border-bottom: none; }
.timeline-time { width: 64px; font-size: 12px; font-weight: 700; color: var(--ink-3); padding-top: 2px; flex-shrink: 0; }
.timeline-body { flex: 1; min-width: 0; }
.timeline-title { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.timeline-meta { font-size: 12px; color: var(--ink-3); margin-top: 2px; display: flex; align-items: center; gap: 6px; }
.pill { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--bg-soft); color: var(--ink-2); }
.pill.purple { background: rgba(47,128,255,.12); color: var(--brand); }
.pill.teal { background: rgba(46,213,115,.16); color: #17a85a; }
.pill.amber { background: rgba(255,176,32,.18); color: #b7791f; }
.pill.green { background: rgba(46,213,115,.16); color: #17a85a; }
.pill.red { background: rgba(255,75,43,.12); color: #d63417; }
.pill.blue { background: rgba(47,128,255,.14); color: var(--brand); }
.pill.muted { background: var(--bg-soft); color: var(--ink-3); }

.activity-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--border-soft); }
.activity-item:last-child { border-bottom: none; }
.av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; font-size: 12px; flex-shrink: 0; }
.av.a { background: linear-gradient(135deg, #1F6FEF, #ec4899); }
.av.b { background: linear-gradient(135deg, #2F80FF, #2F80FF); }
.av.c { background: linear-gradient(135deg, #10b981, #14b8a6); }
.av.d { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.activity-body { flex: 1; min-width: 0; }
.activity-text { font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.activity-text strong { color: var(--ink); font-weight: 700; }
.activity-time { font-size: 11.5px; color: var(--ink-muted); margin-top: 3px; }

/* ===== Tables ===== */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th {
  text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--ink-3); padding: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.data td { padding: 12px 14px; border-bottom: 1px solid var(--border-soft); color: var(--ink-2); vertical-align: middle; }
table.data tbody tr { transition: background .12s; }
table.data tbody tr:hover { background: var(--bg-soft); }
table.data td .name-cell { display: flex; align-items: center; gap: 10px; }
table.data .strong { color: var(--ink); font-weight: 600; }
.empty-state { text-align: center; padding: 40px 20px; color: var(--ink-3); }
.empty-state i { font-size: 40px; color: var(--ink-muted); margin-bottom: 8px; }

/* Status badge */
.badge-status { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.badge-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge-status.green { color: #17a85a; background: rgba(46,213,115,.16); }
.badge-status.amber { color: #b7791f; background: rgba(255,176,32,.18); }
.badge-status.red { color: #d63417; background: rgba(255,75,43,.12); }
.badge-status.blue { color: var(--brand); background: rgba(47,128,255,.12); }
.badge-status.muted { color: var(--ink-3); background: var(--bg-soft); }

/* ===== Forms ===== */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.form-grid.cols-1 { grid-template-columns: 1fr; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.field .hint { font-size: 11.5px; color: var(--ink-muted); }
.input, .select, .textarea {
  width: 100%; height: 42px; border-radius: 12px; border: 1px solid var(--border);
  background: #fff; padding: 0 12px; font-family: inherit; font-size: 14px; color: var(--ink);
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.textarea { height: auto; min-height: 90px; padding: 10px 12px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(47,128,255,.14); }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

/* Alerts */
.alert { padding: 12px 16px; border-radius: 12px; font-size: 13.5px; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.alert.success { background: rgba(46,213,115,.14); color: #17a85a; }
.alert.error { background: rgba(255,75,43,.12); color: #d63417; }
.alert.info { background: rgba(47,128,255,.12); color: var(--brand); }

/* ===== Settings: secondary left nav ===== */
.settings-layout { display: grid; grid-template-columns: 248px 1fr; gap: 22px; align-items: start; }
.settings-nav { background: var(--card); border-radius: var(--radius); border: 1px solid var(--border-soft); box-shadow: var(--shadow-sm); padding: 12px; position: sticky; top: calc(var(--topbar-h) + 20px); }
.settings-nav .sn-section { font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-muted); padding: 12px 12px 6px; }
.settings-nav a {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px;
  color: var(--ink-2); font-size: 13.5px; font-weight: 500; transition: background .15s, color .15s; margin-bottom: 2px;
}
.settings-nav a i { font-size: 18px; width: 20px; text-align: center; color: var(--ink-3); }
.settings-nav a:hover { background: var(--bg-soft); color: var(--ink); }
.settings-nav a.active { background: linear-gradient(90deg, rgba(47,128,255,.12), rgba(47,128,255,.06)); color: var(--brand); box-shadow: inset 3px 0 0 var(--brand); }
.settings-nav a.active i { color: var(--brand); }

/* ===== AI Chat panel ===== */
.chat-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.35); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 90; }
.chat-overlay.open { opacity: 1; pointer-events: auto; }
.chat-panel {
  position: fixed; top: 0; right: 0; height: 100vh; width: 420px; max-width: 92vw;
  background: var(--card); box-shadow: -12px 0 40px rgba(15,23,42,.18);
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.8,.2,1); z-index: 100;
}
.chat-panel.open { transform: none; }
.chat-header { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.chat-header .ai-icon { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, #1F6FEF, #2F80FF); color: #fff; display: grid; place-items: center; font-size: 18px; }
.chat-header .title { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 16px; }
.chat-header .sub { font-size: 11.5px; color: var(--ink-3); }
.chat-header .close { margin-left: auto; }
.chat-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
/* Stacked messages/widgets must keep their natural height (never be squished by the
   flex column) so the body scrolls to reveal tall widgets like the med pass / confirm card. */
.chat-body > * { flex-shrink: 0; }
.chat-msg { display: flex; gap: 10px; max-width: 100%; }
.chat-msg .bubble { padding: 11px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.chat-msg.user { flex-direction: row-reverse; }
.chat-msg.user .bubble { background: linear-gradient(135deg, #2F80FF, #1F6FEF); color: #fff; border-bottom-right-radius: 4px; }
.chat-msg.assistant .bubble { background: var(--bg-soft); color: var(--ink); border-bottom-left-radius: 4px; }
.chat-msg .mini-av { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center; font-size: 14px; color: #fff; }
.chat-msg.assistant .mini-av { background: linear-gradient(135deg, #1F6FEF, #2F80FF); }
.chat-msg.user .mini-av { background: linear-gradient(135deg, #2F80FF, #2F80FF); }
.chat-suggestions { display: flex; flex-wrap: wrap; gap: 8px; }
.chat-suggestions button { font-size: 12px; padding: 7px 11px; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--ink-2); }
.chat-suggestions button:hover { background: var(--bg-soft); }
.chat-footer { border-top: 1px solid var(--border); padding: 14px 16px; }
.chat-input-wrap { display: flex; align-items: flex-end; gap: 8px; border: 1.5px solid var(--border); border-radius: 14px; padding: 8px 8px 8px 14px; }
.chat-input-wrap:focus-within { border-color: var(--brand); }
.chat-input-wrap textarea { flex: 1; border: none; outline: none; resize: none; font-family: inherit; font-size: 14px; max-height: 120px; background: transparent; }
.chat-send { width: 38px; height: 38px; border-radius: 10px; border: none; background: linear-gradient(135deg, #2F80FF, #1F6FEF); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.chat-send:disabled { opacity: .5; cursor: default; }
/* Phones: the assistant is a full-screen sheet (dvh so the input clears the
   browser toolbar/keyboard) instead of a 92vw sliver over a dead margin. */
@media (max-width: 640px) {
  .chat-panel { width: 100%; max-width: 100%; height: 100vh; height: 100dvh; }
}
.typing-dots span { display: inline-block; width: 6px; height: 6px; margin: 0 1px; border-radius: 50%; background: var(--ink-muted); animation: blink 1.2s infinite both; }
.typing-dots span:nth-child(2) { animation-delay: .2s; }
.typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }

/* Login — v36 light canvas + white card */
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(120% 80% at 100% 0%, rgba(47,128,255,.14), transparent 60%),
              radial-gradient(120% 80% at 0% 100%, rgba(46,213,115,.10), transparent 60%),
              var(--bg); }
.login-card { width: 100%; max-width: 410px; background: #fff; border-radius: 18px; padding: 34px; box-shadow: 0 18px 48px rgba(16,24,40,.12); }
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.login-card h1 { font-family: "Plus Jakarta Sans", sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -.3px; margin: 0 0 4px; }
.login-card p.sub { color: var(--ink-3); font-size: 13.5px; margin: 0 0 22px; }
.login-demo { margin-top: 18px; font-size: 12px; color: var(--ink-muted); text-align: center; }

/* Misc */
.section-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.section-tabs a { padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-2); background: var(--bg-soft); }
.section-tabs a.active { background: linear-gradient(135deg, #2F80FF, #1F6FEF); color: #fff; }
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar .search-inline { flex: 1; min-width: 200px; max-width: 360px; height: 40px; border-radius: 10px; border: 1px solid var(--border); padding: 0 12px; font-size: 13.5px; outline: none; }
.divider { height: 1px; background: var(--border-soft); margin: 18px 0; }
.fade-up { opacity: 0; transform: translateY(8px); animation: fadeUp .55s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes fadeUp { to { opacity: 1; transform: none; } }
.delay-1 { animation-delay: .06s; } .delay-2 { animation-delay: .12s; } .delay-3 { animation-delay: .18s; }
.delay-4 { animation-delay: .24s; } .delay-5 { animation-delay: .3s; } .delay-6 { animation-delay: .36s; }

/* Responsive */
/* ===== Responsive ===== */
@media (max-width: 1200px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .row-2 { grid-template-columns: 1fr; }
  .row-3 { grid-template-columns: 1fr 1fr; }
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav { position: static; }
}

/* Tablet — auto icon-rail sidebar */
@media (min-width: 769px) and (max-width: 1024px) {
  .app, .app.collapsed { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }
  .app .brand-name, .app .nav-label, .app .nav-section, .app .nav-item .badge,
  .app .nav-caret, .app .nav-caret-btn, .app .nav-sub, .app .sidebar-footer span { display: none; }
  .app .nav-item { justify-content: center; padding: 12px; }
  .app .brand { justify-content: center; padding: 6px 0 18px; }
  .app .sidebar-footer { justify-content: center; }
  .row-3 { grid-template-columns: 1fr; }
  .compliance { grid-template-columns: 1fr; justify-items: center; }
  .form-grid { grid-template-columns: 1fr; }
}

/* Phone — off-canvas drawer + single column */
@media (max-width: 768px) {
  .app, .app.collapsed { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; width: min(84vw, var(--sidebar-w));
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.2,.8,.2,1);
    z-index: 120; padding-top: 16px;
  }
  .app.nav-open .sidebar { transform: none; box-shadow: 0 24px 70px rgba(2,6,23,.55); }
  .row-3, .row-2, .kpi-grid, .compliance, .form-grid { grid-template-columns: 1fr; }
  .compliance { justify-items: center; }
  .content { padding: 16px 14px 32px; }
  .greeting { flex-direction: column; align-items: flex-start; gap: 10px; }
  .greeting .actions { width: 100%; flex-wrap: wrap; }
  .greeting h1 { font-size: 22px; }
  .search-wrap { display: none; }
  .topbar { padding: 0 10px; gap: 4px; }
  .page-title { display: none; }
  .icon-btn { width: 38px; height: 38px; }
  .profile-meta { display: none; }
  /* Keep the action row inside the viewport on phones: tighter gaps, the
     quick-add collapses to just its icon, and secondary buttons step aside. */
  .top-actions { gap: 2px; margin-left: auto; }
  #qaddBtn { padding: 8px 10px; }
  #qaddBtn .qa-label { display: none; }
  #recentsBtn { display: none; }
  /* The desktop search bar is hidden on phones — the search-icon SHOW rule for
     .omni-search-btn lives AFTER its base display:none (same specificity, so it
     must come later in the file to win — see the mobile-sheet block ~line 950). */
  /* (.qadd-menu phone-sheet override lives AFTER the v33 component block —
     same specificity, so it must come later in the file to win.) */
  .card { padding: 16px; }
  .tabs { gap: 0; }
  .tabs a { padding: 11px 12px; font-size: 13px; }
  .table-wrap { -webkit-overflow-scrolling: touch; }
  .dt-toolbar { flex-direction: column; align-items: stretch; }
  .dt-toolbar .dt-search { max-width: none; }
  .dt-info { margin-left: 0; }
  .dt-pagination { flex-wrap: wrap; justify-content: center; }
  .pg-modal { width: 96vw; max-width: 96vw; }
}

/* Sidebar drawer backdrop (mobile) */
.sidebar-backdrop {
  position: fixed; inset: 0; background: rgba(15,23,42,.5);
  opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 115;
}
.sidebar-backdrop.show { opacity: 1; pointer-events: auto; }

/* ===== Interactive data tables (auto-enhanced by tables.js) ===== */
.dt-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.dt-search {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 180px; max-width: 320px;
  height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px;
  background: #fff; transition: border-color .15s, box-shadow .15s;
}
.dt-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(47,128,255,.12); }
.dt-search i { color: var(--ink-muted); font-size: 17px; }
.dt-search input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13.5px; color: var(--ink); }
.dt-info { font-size: 12.5px; color: var(--ink-3); margin-left: auto; white-space: nowrap; }
.dt-pagesize { font-size: 12.5px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.dt-pagesize select { border: 1px solid var(--border); border-radius: 8px; padding: 5px 8px; font: inherit; font-size: 12.5px; background: #fff; color: var(--ink-2); }

table.data th.dt-sortable { cursor: pointer; user-select: none; transition: color .15s; }
table.data th.dt-sortable:hover { color: var(--brand); }
table.data th.dt-sortable .dt-arrow { font-size: 11px; opacity: .35; margin-left: 4px; display: inline-block; }
table.data th[aria-sort="ascending"] .dt-arrow,
table.data th[aria-sort="descending"] .dt-arrow { opacity: 1; color: var(--brand); }

.dt-pagination { display: flex; align-items: center; gap: 6px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }
.dt-pagebtn {
  min-width: 32px; height: 32px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--border);
  background: #fff; color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s, border-color .15s;
}
.dt-pagebtn:hover:not(:disabled) { background: var(--bg-soft); }
.dt-pagebtn.active { background: linear-gradient(135deg, #2F80FF, #1F6FEF); color: #fff; border-color: transparent; }
.dt-pagebtn:disabled { opacity: .4; cursor: default; }
.dt-pagebtn.dt-gap { border: 0; background: transparent; cursor: default; }
.dt-empty-row td { text-align: center; color: var(--ink-3); padding: 28px 14px; }

/* Checkbox row label */
.check-row { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; color: var(--ink-2); }
.check-row input[type="checkbox"] { width: 18px; height: 18px; }
/* Detail field labels (read-only field views) */
.field > label { font-size: 12.5px; }
.data th[scope], table.data tbody th { color: var(--ink-3); font-weight: 600; width: 180px; }

/* ===== Floating shift-draft widget ===== */
.draft-fab {
  position: fixed; right: 24px; bottom: 24px; width: 56px; height: 56px; border-radius: 50%;
  border: none; background: linear-gradient(135deg, #f59e0b, #ec4899); color: #fff;
  box-shadow: 0 10px 30px rgba(236,72,153,.45); display: grid; place-items: center; z-index: 55; /* below slide-in panels/overlays (60+) */
  transition: transform .18s, box-shadow .18s;
}
.draft-fab:hover { transform: translateY(-2px) scale(1.04); }
.draft-fab i { font-size: 24px; }
.draft-fab-dot { position: absolute; top: 10px; right: 10px; width: 12px; height: 12px; border-radius: 50%; background: #22c55e; border: 2px solid #fff; }
.draft-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.35); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 90; }
.draft-overlay.open { opacity: 1; pointer-events: auto; }
.draft-modal {
  position: fixed; right: 24px; bottom: 92px; width: 440px; max-width: calc(100vw - 40px); max-height: 78vh;
  background: var(--card); border-radius: 18px; box-shadow: 0 24px 60px rgba(15,23,42,.28);
  display: flex; flex-direction: column; transform: translateY(16px) scale(.98); opacity: 0; pointer-events: none;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .25s; z-index: 100; overflow: hidden;
}
.draft-modal.open { transform: none; opacity: 1; pointer-events: auto; }
.draft-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.draft-head .ai-icon { width: 34px; height: 34px; border-radius: 10px; color: #fff; display: grid; place-items: center; font-size: 18px; }
.draft-head .title { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 15.5px; }
.draft-head .sub { font-size: 11.5px; color: var(--ink-3); }
.draft-body { padding: 16px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.draft-quick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.draft-saved { font-size: 11.5px; color: var(--ink-muted); margin-left: auto; }
.draft-foot { display: flex; gap: 10px; justify-content: space-between; padding: 14px 18px; border-top: 1px solid var(--border); }
#draftAiBox .ai-suggestion { background: rgba(47,128,255,.06); border: 1px solid rgba(47,128,255,.2); border-radius: 12px; padding: 12px 14px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; }
#draftAiBox .ai-actions { display: flex; gap: 8px; margin-top: 8px; }

/* ===== Tabs (consumer view etc.) ===== */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; overflow-x: auto; }
.tabs a { padding: 12px 16px; font-size: 13.5px; font-weight: 600; color: var(--ink-3); border-bottom: 2px solid transparent; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; }
.tabs a i { font-size: 17px; }
.tabs a:hover { color: var(--ink); }
.tabs a.active { color: var(--brand); border-bottom-color: var(--brand); }

/* ===== Wizard ===== */
.wizard-steps { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.wizard-step { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 12px; background: var(--bg-soft); font-size: 13px; font-weight: 600; color: var(--ink-3); }
.wizard-step .num { width: 24px; height: 24px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 12px; border: 1px solid var(--border); }
.wizard-step.active { background: linear-gradient(135deg, #2F80FF, #1F6FEF); color: #fff; }
.wizard-step.active .num { background: rgba(255,255,255,.25); border-color: transparent; color: #fff; }
.wizard-step.done { color: var(--green); }
.wizard-step.done .num { background: var(--green); color: #fff; border-color: transparent; }
.dropzone { border: 2px dashed var(--border); border-radius: 14px; padding: 30px; text-align: center; color: var(--ink-3); transition: border-color .15s, background .15s; cursor: pointer; }
.dropzone:hover, .dropzone.drag { border-color: var(--brand); background: rgba(47,128,255,.04); }
.dropzone i { font-size: 38px; color: var(--ink-muted); }

/* Chips */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--bg-soft); font-size: 12px; font-weight: 600; color: var(--ink-2); }
.tool-trace { font-size: 11px; color: var(--ink-muted); margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.tool-trace .chip { background: rgba(47,128,255,.08); color: var(--brand); }

/* ===== Breadcrumbs ===== */
.breadcrumbs { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-3); margin: -6px 0 2px; flex-wrap: wrap; }
.breadcrumbs > i.ti-home-2 { font-size: 15px; color: var(--ink-muted); }
.breadcrumbs a { color: var(--ink-3); font-weight: 500; }
.breadcrumbs a:hover { color: var(--brand); }
.breadcrumbs .sep { font-size: 13px; color: var(--ink-muted); }
.breadcrumbs .current { color: var(--ink); font-weight: 600; }

/* ===== File manager ===== */
.fm-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.fm-toolbar .spacer { flex: 1; }
.fm-path { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); flex-wrap: wrap; margin-bottom: 14px; }
.fm-path a { color: var(--brand); font-weight: 600; }
.fm-path a:hover { text-decoration: underline; }
.fm-path .sep { color: var(--ink-muted); }
.fm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.fm-grid .fm-item {
  position: relative; border: 1px solid var(--border-soft); border-radius: 14px; padding: 16px 14px; background: var(--card);
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.fm-grid .fm-item:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border); }
.fm-grid .fm-item .fm-ico { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; font-size: 28px; }
.fm-ico.folder { background: rgba(245,158,11,.12); color: #f59e0b; }
.fm-ico.pdf { background: rgba(239,68,68,.1); color: #ef4444; }
.fm-ico.img { background: rgba(47,128,255,.1); color: #1F6FEF; }
.fm-ico.doc { background: rgba(14,165,233,.1); color: #0ea5e9; }
.fm-ico.file { background: var(--bg-soft); color: var(--ink-3); }
.fm-grid .fm-item .fm-name { font-size: 12.5px; font-weight: 600; color: var(--ink); word-break: break-word; line-height: 1.3; }
.fm-grid .fm-item .fm-meta { font-size: 11px; color: var(--ink-muted); }
.fm-grid .fm-item .fm-menu { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 8px; border: none; background: var(--bg-soft); color: var(--ink-3); display: none; place-items: center; cursor: pointer; }
.fm-grid .fm-item:hover .fm-menu { display: grid; }
/* Touch devices have no hover — the item menu must always be reachable. */
@media (hover: none) { .fm-grid .fm-item .fm-menu { display: grid; } }
.fm-thumb { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; }

/* AI-generated badge: a small "sparkles" chip shown on documents flagged is_ai_generated. */
.fm-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.fm-ai-badge {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px;
  background: rgba(47,128,255,.14); color: #7c3aed; font-size: 13px; cursor: help;
}
.fm-grid .fm-item .fm-ai-badge { position: absolute; top: 8px; left: 8px; z-index: 1; box-shadow: 0 0 0 2px var(--card); }
.fm-ai-badge.inline { width: 18px; height: 18px; border-radius: 6px; font-size: 12px; margin-left: 6px; vertical-align: middle; }
.fm-dropzone { border: 2px dashed var(--border); border-radius: 14px; padding: 16px; text-align: center; color: var(--ink-3); font-size: 13px; margin-bottom: 16px; transition: .15s; }
.fm-dropzone.drag { border-color: var(--brand); background: rgba(47,128,255,.04); }

/* Generic modal */
.pg-modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.5); backdrop-filter: blur(2px); display: none; align-items: center; justify-content: center; z-index: 120; padding: 24px; }
.pg-modal-overlay.open { display: flex; }
.pg-modal { background: var(--card); border-radius: 18px; box-shadow: var(--shadow-lg); width: 100%; max-width: 880px; max-height: 90vh; max-height: 90dvh; display: flex; flex-direction: column; overflow: hidden; }
.pg-modal.lg { max-width: 1100px; }
/* flex-wrap so busy headers (e.g. document preview with Download/Reprocess/Convert/
   Protect/close) never clip the close ✕ on narrow screens; the title truncates. */
.pg-modal-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.pg-modal-head .title { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 16px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-modal-body { padding: 20px; overflow: auto; }
.pg-modal-foot { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; }
.preview-frame { width: 100%; height: 68vh; border: none; border-radius: 10px; background: var(--bg-soft); }
.preview-img { max-width: 100%; max-height: 68vh; display: block; margin: 0 auto; border-radius: 10px; }
.preview-text { white-space: pre-wrap; font-family: ui-monospace, monospace; font-size: 13px; background: var(--bg-soft); padding: 16px; border-radius: 10px; max-height: 68vh; overflow: auto; }

/* ================================================================
   Document preview — dedicated .fm-preview overlay so these fixes
   never leak to other .pg-modal dialogs. Desktop: big framed window;
   phone: full viewport (100dvh). Body FILLS the window (no 68vh
   island). Header collapses its action buttons behind a ⋯ menu on
   phones so the big close ✕ is never pushed off.
   ================================================================ */
.fm-preview .pg-modal { width: min(1100px, 96vw); max-width: min(1100px, 96vw);
  height: min(90vh, 900px); height: min(90dvh, 900px); max-height: min(90dvh, 900px); }
.fm-preview .pg-modal-head { position: relative; }
.fm-preview .fm-pv-x { flex: 0 0 auto; }
#fmPreviewBody { flex: 1 1 auto; min-height: 0; display: flex; overflow: auto; padding: 12px; }
/* Action buttons: inline on desktop, a dropdown under the ⋯ button on phones. */
.fm-pv-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fm-pv-more { display: none; }
/* Image stage: fit-to-screen; TAP toggles fit ↔ actual size (pan via scroll). */
.fm-pv-imgwrap { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; overflow: auto; touch-action: pinch-zoom; background: var(--bg-soft); border-radius: 10px; }
.fm-pv-img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; cursor: zoom-in; }
.fm-pv-img.actual { max-width: none; max-height: none; object-fit: none; cursor: zoom-out; }
/* PDF: iframe fills on desktop; a prominent "Open fullscreen" bar hands the
   inline stream to the device's native PDF viewer. */
.fm-pv-pdf { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; }
.fm-pv-frame { flex: 1 1 auto; width: 100%; min-height: 0; border: none; border-radius: 10px; background: var(--bg-soft); }
.fm-pv-pdf-open { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px; }
.fm-pv-pdf-open .card-sub { margin: 0; }
/* Text/CSV/video fill the body instead of a fixed island. */
.fm-preview .preview-text { flex: 1 1 auto; width: 100%; max-height: none; }
.fm-preview .table-wrap { flex: 1 1 auto; width: 100%; }
.fm-preview .preview-img { max-height: 100%; }

@media (max-width: 768px) {
  .fm-preview.pg-modal-overlay { padding: 0; align-items: stretch; }
  .fm-preview .pg-modal { width: 100vw !important; max-width: 100vw !important;
    height: 100dvh; max-height: 100dvh; border-radius: 0; }
  #fmPreviewBody { padding: 0; }
  .fm-preview .fm-pv-imgwrap { border-radius: 0; }
  .fm-preview .fm-pv-x i { font-size: 22px; }
  /* Collapse actions behind ⋯ so the big ✕ is never pushed off. */
  .fm-preview .fm-pv-more { display: inline-grid; }
  .fm-preview .fm-pv-actions {
    position: absolute; top: calc(100% + 4px); right: 8px; z-index: 5;
    flex-direction: column; align-items: stretch; gap: 4px; min-width: 210px;
    background: var(--card); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 12px 32px rgba(16,24,40,.16); padding: 6px; display: none;
  }
  .fm-preview .fm-pv-actions.open { display: flex; }
  .fm-preview .fm-pv-actions .btn { justify-content: flex-start; width: 100%; }
  /* PDF: hide iframe, make the open-fullscreen call-to-action fill the space. */
  .fm-preview .fm-pv-frame { display: none; }
  .fm-preview .fm-pv-pdf-open { flex: 1 1 auto; flex-direction: column; justify-content: center; text-align: center; }
}

/* Scanner */
.scan-stage { position: relative; background: #0b1430; border-radius: 12px; overflow: hidden; display: grid; place-items: center; min-height: 320px; }
.scan-stage canvas { max-width: 100%; touch-action: none; }
.scan-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.scan-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.scan-filter-btn { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border); background: #fff; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.scan-filter-btn.active { background: linear-gradient(135deg,#2F80FF,#1F6FEF); color: #fff; border-color: transparent; }

/* ===== Autocomplete ===== */
.ac-wrap { position: relative; }
.ac-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-lg); max-height: 280px; overflow-y: auto; display: none;
}
.ac-menu.open { display: block; }
.ac-item { padding: 10px 14px; font-size: 13.5px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; border-bottom: 1px solid var(--border-soft); }
.ac-item:last-child { border-bottom: none; }
.ac-item:hover, .ac-item.active { background: var(--bg-soft); }
.ac-item .ac-title { font-weight: 600; color: var(--ink); }
.ac-item .ac-sub { font-size: 11.5px; color: var(--ink-3); }
.ac-item mark { background: rgba(47,128,255,.18); color: inherit; border-radius: 3px; padding: 0 1px; }
.ac-loading, .ac-empty { padding: 10px 14px; font-size: 12.5px; color: var(--ink-muted); }

/* Nurse / medication console */
.med-list .med-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: 12px; margin-bottom: 10px; }
.med-row .med-ico { width: 38px; height: 38px; border-radius: 10px; background: rgba(20,184,166,.12); color: var(--teal); display: grid; place-items: center; font-size: 18px; flex-shrink: 0; }
.med-row .med-main { flex: 1; min-width: 0; }
.med-row .med-name { font-weight: 700; color: var(--ink); }
.med-row .med-meta { font-size: 12px; color: var(--ink-3); }
.med-row .med-actions { display: flex; gap: 6px; }
.chip-times { display: flex; gap: 6px; flex-wrap: wrap; }

/* Chat history dropdown */
.chat-hist-wrap { position: relative; }
.chat-hist-menu {
  position: absolute; right: 0; top: calc(100% + 6px); width: 300px; max-height: 380px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg);
  display: none; z-index: 110;
}
.chat-hist-menu.open { display: block; }
.chat-hist-menu .hist-empty { padding: 16px; font-size: 12.5px; color: var(--ink-muted); text-align: center; }
.hist-item { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border-soft); cursor: pointer; }
.hist-item:last-child { border-bottom: none; }
.hist-item:hover { background: var(--bg-soft); }
.hist-item .hist-title { flex: 1; min-width: 0; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist-item .hist-meta { font-size: 11px; color: var(--ink-muted); }
.hist-item.active .hist-title { font-weight: 700; color: var(--brand); }
.hist-item .hist-del { border: none; background: none; color: var(--ink-muted); cursor: pointer; padding: 2px; }
.hist-item .hist-del:hover { color: var(--red); }

.chat-status { color: var(--ink-3); font-size: 13px; display: inline-flex; align-items: center; gap: 7px; }
.chat-status i { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Chat markdown rendering ===== */
.chat-msg .bubble.md { white-space: normal; }
.bubble.md > :first-child { margin-top: 0; }
.bubble.md > :last-child { margin-bottom: 0; }
.bubble.md p { margin: 0 0 8px; }
.bubble.md .md-h { font-size: 14.5px; font-weight: 700; margin: 12px 0 6px; color: var(--ink); }
.bubble.md h5.md-h, .bubble.md h6.md-h { font-size: 13px; }
.bubble.md ul.md-ul, .bubble.md ol.md-ol { margin: 6px 0 8px; padding-left: 20px; }
.bubble.md li { margin-bottom: 3px; }
.bubble.md code { background: rgba(47,128,255,.12); color: #1F6FEF; padding: 1px 5px; border-radius: 5px; font-family: "SFMono-Regular", Consolas, monospace; font-size: 12.5px; }
.bubble.md pre.md-pre { background: #0f172a; color: #e2e8f0; padding: 11px 13px; border-radius: 10px; overflow-x: auto; margin: 8px 0; }
.bubble.md pre.md-pre code { background: none; color: inherit; padding: 0; font-size: 12.5px; }
.bubble.md a { color: #1F6FEF; text-decoration: underline; word-break: break-word; }
.bubble.md blockquote.md-quote { margin: 8px 0; padding: 6px 12px; border-left: 3px solid #1F6FEF; background: rgba(47,128,255,.07); border-radius: 0 8px 8px 0; color: var(--ink-2); }
.bubble.md hr.md-hr { border: none; border-top: 1px solid var(--border); margin: 12px 0; }
.bubble.md .md-table-wrap { overflow-x: auto; margin: 8px 0; }
.bubble.md table.md-table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.bubble.md table.md-table th { background: rgba(47,128,255,.1); text-align: left; padding: 6px 9px; border: 1px solid var(--border); font-weight: 700; }
.bubble.md table.md-table td { padding: 6px 9px; border: 1px solid var(--border); }
.bubble.md .md-err { color: var(--red); font-size: 12px; margin-top: 6px; }

/* ===== AI report card ===== */
.report-card { display: flex; align-items: center; gap: 13px; margin: 2px 0 2px 38px; padding: 13px 15px;
  border: 1px solid #DCE8FF; border-radius: 14px; background: linear-gradient(135deg, #F1F6FF, #EAF1FF); }
.report-card .rc-icon { width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; display: grid; place-items: center;
  font-size: 21px; color: #fff; background: linear-gradient(135deg, #2F80FF, #1F6FEF); }
.report-card .rc-body { flex: 1; min-width: 0; }
.report-card .rc-title { font-weight: 700; font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.report-card .rc-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.report-card .rc-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
  padding: 8px 13px; border-radius: 10px; background: #fff; border: 1px solid #C7D9FF; color: #1F6FEF; text-decoration: none; }
.report-card .rc-btn:hover { background: #1F6FEF; color: #fff; border-color: #1F6FEF; }

/* ===== In-chat widgets ===== */
.chat-widget { margin: 4px 0 4px 38px; border: 1px solid var(--border); border-radius: 14px; background: #fff; overflow: hidden; }
.chat-widget .cw-head { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-bottom: 1px solid var(--bg-soft);
  background: linear-gradient(135deg, #F1F6FF, #EAF1FF); }
.chat-widget .cw-head > i { font-size: 19px; color: #2F80FF; }
.chat-widget .cw-title { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.chat-widget .cw-sub { font-size: 11.5px; color: var(--ink-3); }
.chat-widget .cw-count { margin-left: auto; font-size: 11.5px; color: var(--ink-3); }
.chat-widget .cw-foot { padding: 9px 14px; font-size: 11px; color: var(--ink-3); border-top: 1px solid var(--bg-soft); display: flex; gap: 6px; align-items: center; }
.chat-widget .cw-empty { padding: 16px; text-align: center; color: var(--ink-3); font-size: 13px; }

/* Med pass */
.med-pass .mp-initials-row { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: #fffbeb; border-bottom: 1px solid #fde68a; }
.med-pass .mp-initials-row label { font-size: 12.5px; font-weight: 700; color: #92400e; }
.med-pass .mp-initials { width: 80px; text-transform: uppercase; padding: 7px 9px; border: 1px solid #fcd34d; border-radius: 8px; font: inherit; font-weight: 700; letter-spacing: 1px; }
.med-pass .mp-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--bg-soft); }
.med-pass .mp-row:last-child { border-bottom: none; }
.med-pass .mp-med { flex: 1; min-width: 0; }
.med-pass .mp-name { font-weight: 600; font-size: 13.5px; color: var(--ink); }
.med-pass .mp-meta { font-size: 11.5px; color: var(--ink-3); }
.med-pass .mp-ctrl { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.med-pass .mp-check { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: #16a34a; cursor: pointer; }
.med-pass .mp-check input { width: 17px; height: 17px; }
.med-pass .mp-mini { font: inherit; font-size: 11.5px; padding: 4px 8px; border: 1px solid var(--border); background: #fff; border-radius: 7px; color: var(--ink-2); cursor: pointer; }
.med-pass .mp-mini.danger { color: #dc2626; }
.med-pass .mp-charted { font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 999px; text-transform: capitalize; }
.med-pass .mp-charted.given { background: #dcfce7; color: #166534; }
.med-pass .mp-charted.refused { background: #fef9c3; color: #854d0e; }
.med-pass .mp-charted.missed { background: #fee2e2; color: #b91c1c; }

/* Table widget */
.table-widget .tw-filter { width: calc(100% - 28px); margin: 12px 14px 0; padding: 8px 11px; border: 1px solid var(--border); border-radius: 9px; font: inherit; font-size: 13px; }
.table-widget .tw-wrap { max-height: 320px; overflow: auto; padding: 12px 14px 14px; }
.table-widget table.data { width: 100%; font-size: 12.5px; }

/* Confirm widget */
.confirm-widget .cw-summary { padding: 12px 14px; font-size: 13px; line-height: 1.5; color: var(--ink); }
.confirm-widget .cw-actions { display: flex; gap: 8px; justify-content: flex-end; padding: 0 14px 12px; }
.confirm-widget .cw-result { padding: 0 14px 12px; font-size: 12.5px; }
.confirm-widget .cw-done { color: #166534; font-weight: 600; }
.confirm-widget .cw-err { color: #dc2626; }
.confirm-widget .cw-cancelled, .confirm-widget .cw-working { font-size: 12.5px; color: var(--ink-3); padding: 6px 0; display: inline-block; }

/* ===== @-mention / omnibox popup ===== */
/* Padding lives on an INNER wrapper (not .mention-pop) so a pointerdown never
   lands in a dead 5px gutter of the pop itself — every click routes to a row. */
.mention-pop { position: fixed; z-index: 3000; max-height: 280px; overflow-y: auto; background: #fff;
  border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 48px rgba(15,23,42,.18); display: none; }
.mention-pop.open { display: block; }
.mention-pop-inner { padding: 5px; }
.mention-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px; cursor: pointer; }
.mention-item.active, .mention-item:hover { background: var(--bg-soft); }
.mention-item > i { font-size: 17px; color: #2F80FF; flex-shrink: 0; }
.mention-item .m-name { font-weight: 600; font-size: 13px; color: var(--ink); white-space: nowrap; }
.mention-item .m-sub { font-size: 11.5px; color: var(--ink-3); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mention-item .m-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 7px; border-radius: 999px; flex-shrink: 0; }
.mention-item .m-tag.consumer { background: rgba(47,128,255,.12); color: #1F6FEF; }
.mention-item .m-tag.staff { background: rgba(46,213,115,.16); color: #17a85a; }
.mention-item .m-tag.ai { background: linear-gradient(135deg,#6d28d9,#db2777); color: #fff; }
.mention-empty { padding: 14px; text-align: center; color: var(--ink-3); font-size: 12.5px; }
/* Only slash-command rows use the monospace style — People/Pages/Help stay normal. */
.mention-item .m-name.cmd-name { font-family: "SFMono-Regular", Consolas, monospace; color: #1F6FEF; }
/* Grouped-result section headers (People / Pages / Help & Answers / Ask ProgencyAI). */
.omni-group-label { padding: 9px 12px 3px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-3); }
.mention-pop-inner .omni-group-label:first-child { padding-top: 4px; }

/* ===== Mobile search sheet (≤768px entry point) ===== */
.omni-search-btn { display: none; }        /* shown only on phones (media query below) */
@media (max-width: 768px) { .omni-search-btn { display: grid; } }
.omni-sheet { position: fixed; inset: 0; z-index: 200; }
.omni-sheet[hidden] { display: none; }
.omni-sheet-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.45); }
.omni-sheet-panel { position: absolute; top: 0; left: 0; right: 0; display: flex; flex-direction: column;
  max-height: 100dvh; background: var(--card, #fff); border-radius: 0 0 16px 16px;
  box-shadow: 0 24px 60px rgba(2,6,23,.4); }
.omni-sheet-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.omni-sheet-bar .ai-icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand, #2F80FF), #7c3aed); color: #fff; flex-shrink: 0; }
.omni-sheet-input { flex: 1; min-width: 0; min-height: 44px; border: none; outline: none; background: transparent;
  font: inherit; font-size: 16px; color: var(--ink); }  /* 16px avoids iOS zoom-on-focus */
.omni-sheet-bar .icon-btn { width: 44px; height: 44px; flex-shrink: 0; }
.omni-sheet-results { overflow-y: auto; max-height: calc(100dvh - 66px); -webkit-overflow-scrolling: touch; }
.omni-sheet-results .mention-item { min-height: 44px; padding: 10px 12px; }
.omni-sheet-results .omni-group-label { padding: 12px 12px 4px; }
body.omni-sheet-open { overflow: hidden; }
.bubble.md .md-table-filter { width: 100%; margin: 4px 0 6px; padding: 6px 10px; border: 1px solid var(--border);
  border-radius: 8px; font: inherit; font-size: 12px; box-sizing: border-box; }

/* ===== Notifications dropdown ===== */
.notif-wrap { position: relative; }
.notif-menu { position: absolute; top: calc(100% + 10px); right: 0; width: 360px; max-width: 92vw; background: #fff;
  border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 48px rgba(15,23,42,.16); z-index: 1200;
  display: none; overflow: hidden; }
.notif-menu.open { display: block; }
.notif-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 13.5px; }
.notif-head-actions { display: flex; align-items: center; gap: 12px; }
.notif-readall { border: none; background: none; color: #2F80FF; font-weight: 600; font-size: 12px; cursor: pointer; text-decoration: none; }
.notif-empty { padding: 26px 16px; text-align: center; color: var(--ink-3); font-size: 13px; }
.notif-list { max-height: 380px; overflow-y: auto; }
.notif-item { display: flex; gap: 11px; padding: 12px 15px; border-bottom: 1px solid var(--bg-soft); text-decoration: none; color: inherit; cursor: pointer; }
.notif-item:hover { background: var(--bg-soft); }
.notif-item.unread { background: #F1F6FF; }
.notif-item.unread:hover { background: #EAF1FF; }
.notif-item > i { font-size: 18px; flex-shrink: 0; margin-top: 1px; color: var(--ink-3); }
.notif-item.success > i { color: #16a34a; }
.notif-item.warning > i { color: #d97706; }
.notif-item.error > i { color: #dc2626; }
.notif-item.info > i { color: #2F80FF; }
.notif-item .ni-title { font-weight: 600; font-size: 13px; color: var(--ink); }
.notif-item .ni-sub { font-size: 12px; color: var(--ink-2); margin-top: 2px; line-height: 1.4; }
.notif-item .ni-ago { font-size: 11px; color: var(--ink-muted); margin-top: 3px; }

/* ===== File manager (enhanced) ===== */
.fm-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.fm-search { flex: 1; min-width: 240px; display: flex; align-items: center; gap: 8px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; padding: 0 12px; height: 42px; }
.fm-search > i { color: var(--ink-muted); font-size: 18px; }
.fm-search input[type="search"] { flex: 1; border: none; background: transparent; outline: none; font-family: inherit; font-size: 14px; color: var(--ink); }
.fm-content-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-3); white-space: nowrap; cursor: pointer; padding-left: 8px; border-left: 1px solid var(--border); }
.fm-content-toggle input { width: 15px; height: 15px; }
.fm-clear { border: none; background: none; color: var(--ink-muted); cursor: pointer; }
.fm-clear:hover { color: var(--ink); }
.fm-bar-right { display: flex; align-items: center; gap: 8px; }
.fm-sort { height: 42px; width: auto; padding: 0 10px; }
.fm-view-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.fm-view-toggle button { border: none; background: #fff; color: var(--ink-3); width: 38px; height: 42px; display: grid; place-items: center; cursor: pointer; }
.fm-view-toggle button + button { border-left: 1px solid var(--border); }
.fm-view-toggle button.active { background: linear-gradient(135deg, #2F80FF, #1F6FEF); color: #fff; }
.fm-view-toggle i { font-size: 18px; }
.fm-actionbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.fm-count { font-size: 12px; color: var(--ink-muted); margin-left: auto; }
.fm-dropzone { display: flex; align-items: center; justify-content: center; gap: 8px; }
.fm-dropzone i { font-size: 22px; }

/* icon color variants */
.fm-ico.ppt, .fm-ico-sm.ppt { background: rgba(245,158,11,.14); color: #ea580c; }
.fm-ico.xls, .fm-ico-sm.xls { background: rgba(16,185,129,.12); color: #059669; }
.fm-ico.zip, .fm-ico-sm.zip { background: rgba(245,158,11,.12); color: #d97706; }
.fm-ico.audio, .fm-ico-sm.audio { background: rgba(236,72,153,.12); color: #db2777; }
.fm-ico.video, .fm-ico-sm.video { background: rgba(47,128,255,.12); color: #1F6FEF; }
.fm-ico.code, .fm-ico-sm.code { background: rgba(20,184,166,.12); color: #0d9488; }
.fm-ico.txt, .fm-ico-sm.txt { background: rgba(100,116,139,.12); color: #475569; }
.fm-item .fm-ico img.fm-thumb { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.fm-item .fm-ico.img { overflow: hidden; padding: 0; }

.fm-hit { font-size: 11px; color: var(--brand); margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.fm-hit-inline { color: var(--brand); }
.fm-pathchip { font-size: 10.5px; color: var(--ink-muted); margin-top: 4px; display: inline-flex; align-items: center; gap: 4px; background: var(--bg-soft); padding: 2px 7px; border-radius: 6px; }
.fm-item.drop-target { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(47,128,255,.25); }

/* list view */
.fm-ico-sm { width: 32px; height: 32px; border-radius: 9px; display: inline-grid; place-items: center; font-size: 17px; }
.fm-ico-sm.folder { background: rgba(245,158,11,.12); color: #f59e0b; }
.fm-ico-sm.pdf { background: rgba(239,68,68,.1); color: #ef4444; }
.fm-ico-sm.img { background: rgba(47,128,255,.1); color: #1F6FEF; }
.fm-ico-sm.doc { background: rgba(14,165,233,.1); color: #0ea5e9; }
.fm-ico-sm.file { background: var(--bg-soft); color: var(--ink-3); }
table.fm-table { width: 100%; }
table.fm-table th:first-child, table.fm-table td:first-child { width: 44px; padding-right: 0; }
table.fm-table td, table.fm-table th { vertical-align: middle; }
table.fm-table tbody tr { cursor: pointer; }
table.fm-table tbody tr:hover { background: var(--bg-soft); }
table.fm-table td.strong { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
table.fm-table td:nth-child(3), table.fm-table td:nth-child(4), table.fm-table td:nth-child(5) { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }
table.fm-table td:last-child { width: 44px; text-align: right; }
table.fm-table .fm-pathchip { margin-top: 0; margin-left: 6px; }
table.fm-table .fm-hit-inline { color: var(--brand); }

/* Scanner enhancements */
.scan-stage { position: relative; }
.scan-spinner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(11,20,48,.55); color: #fff; border-radius: 12px; font-size: 13.5px; }
.scan-spinner i { font-size: 30px; animation: spin 1s linear infinite; }
.scan-hint { margin: 0 0 10px; }
.scan-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.scan-actions-inline { display: flex; gap: 8px; flex-wrap: wrap; }


/* ===== Toast notifications ===== */
.toast-stack {
  position: fixed; top: calc(var(--topbar-h) + 12px); right: 24px; z-index: 300;
  display: flex; flex-direction: column; gap: 12px;
  width: 360px; max-width: calc(100vw - 32px); pointer-events: none;
}
.toast {
  pointer-events: auto; position: relative; overflow: hidden; cursor: pointer;
  --toast-accent: #2F80FF;
  background: var(--card); border-radius: 14px; border: 1px solid var(--border-soft);
  border-left: 4px solid var(--ink-muted);
  box-shadow: 0 14px 44px rgba(15,23,42,.20);
  display: flex; gap: 12px; padding: 14px 30px 14px 14px;
  transform: translateX(120%); opacity: 0;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .4s;   /* drives the EXIT (.hide) */
}
/* Fancy fade-in: slide in from the right with a soft overshoot + scale pop, and
   flash a glowing colored border for ~1s so a new notification catches the eye. */
.toast.show { animation: toast-in .5s cubic-bezier(.16,1.02,.3,1) both, toast-flash 1.05s ease-out both; }
.toast.hide { transform: translateX(120%); opacity: 0; }
@keyframes toast-in {
  0%   { opacity: 0; transform: translateX(115%) scale(.94); }
  55%  { opacity: 1; transform: translateX(-5px) scale(1.015); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes toast-flash {
  0%   { box-shadow: 0 14px 44px rgba(15,23,42,.20), 0 0 0 0 var(--toast-accent); border-color: var(--border-soft); }
  14%  { box-shadow: 0 14px 44px rgba(15,23,42,.20), 0 0 16px 3px var(--toast-accent); border-color: var(--toast-accent); }
  55%  { box-shadow: 0 14px 44px rgba(15,23,42,.20), 0 0 9px 1px var(--toast-accent); border-color: var(--toast-accent); }
  100% { box-shadow: 0 14px 44px rgba(15,23,42,.20), 0 0 0 0 rgba(0,0,0,0); border-color: var(--border-soft); }
}
.toast .toast-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; font-size: 18px; }
.toast .toast-body { flex: 1; min-width: 0; }
.toast .toast-title { font-weight: 700; font-size: 13.5px; color: var(--ink); line-height: 1.3; }
.toast .toast-msg { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; line-height: 1.45; overflow-wrap: anywhere; }
.toast .toast-close {
  position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 6px;
  border: 0; background: transparent; color: var(--ink-muted); display: grid; place-items: center; cursor: pointer;
}
.toast .toast-close:hover { background: var(--bg-soft); color: var(--ink); }
.toast .toast-close i { font-size: 15px; }
.toast .toast-progress {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform-origin: left;
  animation: toast-bar linear forwards; animation-duration: var(--toast-dur, 6000ms); background: var(--ink-muted);
}
.toast.paused .toast-progress { animation-play-state: paused; }
@keyframes toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

.toast.error   { border-left-color: var(--red);   --toast-accent: var(--red, #ef4444); }
.toast.error   .toast-ico { background: rgba(239,68,68,.12); color: #dc2626; }
.toast.error   .toast-progress { background: var(--red); }
.toast.warning { border-left-color: var(--amber); --toast-accent: var(--amber, #f59e0b); }
.toast.warning .toast-ico { background: rgba(245,158,11,.16); color: #b45309; }
.toast.warning .toast-progress { background: var(--amber); }
.toast.success { border-left-color: var(--green); --toast-accent: var(--green, #10b981); }
.toast.success .toast-ico { background: rgba(16,185,129,.14); color: #059669; }
.toast.success .toast-progress { background: var(--green); }
.toast.info    { border-left-color: var(--blue);  --toast-accent: var(--blue, #0ea5e9); }
.toast.info    .toast-ico { background: rgba(14,165,233,.14); color: #0369a1; }
.toast.info    .toast-progress { background: var(--blue); }

@media (max-width: 768px) {
  .toast-stack { top: calc(var(--topbar-h) + 8px); right: 10px; left: 10px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .toast { transition: opacity .2s; transform: none; }
  .toast.show { animation: toast-fade .2s ease both; }   /* plain fade — no slide/scale/flash */
  .toast.hide { transform: none; }
  .toast .toast-progress { animation: none; }
}
@keyframes toast-fade { from { opacity: 0; } to { opacity: 1; } }


/* ===== Scanner: format selector, OCR toggle, multi-page strip ===== */
.scan-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.scan-foot-left { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.scan-foot-right { display: flex; align-items: center; gap: 10px; }
.scan-format { display: inline-flex; align-items: center; gap: 6px; }
.scan-fmt-label { font-size: 12px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .4px; margin-right: 2px; }
.scan-fmt-btn {
  padding: 7px 12px; border-radius: 9px; border: 1px solid var(--border); background: #fff;
  font-size: 12.5px; font-weight: 700; color: var(--ink-2); transition: background .15s, color .15s, opacity .15s;
}
.scan-fmt-btn.active { background: linear-gradient(135deg,#2F80FF,#1F6FEF); color: #fff; border-color: transparent; }
.scan-fmt-btn.disabled { opacity: .4; cursor: not-allowed; }
.scan-ocr { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-2); font-weight: 500; cursor: pointer; }
.scan-ocr input { width: 16px; height: 16px; }

.scan-pages { margin-top: 14px; }
.scan-pages-label { font-size: 12px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 8px; }
.scan-pages-strip { display: flex; gap: 10px; flex-wrap: wrap; }
.scan-thumb { position: relative; width: 70px; height: 92px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); background: #fff; box-shadow: var(--shadow-sm); }
.scan-thumb img { width: 100%; height: 100%; object-fit: cover; }
.scan-thumb-n { position: absolute; left: 4px; bottom: 4px; font-size: 10px; font-weight: 800; color: #fff; background: rgba(11,20,48,.7); border-radius: 5px; padding: 1px 6px; }
.scan-thumb-x { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 5px; border: 0; background: rgba(239,68,68,.92); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; display: grid; place-items: center; }

/* Camera live-preview: dvh (not vh) so the video isn't clipped by mobile browser
   chrome. Scoped under .pg-modal to override scanner.js's runtime-injected rule. */
.pg-modal .scan-cam-stage video { max-height: 60vh; max-height: 60dvh; }
@media (max-width: 768px) {
  .scan-foot { flex-direction: column; align-items: stretch; }
  .scan-foot-right { justify-content: flex-end; }
  /* Bigger capture area on phones + full-width Save/Cancel. */
  .scan-stage { min-height: 46dvh; }
  .pg-modal .scan-cam-stage video { max-height: 52dvh; }
  .scan-foot-right .btn { flex: 1; }
}


/* ===== ISP: person-centered sections + goals ===== */
.isp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.isp-section h3 { font-family: "Plus Jakarta Sans", sans-serif; font-size: 14px; margin: 0 0 6px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.isp-section .isp-body { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; white-space: pre-wrap; }
.isp-section .isp-empty { color: var(--ink-muted); font-style: italic; }

.goal-card { border: 1px solid var(--border); border-radius: 14px; padding: 16px; margin-bottom: 14px; background: var(--card); }
.goal-card .goal-head { display: flex; align-items: flex-start; gap: 10px; justify-content: space-between; }
.goal-card .goal-title { font-weight: 700; font-size: 14.5px; color: var(--ink); }
.goal-card .goal-cat { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.goal-progress { height: 8px; border-radius: 999px; background: var(--bg-soft); overflow: hidden; margin: 10px 0 6px; }
.goal-progress > span { display: block; height: 100%; background: linear-gradient(90deg, #2F80FF, #1F6FEF); border-radius: 999px; transition: width .4s; }
.goal-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin-top: 10px; font-size: 12.5px; }
.goal-fields .gf-label { color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; font-size: 10.5px; }
.goal-fields .gf-val { color: var(--ink-2); }
.goal-notes { margin-top: 12px; border-top: 1px dashed var(--border-soft); padding-top: 10px; }
.goal-note { font-size: 12.5px; color: var(--ink-2); padding: 6px 0; border-bottom: 1px dashed var(--border-soft); }
.goal-note:last-child { border-bottom: none; }
.goal-note .gn-meta { color: var(--ink-muted); font-size: 11.5px; }

.rating-pill { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.rating-pill.progress { background: rgba(16,185,129,.14); color: #059669; }
.rating-pill.maintained { background: rgba(14,165,233,.14); color: #0369a1; }
.rating-pill.regressed { background: rgba(239,68,68,.12); color: #dc2626; }
.rating-pill.no_opportunity { background: var(--bg-soft); color: var(--ink-3); }

/* Shift-log discreet goals panel */
.sl-goals { background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius: 12px; padding: 12px 14px; margin-top: 14px; }
.sl-goals .slg-head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-3); margin-bottom: 10px; }
.sl-goal { background: #fff; border: 1px solid var(--border-soft); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.sl-goal .slg-title { font-weight: 600; font-size: 13px; color: var(--ink); }
.sl-goal .slg-obj { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.sl-goal .slg-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
.sl-rate-btn { font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 8px; border: 1px solid var(--border); background: #fff; color: var(--ink-2); cursor: pointer; }
.sl-rate-btn.sel { color: #fff; border-color: transparent; }
.sl-rate-btn[data-rate="progress"].sel { background: #10b981; }
.sl-rate-btn[data-rate="maintained"].sel { background: #0ea5e9; }
.sl-rate-btn[data-rate="regressed"].sel { background: #ef4444; }
.sl-rate-btn[data-rate="no_opportunity"].sel { background: #94a3b8; }
.sl-goal .slg-note { width: 100%; margin-top: 8px; border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 12.5px; resize: vertical; }
.sl-goal .slg-saved { font-size: 11.5px; color: #059669; font-weight: 600; }

@media (max-width: 768px) {
  .isp-grid, .goal-fields { grid-template-columns: 1fr; }
}


/* ===== Data-table: sticky header on long tables + mobile card view ===== */
/* Long tables (JS adds .dt-scroll when >12 rows are shown): cap height, scroll,
   and pin the header row. */
.table-wrap.dt-scroll { max-height: 68vh; overflow: auto; }
.table-wrap.dt-scroll table.data thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--card);
  box-shadow: inset 0 -1px 0 var(--border);
}

/* Phone: turn enhanced list tables into stacked cards (no horizontal scrolling). */
@media (max-width: 640px) {
  table.data.dt-enhanced thead { display: none; }
  table.data.dt-enhanced tbody tr {
    display: block; background: var(--card); border: 1px solid var(--border-soft);
    border-radius: 12px; padding: 6px 12px; margin-bottom: 10px; box-shadow: var(--shadow-sm);
  }
  table.data.dt-enhanced tbody tr:hover { background: var(--card); }
  table.data.dt-enhanced tbody td {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 8px 0; border-bottom: 1px dashed var(--border-soft); text-align: right;
  }
  table.data.dt-enhanced tbody td:last-child { border-bottom: none; }
  table.data.dt-enhanced tbody td[data-label]::before {
    content: attr(data-label); font-size: 11px; font-weight: 700; letter-spacing: .3px;
    text-transform: uppercase; color: var(--ink-3); text-align: left; flex-shrink: 0;
  }
  /* Cells without a label (e.g. the actions column) center their content. */
  table.data.dt-enhanced tbody td:not([data-label]) { justify-content: flex-end; }
  table.data.dt-enhanced .name-cell { justify-content: flex-end; }
  .table-wrap.dt-scroll { max-height: none; overflow: visible; }  /* card view doesn't need the scroller */

  /* Opt-in card stacking (.dt-stack) for short/server-rendered tables the dt
     enhancer skips (≤5 rows or colspan rows) — action buttons were landing
     off-screen right at phone widths. Markup stamps data-label per cell;
     data-label="" = unlabeled action cell. */
  table.data.dt-stack thead { display: none; }
  table.data.dt-stack tbody tr {
    display: block; background: var(--card); border: 1px solid var(--border-soft);
    border-radius: 12px; padding: 6px 12px; margin-bottom: 10px; box-shadow: var(--shadow-sm);
  }
  table.data.dt-stack tbody tr:hover { background: var(--card); }
  table.data.dt-stack tbody td {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 8px 0; border-bottom: 1px dashed var(--border-soft); text-align: right;
    width: auto !important; /* beats inline column widths once stacked */
  }
  table.data.dt-stack tbody td:last-child { border-bottom: none; }
  table.data.dt-stack tbody td[data-label]::before {
    content: attr(data-label); font-size: 11px; font-weight: 700; letter-spacing: .3px;
    text-transform: uppercase; color: var(--ink-3); text-align: left; flex-shrink: 0;
  }
  table.data.dt-stack tbody td:not([data-label]),
  table.data.dt-stack tbody td[data-label=""] { justify-content: flex-end; }
  table.data.dt-stack tbody td[data-label=""]::before { display: none; }
  table.data.dt-stack tbody td[colspan] { display: block; text-align: left; }

  /* app.js wraps EVERY table.data in a .tbl-wrap (overflow-x:auto). A carded
     table still lays out as display:table, so it keeps its intrinsic width
     (wider than the phone) and the .tbl-wrap scrolls — clipping the right-hand
     value of every card cell (Time/Home/Medication ran off the edge on the MAR
     overview). Force the carded table to a full-width block so its flex cells
     wrap to the viewport and the wrapper never needs to scroll. */
  table.data.dt-enhanced, table.data.dt-stack { display: block; width: 100%; }
  table.data.dt-enhanced > tbody, table.data.dt-stack > tbody { display: block; }
  .tbl-wrap:has(> table.data.dt-enhanced),
  .tbl-wrap:has(> table.data.dt-stack) { overflow-x: visible; }
  /* Multi-part value cells (e.g. med name + PRN badge + dose) wrap onto extra
     lines within the card instead of forcing a mid-word break or overflowing. */
  table.data.dt-enhanced tbody td, table.data.dt-stack tbody td { flex-wrap: wrap; overflow-wrap: break-word; }
}


/* AI-suggested ISP goal cards */
.suggest-card { border-left: 3px solid var(--brand-2, #1F6FEF); background: linear-gradient(180deg, rgba(47,128,255,.05), transparent 55%); }

/* ===========================================================
   Messenger — staff-to-staff chat
   =========================================================== */
/* Topbar messenger button + unread dot (mirrors the notif bell) */
.icon-btn.msg-btn { position: relative; display: inline-grid; place-items: center; text-decoration: none; }
.icon-btn.msg-btn .dot,
.notif-wrap .dot {
  position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--red); color: #fff; font-size: 10.5px; font-weight: 700;
  line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--card);
}

/* Two-pane layout fills the content area.
   Height subtracts the topbar plus the surrounding content chrome (top/bottom
   padding, breadcrumbs, and the content flex gap) so the composer at the bottom
   of the conversation pane is never pushed below the fold. dvh keeps it correct
   on mobile browsers whose toolbars change the visible viewport. */
.messenger {
  display: grid; grid-template-columns: 288px 1fr; gap: 0;
  height: calc(100vh - var(--topbar-h) - 116px);
  height: calc(100dvh - var(--topbar-h) - 116px);
  min-height: 380px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); position: relative;
}

/* ----- Left: thread list (compact) ----- */
.msgr-list { display: flex; flex-direction: column; border-right: 1px solid var(--border); min-width: 0; background: var(--bg); }
.msgr-list-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 13px 8px; }
.msgr-list-title { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 13.5px; color: var(--ink); display: flex; align-items: center; gap: 7px; }
.msgr-list-title i { color: var(--brand); font-size: 16px; }
.msgr-search { position: relative; padding: 0 13px 10px; }
.msgr-search i { position: absolute; left: 23px; top: 50%; transform: translateY(-60%); color: var(--ink-muted); font-size: 15px; }
.msgr-search input { width: 100%; box-sizing: border-box; padding: 7px 11px 7px 31px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); font: inherit; font-size: 12.5px; }
.msgr-search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(47,128,255,.12); }

.msgr-threads { flex: 1; overflow-y: auto; padding: 3px 6px 8px; }
.msgr-loading, .msgr-no-threads { padding: 24px 14px; text-align: center; color: var(--ink-3); font-size: 12.5px; }
.msgr-no-threads i { font-size: 28px; color: var(--ink-muted); display: block; margin-bottom: 8px; }
.msgr-loading i { animation: spin 1s linear infinite; }

.msgr-thread { display: flex; gap: 9px; padding: 8px 9px; border-radius: 10px; cursor: pointer; transition: background .12s; align-items: flex-start; }
.msgr-thread:hover { background: var(--bg-soft); }
.msgr-thread.active { background: rgba(47,128,255,.10); }
.msgr-thread.unread .msgr-thread-name { font-weight: 800; color: var(--ink); }
.msgr-avatar { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center;
  font-weight: 700; font-size: 13px; color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.msgr-avatar.group { background: linear-gradient(135deg, var(--teal), var(--blue)); }
.msgr-avatar.sm { width: 30px; height: 30px; border-radius: 9px; font-size: 11.5px; }
.msgr-thread-body { min-width: 0; flex: 1; }
.msgr-thread-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.msgr-thread-name { font-weight: 600; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msgr-thread-time { font-size: 10.5px; color: var(--ink-muted); flex-shrink: 0; }
.msgr-thread-subject { font-size: 11px; color: var(--brand); font-weight: 600; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msgr-thread-prev { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.msgr-unread-badge { margin-left: auto; flex-shrink: 0; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px;
  background: var(--brand); color: #fff; font-size: 10px; font-weight: 700; line-height: 17px; text-align: center; }

/* ----- Right: conversation ----- */
.msgr-main { display: flex; flex-direction: column; min-width: 0; position: relative; }
.msgr-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px; gap: 6px; }
.msgr-empty-art { width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; font-size: 40px; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--teal)); margin-bottom: 8px; box-shadow: var(--shadow); }
.msgr-empty h3 { margin: 6px 0 0; font-family: "Plus Jakarta Sans", sans-serif; color: var(--ink); }
.msgr-empty p { margin: 0 0 14px; color: var(--ink-3); font-size: 13.5px; max-width: 340px; }

.msgr-convo { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.msgr-convo-head { display: flex; align-items: center; gap: 11px; padding: 11px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.msgr-back { display: none; }
.msgr-convo-ident { min-width: 0; }
.msgr-convo-title { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msgr-convo-sub { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.msgr-messages { flex: 1; overflow-y: auto; padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; background: var(--bg); }
.msgr-bubble-row { display: flex; gap: 9px; max-width: 78%; align-items: flex-end; }
.msgr-bubble-row.mine { margin-left: auto; flex-direction: row-reverse; }
.msgr-bubble-av { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--teal), var(--blue)); }
.msgr-bubble { background: var(--card); border: 1px solid var(--border); padding: 9px 13px; border-radius: 14px; border-bottom-left-radius: 4px;
  box-shadow: var(--shadow-sm); min-width: 0; }
.msgr-bubble-row.mine .msgr-bubble { background: linear-gradient(135deg, #2F80FF, #1F6FEF); border: none; color: #fff; border-radius: 14px; border-bottom-right-radius: 4px; }
.msgr-bubble-from { font-size: 11.5px; font-weight: 700; color: var(--brand); margin-bottom: 2px; }
.msgr-bubble-text { font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; }
.msgr-bubble-meta { font-size: 10.5px; color: var(--ink-muted); margin-top: 3px; text-align: right; }
.msgr-bubble-row.mine .msgr-bubble-meta { color: rgba(255,255,255,.8); }

.msgr-composer { display: flex; align-items: flex-end; gap: 9px; padding: 10px 14px; border-top: 1px solid var(--border); background: var(--card); flex-shrink: 0; }
.msgr-composer textarea { flex: 1; resize: none; border: 1px solid var(--border); border-radius: 16px; padding: 9px 14px; font: inherit; font-size: 13px;
  line-height: 1.4; max-height: 120px; background: var(--bg); }
.msgr-composer textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(47,128,255,.12); background: var(--card); }
.msgr-send { flex-shrink: 0; width: 38px; height: 38px; border: none; border-radius: 50%; cursor: pointer; color: #fff; font-size: 17px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); display: grid; place-items: center; transition: transform .1s, box-shadow .15s; }
.msgr-send:hover { transform: scale(1.06); box-shadow: 0 4px 14px rgba(47,128,255,.4); }
.msgr-send:active { transform: scale(.96); }

/* ----- New message slide-in panel ----- */
.msgr-newpanel-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.32); z-index: 60; }
.msgr-newpanel { position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; width: 420px; max-width: 92vw; background: var(--card); z-index: 61;
  display: flex; flex-direction: column; box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform .22s ease; }
.msgr-newpanel.open { transform: translateX(0); }
.msgr-new-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.msgr-new-title { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 16px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.msgr-new-title i { color: var(--brand); }
.msgr-new-body { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; }
.msgr-optional { color: var(--ink-muted); font-weight: 400; font-size: 12px; }
.msgr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; min-height: 24px; }
.msgr-chips-hint { color: var(--ink-muted); font-size: 12.5px; }
.msgr-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 6px 4px 11px; border-radius: 999px;
  background: rgba(47,128,255,.12); color: #1F6FEF; font-size: 12.5px; font-weight: 600; }
.msgr-chip button { border: none; background: rgba(47,128,255,.2); color: #1F6FEF; width: 18px; height: 18px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; font-size: 11px; }
.msgr-chip button:hover { background: var(--brand); color: #fff; }
.msgr-recip-search { position: relative; }
.msgr-recip-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-muted); font-size: 16px; }
.msgr-recip-search input { width: 100%; box-sizing: border-box; padding: 9px 12px 9px 34px; border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: 13px; }
.msgr-recip-search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(47,128,255,.12); }
.msgr-recip-list { margin-top: 8px; max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; }
.msgr-recip-empty { padding: 16px; text-align: center; color: var(--ink-3); font-size: 12.5px; }
.msgr-recip { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--border-soft); }
.msgr-recip:last-child { border-bottom: none; }
.msgr-recip:hover { background: var(--bg-soft); }
.msgr-recip-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.msgr-recip-name { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.msgr-recip-role { font-size: 11.5px; color: var(--ink-muted); text-transform: capitalize; }
.msgr-recip > i.ti-plus { color: var(--brand); font-size: 18px; }
.msgr-new-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border); }

@keyframes spin { to { transform: rotate(360deg); } }

/* ----- Narrow desktop / tablet: keep the thread list proportional ----- */
@media (min-width: 761px) and (max-width: 1024px) {
  .messenger { grid-template-columns: 248px 1fr; }
}

/* ----- Mobile: single pane with slide ----- */
@media (max-width: 760px) {
  .messenger {
    grid-template-columns: 1fr;
    height: calc(100vh - var(--topbar-h) - 96px);
    height: calc(100dvh - var(--topbar-h) - 96px);
    min-height: 320px;
  }
  .msgr-main { display: none; }
  .messenger.show-convo .msgr-list { display: none; }
  .messenger.show-convo .msgr-main { display: flex; }
  .msgr-back { display: inline-grid; }
  .msgr-bubble-row { max-width: 88%; }
  /* Full-screen sheet on phones. It must clear the fixed bottom nav / drawer
     (z 90 / 120) — at the default z 60/61 the DSP bottom bar sat on top of the
     panel's footer, so the "Send" button was untappable (taps hit the nav). */
  .msgr-newpanel { width: 100%; max-width: 100%; z-index: 130; }
  .msgr-newpanel-backdrop { z-index: 129; }
  /* Roomier touch targets / safe-area aware composer on phones. */
  .msgr-list-head { padding: 12px 12px 8px; }
  .msgr-search { padding: 0 12px 10px; }
  .msgr-composer { padding-bottom: calc(11px + env(safe-area-inset-bottom)); }
  .msgr-send { width: 40px; height: 40px; }
  /* The floating draft-note button lands on top of the composer at phone
     widths — hide it here; drafting stays available on every other page. */
  body:has(.messenger) .draft-fab { display: none; }
}

/* ===========================================================
   Smart Scheduling
   =========================================================== */
.sched-weeknav { display: flex; gap: 8px; }

.sched-toolbar-card { padding: 14px 16px; }
.sched-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sched-tb-left, .sched-tb-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sched-status-note { font-size: 12.5px; color: var(--green); display: inline-flex; align-items: center; gap: 5px; }
.sched-tpl-wrap { position: relative; }
.sched-tpl-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 280px; background: var(--card);
  border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; }
.sched-tpl-loading, .sched-tpl-sep { padding: 8px 10px; font-size: 12px; color: var(--ink-3); }
.sched-tpl-sep { border-top: 1px solid var(--border-soft); margin-top: 4px; font-weight: 600; }
.sched-tpl-item { display: flex; align-items: center; gap: 4px; }
.sched-tpl-item button { flex: 1; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: none; background: none;
  text-align: left; border-radius: 8px; cursor: pointer; font: inherit; font-size: 13px; color: var(--ink-2); }
.sched-tpl-item button:hover { background: var(--bg-soft); }
.sched-tpl-item.save button { color: var(--brand); font-weight: 600; }
.tpl-slots { margin-left: auto; font-size: 11px; color: var(--ink-muted); }
.tpl-del { flex: 0 0 auto !important; color: var(--ink-muted) !important; }
.tpl-del:hover { color: var(--red) !important; }

.sched-report { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.25); }
.sched-report-head { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #b45309; font-size: 13.5px; margin-bottom: 6px; }
.sched-report-item { display: flex; flex-direction: column; padding: 6px 0; border-top: 1px dashed rgba(245,158,11,.3); }
.sched-report-item:first-of-type { border-top: none; }
.sri-when { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.sri-why { font-size: 12px; color: var(--ink-3); }

/* ----- Grid ----- */
.sched-grid-card { padding: 0; overflow-x: auto; }
.sched-grid { min-width: 860px; }
.sched-grid-head, .sched-grid-row { display: grid; grid-template-columns: 150px repeat(7, 1fr); }
.sched-grid-head { position: sticky; top: 0; z-index: 2; background: var(--bg-soft); border-bottom: 1px solid var(--border); }
.sched-day-col { padding: 10px 8px; text-align: center; border-left: 1px solid var(--border-soft); display: flex; flex-direction: column; }
.sched-day-col span { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.sched-day-col strong { font-size: 16px; color: var(--ink); font-family: "Plus Jakarta Sans", sans-serif; }
.sched-day-col.today { background: rgba(47,128,255,.08); }
.sched-day-col.today strong { color: var(--brand); }
.sched-home-col { padding: 12px 12px; font-weight: 600; }
.sched-grid-head .sched-home-col { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; }
.sched-grid-row { border-bottom: 1px solid var(--border-soft); }
.sched-grid-row:last-child { border-bottom: none; }
.sched-home-name { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.sched-home-type { font-size: 11px; color: var(--ink-muted); margin-top: 2px; }
.sched-cell { position: relative; padding: 6px; border-left: 1px solid var(--border-soft); min-height: 56px; display: flex; flex-direction: column; gap: 4px; }
.sched-cell.today { background: rgba(47,128,255,.03); }

.sched-shift { border-radius: 8px; padding: 5px 7px; font-size: 11.5px; line-height: 1.25; cursor: default; border: 1px solid transparent; display: flex; flex-direction: column; }
.sched-shift[data-editable] { cursor: pointer; }
.sched-shift[data-editable]:hover { box-shadow: 0 0 0 2px rgba(47,128,255,.3); }
.sched-shift.filled { background: rgba(47,128,255,.1); border-color: rgba(47,128,255,.18); }
.sched-shift.filled.mine { background: linear-gradient(135deg, rgba(20,184,166,.16), rgba(14,165,233,.16)); border-color: rgba(20,184,166,.35); }
.sched-shift.unfilled { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.25); color: #b91c1c; }
.ss-time { font-weight: 700; color: var(--ink-2); }
.sched-shift.unfilled .ss-time { color: #b91c1c; }
.ss-staff { color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-type { font-size: 10px; color: var(--ink-muted); }
.sched-cell-add { position: absolute; right: 5px; bottom: 5px; width: 20px; height: 20px; border-radius: 6px; border: 1px dashed var(--border);
  background: var(--card); color: var(--ink-muted); cursor: pointer; opacity: 0; transition: opacity .12s; display: grid; place-items: center; font-size: 12px; }
.sched-cell:hover .sched-cell-add { opacity: 1; }
.sched-cell-add:hover { color: var(--brand); border-color: var(--brand); }
/* Touch devices have no hover — keep the add affordance visible and finger-sized. */
@media (hover: none) {
  .sched-cell-add { opacity: 1; width: 34px; height: 34px; font-size: 15px; }
}

/* ----- Weekly hours ----- */
.sched-hours { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; padding: 4px 2px; }
.sched-hour-chip { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; }
.shc-name { font-size: 12.5px; font-weight: 600; color: var(--ink-2); width: 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shc-bar { flex: 1; height: 7px; background: var(--bg-soft); border-radius: 999px; overflow: hidden; }
.shc-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), var(--brand)); border-radius: 999px; }
.shc-val { font-size: 12px; font-weight: 700; color: var(--ink); }
.sched-hour-chip.over { border-color: rgba(239,68,68,.4); background: rgba(239,68,68,.05); }
.sched-hour-chip.over .shc-bar span { background: var(--red); }
.sched-hour-chip.over .shc-val { color: var(--red); }

/* ----- Assign popover ----- */
.sched-pop-backdrop, .sched-modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.3); z-index: 70; }
/* `hidden` must win over the explicit display rules below. */
.sched-pop[hidden], .sched-modal[hidden], .sched-pop-backdrop[hidden], .sched-modal-backdrop[hidden] { display: none !important; }
.sched-pop { position: fixed; z-index: 71; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 420px; max-width: 94vw; max-height: 80vh;
  background: var(--card); border-radius: 16px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; }
.sched-pop-head, .sched-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); font-weight: 700; font-family: "Plus Jakarta Sans", sans-serif; }
.sched-pop-body { overflow-y: auto; padding: 8px; }
.sched-pop-loading { padding: 24px; text-align: center; color: var(--ink-3); font-size: 13px; }
.sched-cand { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--card); cursor: pointer; text-align: left; margin-bottom: 6px; font: inherit; }
.sched-cand:hover { background: var(--bg-soft); border-color: var(--border); }
.sched-cand.current { box-shadow: 0 0 0 2px rgba(20,184,166,.4); }
.sched-cand.clear { color: var(--ink-3); justify-content: center; gap: 6px; }
.cand-rank { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; background: var(--ink-muted); }
.sched-cand.tier1 .cand-rank { background: var(--green); }
.sched-cand.tier2 .cand-rank { background: var(--teal); }
.sched-cand.tier3 .cand-rank { background: var(--blue); }
.sched-cand.tier4 .cand-rank { background: var(--brand); }
.sched-cand.tier5 .cand-rank { background: var(--amber); }
.cand-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cand-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.cand-flex { font-size: 9px; font-weight: 800; color: #fff; background: var(--purple); padding: 1px 5px; border-radius: 999px; vertical-align: middle; }
.cand-reason { font-size: 11.5px; color: var(--ink-3); text-transform: capitalize; }
.cand-hours { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.cand-hours.over { color: var(--red); }
.sched-cand.overcap { opacity: .7; }

.sched-modal { position: fixed; z-index: 71; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 420px; max-width: 94vw;
  max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px);
  background: var(--card); border-radius: 16px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; }
.sched-modal-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.sched-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--border); }

/* ----- Staff availability editor ----- */
.avail-editor { display: flex; flex-direction: column; gap: 16px; }
.avail-section-title { font-weight: 700; font-size: 14px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.avail-hint { font-size: 12px; color: var(--ink-3); margin: 2px 0 8px; }
.avail-day { border: 1px solid var(--border-soft); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.avail-day-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.avail-day-name { font-weight: 600; font-size: 13px; color: var(--ink-2); }
.avail-blocks { display: flex; flex-direction: column; gap: 6px; }
.avail-block { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.avail-block input[type=time], .avail-block select { padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 12.5px; }
.avail-block .avail-rm { border: none; background: rgba(239,68,68,.1); color: var(--red); width: 26px; height: 26px; border-radius: 7px; cursor: pointer; }
.avail-add { border: 1px dashed var(--border); background: none; color: var(--brand); padding: 5px 10px; border-radius: 8px; font-size: 12px; cursor: pointer; }
.avail-flex-row { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; padding: 12px 14px; background: rgba(47,128,255,.06); border-radius: 10px; }

@media (max-width: 760px) {
  .sched-grid { min-width: 760px; }
}

/* ===========================================================
   Messenger — visual polish (overrides earlier base rules)
   =========================================================== */
.messenger { box-shadow: var(--shadow-lg); border-color: var(--border-soft); }

/* Conversation header: avatar + identity */
.msgr-convo-head { gap: 11px; padding: 11px 16px; background: var(--card); }
.msgr-convo-av { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center;
  font-weight: 700; font-size: 13px; color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.msgr-convo-av.group { background: linear-gradient(135deg, var(--teal), var(--blue)); }

/* Messages canvas: soft tinted backdrop so bubbles pop */
.msgr-messages { background:
   radial-gradient(1200px 400px at 50% -10%, rgba(47,128,255,.06), transparent 60%),
   var(--bg); padding: 14px 16px 16px; gap: 2px; }

/* Day separator */
.msgr-day-sep { display: flex; align-items: center; justify-content: center; margin: 14px 0 10px; }
.msgr-day-sep span { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--ink-3); background: var(--card); border: 1px solid var(--border); padding: 4px 12px; border-radius: 999px; box-shadow: var(--shadow-sm); }

/* Bubbles: tighter grouping, softer look */
.msgr-bubble-row { margin: 3px 0; max-width: 74%; align-items: flex-end; }
.msgr-bubble { padding: 9px 13px 7px; box-shadow: 0 1px 1px rgba(15,23,42,.05); }
.msgr-bubble-row .msgr-bubble { border-bottom-left-radius: 5px; }
.msgr-bubble-row.mine .msgr-bubble { box-shadow: 0 2px 8px rgba(47,128,255,.25); }
.msgr-bubble-av { width: 28px; height: 28px; box-shadow: var(--shadow-sm); }
.msgr-bubble-text { font-size: 13px; }
.msgr-bubble-meta { font-size: 10px; opacity: .85; margin-top: 2px; }

/* Thread list: cleaner active state with accent bar */
.msgr-thread { position: relative; border-radius: 10px; }
.msgr-thread.active { background: rgba(47,128,255,.1); }
.msgr-thread.active::before { content: ''; position: absolute; left: 2px; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--brand); }
.msgr-thread.unread .msgr-thread-prev { color: var(--ink-2); font-weight: 600; }

/* Composer: pill field, floating send */
.msgr-composer { padding: 9px 14px 11px; background: var(--card); }
.msgr-composer textarea { border-radius: 18px; padding: 9px 14px; background: var(--bg-soft); }
.msgr-composer textarea:focus { background: var(--card); }

/* Empty state: a touch more polish */
.msgr-empty-art { box-shadow: 0 10px 30px rgba(47,128,255,.28); }

/* ===== AI chat: interactive shift-log composer widget ===== */
.shift-log-widget .cw-sub { font-size: 11.5px; color: var(--ink-3); }
.shift-log-widget .slw-text { width: 100%; box-sizing: border-box; margin: 10px 0; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 10px; font: inherit; font-size: 13px; line-height: 1.5; resize: vertical; background: var(--bg); }
.shift-log-widget .slw-text:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(47,128,255,.12); background: var(--card); }
.shift-log-widget .slw-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.shift-log-widget .slw-mood { font-size: 12px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.shift-log-widget .slw-mood-in { padding: 6px 9px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 12.5px; width: 150px; }
.shift-log-widget .slw-actions { display: flex; gap: 8px; }
.shift-log-widget .cw-result { margin-top: 8px; font-size: 13px; }
.shift-log-widget .cw-done { color: var(--green); font-weight: 600; }
.shift-log-widget .cw-err { color: var(--red); font-weight: 600; }

/* ===== Report result modal (Export & Sharing) ===== */
/* Full-viewport dimmed overlay; centers the dialog above all app chrome. */
.report-modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center;
  padding: 24px;
}
.report-modal-overlay.open { display: flex; }

/* Dialog: a column with a fixed header, a scrollable sheet, and a sticky action bar. */
.report-modal {
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  width: 100%; max-width: 920px; max-height: 92vh;
  display: flex; flex-direction: column; overflow: hidden;
  animation: report-modal-in .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes report-modal-in {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.report-modal-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--border); flex: 0 0 auto;
}
.report-modal-head .title {
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 16px;
  color: var(--ink); flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.report-modal-close {
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid var(--border); background: #fff; color: var(--ink-2);
  display: grid; place-items: center; cursor: pointer; flex: 0 0 auto;
  transition: background .15s, color .15s;
}
.report-modal-close:hover { background: var(--bg-soft); color: var(--ink); }
.report-modal-close i { font-size: 18px; }

/* Scrollable sheet container: tall report content scrolls here while the head
   and action bar stay reachable. Soft tinted backdrop so the white sheet pops. */
.report-sheet-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 24px; background: var(--bg-soft);
  -webkit-overflow-scrolling: touch;
}
.report-sheet-scroll > #reportSheet {
  background: #fff; margin: 0 auto; max-width: 760px;
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
  padding: 40px 44px;
}

/* Action bar: sticky footer inside the modal so controls are always reachable. */
.report-action-bar {
  flex: 0 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 14px 20px; border-top: 1px solid var(--border);
  background: var(--card);
  position: sticky; bottom: 0;
}
.report-action-bar .spacer { flex: 1 1 auto; }
.report-action-bar .btn { flex: 0 0 auto; }

/* A control whose transport (email/SMS) is not configured: shown but inert,
   with an explanation surfaced via the title tooltip and a help note. */
.report-action-bar .btn.is-unavailable,
.report-action-bar .btn:disabled,
.report-action-bar .btn[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; pointer-events: none;
  background: var(--bg-soft); color: var(--ink-muted); border-color: var(--border);
  box-shadow: none; transform: none;
}
/* Wrap a disabled control to keep a hoverable explanation reachable. */
.report-action-wrap { position: relative; display: inline-flex; }
.report-action-wrap .report-action-note {
  display: none; position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%); white-space: nowrap;
  background: var(--ink); color: #fff; font-size: 11.5px; font-weight: 600;
  padding: 6px 10px; border-radius: 8px; box-shadow: var(--shadow);
  z-index: 1; pointer-events: none;
}
.report-action-wrap:hover .report-action-note { display: block; }

/* Inline status/error line within the modal (e.g. PDF build failure, send result). */
.report-modal-status {
  font-size: 12.5px; font-weight: 600; color: var(--ink-3);
  margin-right: auto; display: inline-flex; align-items: center; gap: 6px;
}
.report-modal-status.error { color: var(--red); }
.report-modal-status.success { color: var(--green); }

@media (max-width: 640px) {
  .report-modal-overlay { padding: 0; }
  .report-modal { max-width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; }
  .report-sheet-scroll { padding: 14px; }
  .report-sheet-scroll > #reportSheet { padding: 24px 18px; }
  .report-action-bar { gap: 8px; }
  .report-action-bar .btn { flex: 1 1 auto; justify-content: center; }
}

/* ===== Compliance hub — clickable "area" cards ===== */
.compliance-area { transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease; }
.compliance-area:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--brand) !important; }
/* The "Needs attention" rows are anchors styled as notices; keep text crisp. */
a.notice { color: inherit; }
a.notice .ttl { color: var(--ink); }

/* ===== Glossary tooltips (plain-language help on care/regulatory acronyms) ===== */
abbr.gloss { text-decoration: none; border-bottom: 1px dotted var(--ink-muted); cursor: help; }
abbr.gloss:hover, abbr.gloss:focus { border-bottom-color: var(--brand); outline: none; }

/* Highlight the primary tool on a page (e.g. AI Report Builder) */
.card.primary-tool { border: 1px solid var(--brand); box-shadow: 0 0 0 3px rgba(47,128,255,.08), var(--shadow-sm); }

/* ================================================================
   v32 — Detail-page structure components (profile hero, info grid,
   section titles, list filters, thumbs). Spec: app-wide visual pass.
   ================================================================ */

/* --- Profile hero: the identity header for consumer/staff/home views --- */
.profile-hero {
  /* overflow VISIBLE so the .ph-dd action menus (AI Summary / Print) can pop
     out over the page instead of being clipped by the card. */
  position: relative; overflow: visible;
  background: linear-gradient(135deg, rgba(47,128,255,.10), rgba(47,128,255,.07) 45%, rgba(20,184,166,.08));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; margin-bottom: 18px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  box-shadow: var(--shadow);
}
.profile-hero::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2), var(--teal));
  border-radius: var(--radius) var(--radius) 0 0; /* follows the card corners now that overflow is visible */
}
/* While a hero dropdown is open, lift the hero above the cards below it. */
.profile-hero:has(.ph-dd[open]) { z-index: 40; }
.profile-hero .ph-av {
  width: 64px; height: 64px; border-radius: 18px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 24px; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 8px 20px rgba(47,128,255,.35);
}
.profile-hero .ph-main { flex: 1 1 260px; min-width: 0; }
.profile-hero .ph-name { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 22px; color: var(--ink); line-height: 1.2; }
.profile-hero .ph-sub { color: var(--ink-3); font-size: 13px; margin-top: 2px; }
.profile-hero .ph-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.profile-hero .ph-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-end; flex: 0 1 auto; }
@media (max-width: 768px) {
  .profile-hero { padding: 16px; }
  .profile-hero .ph-actions { width: 100%; justify-content: flex-start; }
}

/* --- Info grid: labeled facts in tidy columns (replaces bare th/td tables) --- */
.info-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 2px; border-radius: var(--radius-sm); overflow: hidden;
}
.info-grid .ig-item { background: var(--bg-soft); padding: 12px 14px; }
.info-grid .ig-label {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: 3px;
}
.info-grid .ig-value { color: var(--ink); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.info-grid .ig-value .card-sub { font-weight: 400; }

/* --- Section title: labels groups of content inside a page --- */
.section-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); margin: 20px 0 10px;
}
.section-title i { color: var(--brand); font-size: 15px; }
.section-title::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* --- Compact stat strip (inline label/value pairs on detail pages) --- */
.stat-strip { display: flex; gap: 0; flex-wrap: wrap; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; margin: 12px 0; }
.stat-strip .st { flex: 1 1 120px; padding: 10px 14px; background: var(--card); border-right: 1px solid var(--border-soft); }
.stat-strip .st:last-child { border-right: 0; }
.stat-strip .st .st-label { font-size: 11px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.stat-strip .st .st-value { font-size: 16px; font-weight: 700; color: var(--ink); font-family: "Plus Jakarta Sans", sans-serif; }
.stat-strip .st .st-value.red { color: var(--red); }
.stat-strip .st .st-value.green { color: var(--green); }
.stat-strip .st .st-value.amber { color: var(--amber); }

/* --- Table polish: subtle zebra + optional sticky header for long lists --- */
table.data tbody tr:nth-child(even) td { background: rgba(244, 246, 251, .55); }
.table-wrap.sticky { max-height: 480px; overflow-y: auto; }
.table-wrap.sticky thead th { position: sticky; top: 0; background: var(--card); z-index: 1; box-shadow: 0 1px 0 var(--border); }

/* --- Quick filter chips for list pages --- */
.chip-filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.chip-filter {
  border: 1px solid var(--border); background: var(--card); color: var(--ink-2);
  border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: all .15s ease;
}
.chip-filter:hover { border-color: var(--brand); color: var(--brand); }
.chip-filter.active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* --- Small photo thumbs (homes list etc.) --- */
.thumb { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; border: 1px solid var(--border); background: var(--bg-soft); }

/* --- Inner sub-card (bordered section inside a card) --- */
.subcard { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; margin-bottom: 14px; background: var(--card); }

/* --- v33: topbar "+ New" quick-add menu --- */
.qadd-wrap { position: relative; }
.qadd-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 220px; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: 6px;
}
.qadd-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-radius: 8px; color: var(--ink-2); font-size: 13.5px; font-weight: 600;
  text-decoration: none; transition: background .12s ease;
}
.qadd-item:hover { background: var(--bg-soft); color: var(--brand); }
.qadd-item i { color: var(--brand); font-size: 16px; }
@media (max-width: 768px) {
  .qadd-wrap .btn span, .qadd-wrap #qaddBtn { padding: 8px 10px; }
  /* Topbar dropdowns become a full-width sheet under the topbar — absolute
     right-anchoring pushed them off the edge of a 375px screen. The bell's
     .notif-menu had the same defect (right:0 + 360/92vw width hung ~48px past
     the left edge next to the avatar) — give it the same viewport anchoring. */
  .qadd-menu { position: fixed; left: 10px; right: 10px; top: calc(var(--topbar-h) + 4px); min-width: 0; }
  .notif-menu { position: fixed; left: 10px; right: 10px; top: calc(var(--topbar-h) + 4px); width: auto; max-width: none; }
}

/* ================================================================
   v34 — App shell max width (rounded when not full-bleed), paper-style
   MAR month grid (.marg-*), theme toggle affordances.
   ================================================================ */

/* --- Max-width shell: on very wide screens the app floats centered with
       rounded corners (no overflow:hidden — the sticky topbar must survive). --- */
@media (min-width: 1720px) {
  body { background: #e3e8f2; }
  .app {
    max-width: 1680px;
    margin: 24px auto;
    min-height: calc(100vh - 48px);
    border-radius: 24px;
    border: 1px solid var(--border);
    box-shadow: 0 24px 80px rgba(15, 23, 42, .12);
    background: var(--bg);
  }
  .app .sidebar { border-radius: 24px 0 0 24px; }
  .app .topbar { border-radius: 0 24px 0 0; }
  .app .main { border-radius: 0 24px 24px 0; overflow-x: clip; }
}

/* --- Paper-style MAR month grid (consumer MAR tab) --- */
.marg-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); }
table.marg { border-collapse: collapse; width: max-content; min-width: 100%; }
.marg th, .marg td { border: 1px solid var(--border); text-align: center; padding: 0; }
.marg thead th { background: var(--bg-soft); font-size: 10.5px; font-weight: 700; color: var(--ink-3); padding: 6px 2px; min-width: 30px; }
.marg thead th.wknd { background: #eef0f8; }
.marg .marg-med {
  /* FIXED width (not a min/max range): the Hour column pins right after this
     one and its sticky `left` offset must equal this width exactly. */
  text-align: left; padding: 6px 10px; width: 200px; min-width: 200px; max-width: 200px;
  background: var(--card); font-weight: 700; font-size: 12.5px; color: var(--ink);
  position: sticky; left: 0; z-index: 2; box-shadow: 1px 0 0 var(--border);
}
.marg .marg-med .sub { display: block; font-weight: 500; color: var(--ink-3); font-size: 11px; }
/* v37.1: the Hour column is sticky too — scrolling across the month used to
   slide the times underneath the pinned med names (worst on phones). */
.marg .marg-hour {
  width: 62px; min-width: 62px; max-width: 62px; font-weight: 700; background: var(--bg-soft);
  font-size: 11px; color: var(--ink-2); padding: 0 4px;
  position: sticky; left: 200px; z-index: 1; box-shadow: 1px 0 0 var(--border);
}
/* Deep-linked focus date (?date=YYYY-MM-DD from alerts/oversight): amber
   dashed column highlight so the nurse lands on the exact day in question. */
.marg thead th.marg-focus, .marg td.marg-focus { outline: 2px dashed #f59e0b; outline-offset: -2px; }
.marg td.marg-cell { width: 30px; height: 32px; min-width: 30px; font-size: 10.5px; font-weight: 700; position: relative; }
.marg .marg-cell > button, .marg .marg-cell > .marg-ini {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; font: inherit; line-height: 1;
}
.marg .marg-cell > button { cursor: pointer; color: var(--ink-muted); }
.marg .marg-cell.due > button { background: rgba(47,128,255,.12); color: var(--brand); }
.marg .marg-cell.due > button:hover { background: rgba(47,128,255,.22); }
.marg .marg-cell.given { background: rgba(16,185,129,.14); color: #047857; }
.marg .marg-cell.missed { background: rgba(239,68,68,.12); color: var(--red); }
.marg .marg-cell.refused { background: rgba(239,68,68,.07); }
/* v1.2.4: LOA — on leave, meds taken (accounted for; blue so it never reads as a miss). */
.marg .marg-cell.loa { background: rgba(59,130,246,.14); color: #1d4ed8; font-weight: 700; }
.mar-prn-choice.loa { background: rgba(59,130,246,.12); color: #1d4ed8; }
.marg .marg-ring { border: 2px solid var(--red); border-radius: 999px; padding: 1px 4px; color: var(--red); }
.marg .marg-cell.na { background: repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(15,23,42,.045) 3px, rgba(15,23,42,.045) 6px); }
.marg .marg-cell.today { outline: 2px solid var(--brand); outline-offset: -2px; }
.marg-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); margin-top: 10px; align-items: center; }
.marg-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.marg-legend .sw { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--border); display: inline-block; }
@media (max-width: 768px) {
  .marg .marg-med { width: 130px; min-width: 130px; max-width: 130px; font-size: 11.5px; }
  .marg .marg-hour { left: 130px; width: 54px; min-width: 54px; max-width: 54px; font-size: 10.5px; padding: 0 3px; }
  .marg td.marg-cell { min-width: 28px; height: 30px; }
}

/* ================================================================
   v34 — Generic modal (.modal-overlay/.modal-box). Used by the medication
   editor and other ad-hoc dialogs that previously had NO styling (rendered
   inline). Fixed, centered, scrollable, and safe at every viewport.
   ================================================================ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(15, 23, 42, .5); backdrop-filter: blur(2px);
  display: none; align-items: flex-start; justify-content: center;
  padding: 24px; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.modal-overlay.is-open, .modal-overlay.open, .modal-overlay[data-open] { display: flex; }
/* Belt-and-suspenders: the [hidden] attribute always wins so a closed modal
   (hidden, not yet JS-controlled) never flashes as a flex overlay. */
.modal-overlay[hidden] { display: none; }
.modal-box {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); width: 100%; max-width: 640px;
  margin: auto; padding: 22px; position: relative;
  animation: report-modal-in .2s cubic-bezier(.2,.8,.2,1);
}
@media (max-width: 768px) {
  .modal-overlay { padding: 0; align-items: stretch; }
  .modal-box { max-width: 100%; min-height: 100%; border-radius: 0; margin: 0; }
}

/* ================================================================
   v35 — Layout-density utilities: pair up cards that don't need full
   width (.row-2 variants, in-cell stacking, slim solo cards).
   ================================================================ */
.row-2.even { grid-template-columns: 1fr 1fr; }
.row-2.wide-left { grid-template-columns: 1.6fr 1fr; }
/* Stack 2+ cards inside ONE grid cell of a .row-2/.row-3. */
.col-stack { display: grid; gap: 18px; align-content: start; min-width: 0; }
.row-2 > .card, .row-3 > .card, .col-stack > .card { min-width: 0; align-self: start; }
/* A solo card (usually a form) that shouldn't span the whole page. */
.card.slim { max-width: 780px; }
@media (max-width: 768px) {
  .card.slim { max-width: none; }
}

/* Variant rows collapse with the base .row-2 (the appended variants otherwise
   out-specify the earlier media rule and stay two-column on small screens). */
@media (max-width: 1200px) {
  .row-2.even, .row-2.wide-left { grid-template-columns: 1fr; }
}

/* ================================================================
   v37 — Polish round: overflow guards, scrollable tables, FAB restyle,
   KPI value states, toast grouping, scrollbar + tab-strip cleanup.
   ================================================================ */

/* Never let a wide table (or off-canvas panel) give the whole page a
   horizontal scrollbar — wide content scrolls inside .tbl-wrap instead. */
html { overflow-x: clip; }

/* app.js wraps every table.data (and table.marg) in one of these at runtime,
   so wide tables scroll inside their card instead of clipping at the edge. */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; max-width: 100%; }
.tbl-wrap > table { margin: 0; }
.tbl-wrap::-webkit-scrollbar { height: 8px; }
.tbl-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.tbl-wrap { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }

/* Entry animation must never leave content invisible on print / reduced motion. */
@media print {
  .fade-up { animation: none !important; opacity: 1 !important; transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .fade-up { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* Shift-draft FAB: on-brand, slightly smaller, and page content gets bottom
   clearance so the button never sits on top of the last row's actions. */
.draft-fab {
  width: 52px; height: 52px; right: 20px; bottom: 20px;
  background: linear-gradient(135deg, #2F80FF, #1F6FEF);
  box-shadow: 0 10px 26px rgba(47,128,255,.42);
}
.content { padding-bottom: 96px; }

/* KPI value states — color the number when it deserves attention. */
.kpi-val.good { color: var(--green, #059669); }
.kpi-val.warn { color: #b45309; }
.kpi-val.bad  { color: #dc2626; }

/* Toast grouping: "×N" pill when several identical alerts collapse into one. */
.toast .toast-count {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 11px; font-weight: 800; background: var(--bg-soft); color: var(--ink-2);
  vertical-align: 1px;
}

/* Sidebar + horizontal tab strips: thin, quiet scrollbars. */
.sidebar { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.tabs { scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }

/* Horizontal-scroll affordance for the paper MAR grid: a soft fade on the right
   edge whenever more day columns are hiding off-screen (toggled by app.js). */
.marg-wrap { position: relative; }
.marg-wrap.has-more::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 8px; width: 44px;
  background: linear-gradient(90deg, transparent, var(--card));
  pointer-events: none;
}

/* Broken/missing photos degrade to an initials tile instead of alt text. */
.avatar-fallback {
  display: grid; place-items: center; width: 100%; height: 100%;
  background: linear-gradient(135deg, #2F80FF, #1F6FEF); color: #fff;
  font-weight: 800; letter-spacing: .5px;
}

/* Settings content column must be allowed to shrink below its table's
   intrinsic width — otherwise the whole card slides past the viewport
   and the page grows a horizontal scroll (grid min-width:auto default). */
.settings-layout > * { min-width: 0; }

/* ================================================================
   v39 — Wallets/announcements round: modal safety at every viewport,
   uploadable brand logo, announcement banners.
   ================================================================ */

/* Every modal family: the overlay scrolls, boxes never exceed the viewport,
   so no modal can be cut off on short screens or with the keyboard open. */
.pg-modal-overlay { overflow-y: auto; align-items: flex-start; }
.pg-modal { margin: auto; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
.report-modal-overlay { overflow-y: auto; }
@media (max-height: 560px) {
  .draft-modal { bottom: 12px; max-height: calc(100vh - 24px); }
  .modal-box { padding: 14px; }
}

/* Uploadable organization logo replaces the ProgencyAI mark (Settings → Organization). */
.brand-logo { max-height: 40px; max-width: 170px; object-fit: contain; border-radius: 8px; }

/* Announcement banners (login splash) — one per unacked active announcement. */
.ann-banner {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--border);
  border-left: 4px solid var(--blue, #0ea5e9);
  border-radius: 12px; padding: 12px 16px; margin-bottom: 14px;
}
.ann-banner i { font-size: 20px; color: var(--blue, #0369a1); flex-shrink: 0; }
.ann-banner .ann-body { flex: 1; min-width: 0; font-size: 13.5px; }
.ann-banner .ann-body strong { display: block; }
.ann-banner .ann-body span { color: var(--ink-2); }
.ann-banner.warning { border-left-color: var(--amber, #f59e0b); }
.ann-banner.warning i { color: #b45309; }
.ann-banner.critical { border-left-color: var(--red, #ef4444); background: rgba(239,68,68,.05); }
.ann-banner.critical i { color: #dc2626; }

/* Wallet balance pill (shared by wallet page, consumer tab, dashboards). */
.wallet-balance { font-weight: 800; font-variant-numeric: tabular-nums; }
.wallet-balance.neg { color: #dc2626; }

/* ===== v26 IA reorg: consumer context shell (includes/consumer_context.php) ===== */
/* Sub-tabs — the second-level row under a consumer's main tab (Health, Support Plan, MAR). */
.subtabs { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: -8px 0 18px; }
.subtab {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  border: 1px solid var(--border); background: var(--card); color: var(--ink-2);
  border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 600;
  text-decoration: none; transition: all .15s ease;
}
.subtab:hover { border-color: var(--brand); color: var(--brand); }
.subtab.active { background: var(--brand); border-color: var(--brand); color: #fff; }
@media (max-width: 720px) {
  .subtabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: 4px; }
}

/* Hero details-dropdowns (Print ▾ / AI Summary ▾) — no-JS menus. */
.ph-dd { position: relative; display: inline-block; }
.ph-dd > summary { list-style: none; cursor: pointer; user-select: none; }
.ph-dd > summary::-webkit-details-marker { display: none; }
.ph-dd > summary .ti-chevron-down { font-size: 13px; margin-left: 2px; }
.ph-dd[open] > summary { border-color: var(--brand); color: var(--brand); }
.ph-dd-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; min-width: 210px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .14); padding: 6px; display: flex; flex-direction: column;
}
.ph-dd-menu a, .ph-dd-menu button {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 9px 11px; border: 0; background: none; border-radius: 9px; cursor: pointer;
  font: 600 13px/1.3 inherit; font-family: inherit; color: var(--ink-2); text-decoration: none;
}
.ph-dd-menu a:hover, .ph-dd-menu button:hover { background: var(--bg); color: var(--brand); }
.ph-dd-menu i { font-size: 16px; }

/* ===== v28: clickable dashboard KPI cards ===== */
a.kpi { color: inherit; text-decoration: none; cursor: pointer; }
a.kpi:hover { border-color: var(--brand); }
a.kpi:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
a.kpi .kpi-value, a.kpi .kpi-label, a.kpi .kpi-sub { color: inherit; }

/* ===== v33: mobile bottom action bar + modal safety ===== */
.bottombar { display: none; }
@media (max-width: 768px) {
  .bottombar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; display: flex;
    background: var(--card); border-top: 1px solid var(--border);
    box-shadow: 0 -4px 16px rgba(15, 23, 42, .08);
    padding: 6px max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }
  .bottombar a, .bottombar button {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    font: 600 10.5px/1.2 inherit; font-family: inherit; color: var(--ink-3);
    text-decoration: none; background: none; border: 0; padding: 4px 0 2px; cursor: pointer;
  }
  .bottombar i { font-size: 21px; }
  .bottombar .bb-active { color: var(--brand); }
  .content { padding-bottom: 170px; }
  .draft-fab { bottom: 78px; }
}
/* Every generic modal box must fit a phone (page-local modals inherit these). */
.modal-box { max-width: min(680px, calc(100vw - 20px)); max-height: calc(100dvh - 20px); overflow: auto; }
@media (max-width: 480px) {
  .modal-box { max-width: calc(100vw - 12px); }
  .pg-modal { max-width: calc(100vw - 12px) !important; }
}

/* ================================================================
   v36 — StaffCentral design: opt-in saturated KPI fill variants.
   White text throughout, big extrabold numeral, subtle caption chip.
   Used on the admin dashboard's top row (blue/green/pink/orange).
   ================================================================ */
.kpi.fill-blue,
.kpi.fill-green,
.kpi.fill-pink,
.kpi.fill-orange {
  border: none; color: #fff;
  box-shadow: 0 10px 28px rgba(16,24,40,.14);
}
.kpi.fill-blue   { background: #2F80FF; box-shadow: 0 10px 26px rgba(47,128,255,.35); }
.kpi.fill-green  { background: #2ED573; box-shadow: 0 10px 26px rgba(46,213,115,.35); }
.kpi.fill-pink   { background: #FF5BA0; box-shadow: 0 10px 26px rgba(255,91,160,.35); }
.kpi.fill-orange { background: #FF4B2B; box-shadow: 0 10px 26px rgba(255,75,43,.32); }

/* White text for every child of a filled KPI (value, label, sub, links). */
.kpi.fill-blue *, .kpi.fill-green *, .kpi.fill-pink *, .kpi.fill-orange * { color: #fff; }
.kpi.fill-blue .kpi-value, .kpi.fill-green .kpi-value,
.kpi.fill-pink .kpi-value, .kpi.fill-orange .kpi-value { color: #fff; }
.kpi.fill-blue .kpi-label, .kpi.fill-green .kpi-label,
.kpi.fill-pink .kpi-label, .kpi.fill-orange .kpi-label { color: rgba(255,255,255,.86); }
.kpi.fill-blue .kpi-sub, .kpi.fill-green .kpi-sub,
.kpi.fill-pink .kpi-sub, .kpi.fill-orange .kpi-sub { color: rgba(255,255,255,.82); }

/* Icon becomes a frosted white chip; trend/caption chip is white/15%. */
.kpi.fill-blue .kpi-icon, .kpi.fill-green .kpi-icon,
.kpi.fill-pink .kpi-icon, .kpi.fill-orange .kpi-icon {
  background: rgba(255,255,255,.18); color: #fff;
}
.kpi.fill-blue .kpi-trend, .kpi.fill-green .kpi-trend,
.kpi.fill-pink .kpi-trend, .kpi.fill-orange .kpi-trend {
  background: rgba(255,255,255,.16); color: #fff;
}

/* Clickable-KPI states: cards now separate by shadow (no visible border), so
   hover lifts with a stronger shadow. Filled cards keep a white focus ring. */
a.kpi:hover { border-color: transparent; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(16,24,40,.12); }
a.kpi.fill-blue:hover   { box-shadow: 0 14px 32px rgba(47,128,255,.42); }
a.kpi.fill-green:hover  { box-shadow: 0 14px 32px rgba(46,213,115,.42); }
a.kpi.fill-pink:hover   { box-shadow: 0 14px 32px rgba(255,91,160,.42); }
a.kpi.fill-orange:hover { box-shadow: 0 14px 32px rgba(255,75,43,.40); }
a.kpi.fill-blue:focus-visible, a.kpi.fill-green:focus-visible,
a.kpi.fill-pink:focus-visible, a.kpi.fill-orange:focus-visible {
  outline: 2px solid #fff; outline-offset: -4px;
}

/* ================================================================
   v36 — Collapse override MUST remain the final word for these rules:
   the appended KPI-fill and row-variant utilities must never out-specify
   the ≤1200px single-column collapse. (Re-stated last on purpose.)
   ================================================================ */
@media (max-width: 1200px) {
  /* v1.2.13 fix (UI sweep): kpi-grid scoped to >768px — this later block was
     silently beating the phone `1fr` rule at line ~549 (same specificity,
     later in source), so phones rendered KPI cards 2-up and state_forms
     overflowed the viewport by 17px. row-2/row-3 keep the original range. */
  .row-2, .row-2.even, .row-2.wide-left { grid-template-columns: 1fr; }
  .row-3 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 769px) and (max-width: 1200px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

/* v36 print safety: paper output is always black-on-white; app chrome never prints.
   v37.2: the ≤768px bottom action bar + other fixed overlays were missing from the
   hide list — on phones they printed at the bottom of the MAR sheet. */
@media print {
  html, body, .app, .main, .content { background: #fff !important; box-shadow: none !important; }
  /* Hide ALL app chrome + floating overlays so a printed/exported page shows only
     the content — never the mobile bottom bar, FABs, chat, support button, menus. */
  .sidebar, .topbar, .toast-stack, .draft-fab, .chat-panel, .sidebar-backdrop,
  .bottombar, .chat-overlay, .draft-overlay, .draft-modal,
  .qadd-menu, .notif-menu, .msgr-newpanel, .msgr-newpanel-backdrop,
  .pg-voice-pill, .pg-voice-settings,
  .support-fab, #supportFab, .support-sticky, [data-print-hide] { display: none !important; }
  /* The bottom bar's clearance padding is dead space on paper. */
  .content { padding-bottom: 0 !important; }
}

/* ================================================================
   v1.2.x — Scanner modal: FULL-PAGE at every viewport (owner request).
   The scanner takes over the whole screen: body is a column, the stage
   flexes and the canvas scales DOWN inside it — scanner.js pointer math
   reads the bounding rect, so CSS scaling of the canvas is safe for
   corner dragging. Footer controls are always visible; nothing scrolls
   below the fold.
   ================================================================ */
#scanOverlay.pg-modal-overlay { padding: 0; }
#scanOverlay .pg-modal {
  width: 100vw; max-width: 100vw !important;
  height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0;
}
#scanOverlay .pg-modal-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
/* :not([hidden]) so the display override never resurrects a hidden step. */
#scanOverlay #scanStep1:not([hidden]) { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
#scanOverlay #scanWork:not([hidden]) { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#scanOverlay .scan-stage { flex: 1; min-height: 220px; display: flex; align-items: center; justify-content: center; }
#scanOverlay .scan-stage canvas { max-width: 100%; max-height: 100%; width: auto; height: auto; }
#scanOverlay .scan-controls { flex: none; }
/* Desktop: keep the step-1 dropzone and the page comfortably centered in the
   big canvas area rather than stretched edge-to-edge. */
#scanOverlay #scanStep1 .dropzone { max-width: 720px; width: 100%; margin: 0 auto; padding: 48px 30px; }
#scanOverlay #scanStep1 .scan-camera { max-width: 900px; width: 100%; margin: 0 auto; }
@media (max-width: 768px) {
  #scanOverlay .pg-modal-head { padding: 12px 14px; }
  #scanOverlay .pg-modal-body { padding: 12px; }
  #scanOverlay .scan-stage { min-height: 160px; }
  #scanOverlay .pg-modal-foot { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  #scanOverlay .scan-foot-left { gap: 8px 14px; }
  #scanOverlay .scan-fmt-btn { padding: 6px 10px; }
  #scanOverlay #scanStep1 .dropzone { padding: 30px 16px; }
}

/* ================================================================
   v1.2.10 — document thumbnails + auto-scheduler flags.
   ================================================================ */
/* List-view mini thumbnail (grid view reuses .fm-ico/.fm-thumb). */
.fm-thumb-sm { width: 34px; height: 34px; border-radius: 7px; object-fit: cover;
  border: 1px solid var(--border); background: #fff; flex-shrink: 0; }
/* PDF/page thumbs keep the whole page visible inside the tile. */
.fm-ico.img .fm-thumb.contain { object-fit: contain; background: #fff; }

/* Scheduler "needs review" flag: assignment made outside the normal rules
   (beyond official availability, short rest, long stretch, over target). */
.sched-flagged { outline: 2px solid #f59e0b; outline-offset: 1px; position: relative; }
.sched-flagged .sched-flag-ico { color: #b45309; font-size: 13px; margin-left: 3px; }
.sched-flag-banner { display: flex; align-items: flex-start; gap: 8px; background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.45); color: #92400e; border-radius: 9px;
  padding: 8px 10px; font-size: 12.5px; font-weight: 600; margin-bottom: 8px; }
.sched-flag-banner i { font-size: 15px; flex-shrink: 0; margin-top: 1px; }

/* Default shift times modal rows (schedule.php page-local markup). */
.sched-slots-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.sched-slots-row input[type="time"] { width: 110px; }
.sched-slots-row .slot-label { flex: 1; min-width: 120px; }
.sched-slots-row .slot-need { width: 64px; }

/* ================================================================
   v1.2.12 — Scheduler retheme (owner mockup integration): week bar
   with coverage pills, residence grid, per-staff colored chips,
   algorithmic insight panels, right-click context menu.
   ================================================================ */
/* Week navigation bar */
.sched-weekbar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 12px 16px; margin-bottom: 16px; }
.swb-left, .swb-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.swb-range { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 15px;
  padding: 4px 6px; min-width: 150px; text-align: center; }
.swb-pill { display: inline-flex; align-items: center; gap: 7px; border: 0; cursor: default;
  border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 700; line-height: 1; }
button.swb-pill { cursor: pointer; }
.swb-pill .swb-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.swb-pill.green { background: rgba(16,185,129,.13); color: #047857; }
.swb-pill.amber { background: rgba(245,158,11,.15); color: #92400e; }
.swb-pill.blue  { background: rgba(59,130,246,.12); color: #1d4ed8; }
button.swb-pill.amber:hover { background: rgba(245,158,11,.25); }

/* Grid: residence column + uppercase day heads */
.sched-grid-head { background: var(--bg-soft); }
.sched-grid-head .sched-day-col { text-transform: uppercase; letter-spacing: .05em; font-size: 11px;
  color: var(--ink-3); font-weight: 700; }
.sched-grid-head .sched-day-col strong { font-size: 11px; color: var(--ink-2); }

/* Shift chips: per-staff hue, name first, colored left bar (mockup look).
   Same DOM hooks as before — data-shift / .ss-staff / .ss-time untouched. */
.sched-shift { border-left-width: 3px; border-left-style: solid; border-radius: 8px; }
.sched-shift .ss-staff { font-weight: 700; font-size: 11.5px; color: var(--ink); display: block; }
.sched-shift .ss-time { font-size: 10.5px; color: var(--ink-3); display: block; margin-top: 1px; }
.sched-shift.filled.sc-hue0 { background: rgba(59,130,246,.09);  border-color: rgba(59,130,246,.22);  border-left-color: #3b82f6; }
.sched-shift.filled.sc-hue1 { background: rgba(16,185,129,.10);  border-color: rgba(16,185,129,.22);  border-left-color: #10b981; }
.sched-shift.filled.sc-hue2 { background: rgba(245,158,11,.12);  border-color: rgba(245,158,11,.25);  border-left-color: #f59e0b; }
.sched-shift.filled.sc-hue3 { background: rgba(139,92,246,.10);  border-color: rgba(139,92,246,.22);  border-left-color: #8b5cf6; }
.sched-shift.filled.sc-hue4 { background: rgba(20,184,166,.10);  border-color: rgba(20,184,166,.22);  border-left-color: #14b8a6; }
.sched-shift.filled.sc-hue5 { background: rgba(236,72,153,.09);  border-color: rgba(236,72,153,.20);  border-left-color: #ec4899; }
/* "Mine" keeps its highlight as a ring so the person's hue still shows. */
.sched-shift.filled.mine { box-shadow: inset 0 0 0 2px rgba(20,184,166,.5); background: rgba(20,184,166,.12); }
/* Open shift chips: amber, dashed = "someone still needed" */
.sched-shift.unfilled { background: rgba(245,158,11,.10); border: 1px dashed rgba(245,158,11,.55);
  border-left: 3px solid #f59e0b; color: #92400e; }
.sched-shift.unfilled .ss-staff { color: #92400e; }
.sched-shift.unfilled .ss-time { color: #b45309; }

/* Insight panels under the grid */
.sched-panels { margin-top: 16px; }
.sched-panel-kicker { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: 4px; }
.sched-rec { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border-soft);
  border-radius: 12px; margin-bottom: 8px; background: var(--bg-soft); }
.rec-num { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  font-size: 12.5px; font-weight: 800; color: #fff; background: linear-gradient(135deg,#f59e0b,#f97316); }
.rec-num.amber { background: linear-gradient(135deg,#3b82f6,#6366f1); }
.rec-num.muted { background: var(--ink-muted); }
.rec-main { flex: 1; min-width: 0; }
.rec-title { font-weight: 700; font-size: 13px; }
.rec-sub { font-size: 12px; color: var(--ink-3); margin-top: 1px; }
.sched-check { display: flex; align-items: center; gap: 10px; padding: 9px 2px; font-size: 13px;
  border-bottom: 1px solid var(--border-soft); }
.sched-check:last-of-type { border-bottom: 0; }
.sched-check > span:first-child { flex: 1; color: var(--ink-2); }
.chk-dot { width: 8px; height: 8px; border-radius: 50%; }
.chk-dot.ok { background: #10b981; }
.chk-dot.warn { background: #f59e0b; }
.chk-dot.bad { background: #ef4444; }
.chk-val { font-weight: 700; min-width: 20px; text-align: right; font-variant-numeric: tabular-nums; }
.chk-val.strong { font-size: 14px; }

/* Right-click context menu */
.sched-ctx { position: fixed; z-index: 90; min-width: 210px; background: var(--card);
  border: 1px solid var(--border); border-radius: 12px; padding: 6px;
  box-shadow: 0 12px 32px rgba(15,23,42,.18); }
.sched-ctx button { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 9px 11px; border: 0; background: none; border-radius: 9px; cursor: pointer;
  font: 600 13px/1.3 inherit; font-family: inherit; color: var(--ink-2); }
.sched-ctx button:hover { background: var(--bg); color: var(--brand); }
.sched-ctx button.danger { color: #dc2626; }
.sched-ctx button.danger:hover { background: rgba(239,68,68,.08); color: #dc2626; }
.sched-ctx .ctx-sep { height: 1px; background: var(--border-soft); margin: 5px 6px; }

/* Delete confirmation modal — phones get a full-width bottom-friendly box. */
@media (max-width: 560px) {
  .sched-confirm { width: calc(100vw - 20px); max-width: calc(100vw - 20px); }
  .sched-confirm .sched-modal-foot { flex-wrap: wrap; }
  .sched-confirm .sched-modal-foot .btn { flex: 1; }
}

/* ================================================================
   v1.2.13 — Shift-log QUALITY score bar (owner mockup: bold percent
   over a rounded gradient bar, blue → green).
   ================================================================ */
.sq-cell { min-width: 92px; }
.sq-pct { display: block; font-weight: 800; font-size: 13.5px; color: var(--ink); line-height: 1.2; }
.sq-bar { display: block; width: 88px; height: 6px; border-radius: 999px; background: var(--border-soft); margin-top: 4px; overflow: hidden; }
.sq-bar > span { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #2F80FF, #10b981); }

/* ============================================================
   Guided tours (v1.2.15) — spotlight scrim + step card
   Engine: assets/js/tour.js · content: includes/tours.php
   Scrim/ring sit ABOVE the topbar(20)/sidebar(120)/modals(200)
   and BELOW toasts(300). Same-specificity cascade rule: mobile
   overrides live at the END of this block.
   ============================================================ */
.tour-root { display: none; }
.tour-root.on { display: block; }
.tour-scrim { position: fixed; z-index: 240; background: rgba(15, 23, 42, .55); }
.tour-ring { position: fixed; z-index: 241; pointer-events: none;
  border: 3px solid #2F80FF; border-radius: 12px;
  box-shadow: 0 0 0 4px rgba(47, 128, 255, .25), 0 8px 30px rgba(16, 24, 40, .35); }
@media (prefers-reduced-motion: no-preference) {
  .tour-ring { transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease; }
}
.tour-card { position: fixed; z-index: 260; background: var(--card, #fff);
  border-radius: 16px; box-shadow: 0 18px 50px rgba(16, 24, 40, .28);
  padding: 18px 18px 14px; max-width: 360px; }
.tour-step-count { font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #2F80FF; margin-bottom: 4px; }
.tour-title { font-size: 16px; font-weight: 800; color: var(--ink, #101828); margin-bottom: 6px; }
.tour-body { font-size: 13.5px; line-height: 1.55; color: var(--muted, #667085); }
.tour-dots { display: flex; gap: 5px; margin: 12px 0 2px; flex-wrap: wrap; }
.tour-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--border-soft, #EDF0F6); }
.tour-dot.on { background: #2F80FF; }
.tour-btnrow { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.tour-skip { display: block; margin: 10px auto 0; background: none; border: 0;
  color: var(--muted, #667085); font-size: 12px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; font-family: inherit; }
.tour-skip:hover { color: var(--ink, #101828); }
.tour-welcome-overlay { position: fixed; inset: 0; z-index: 250;
  background: rgba(15, 23, 42, .55); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 24px; }
.tour-card.tour-welcome { position: relative; text-align: center; max-width: 420px; padding: 26px 24px 18px; }
.tour-welcome .tour-btnrow { justify-content: center; margin-top: 16px; }
.tour-welcome-icon { width: 54px; height: 54px; border-radius: 999px; margin: 0 auto 12px;
  background: #EAF2FF; color: #2F80FF; display: flex; align-items: center; justify-content: center;
  font-size: 26px; }
.tour-welcome .tour-title { font-size: 20px; }
@media (max-width: 768px) {
  /* Phone: the step card is a bottom sheet so it never covers the highlight. */
  .tour-card { left: 10px !important; right: 10px !important; top: auto !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important; max-width: none; }
  .tour-card.tour-welcome { position: relative; left: auto !important; right: auto !important;
    bottom: auto !important; }
}

/* ============================================================
   Rich-text mini editor (v1.2.16) — assets/js/richtext.js
   Toolbar per the owner's mock: B I U · H1 H2 · link · lists ·
   clear, in v36 tokens. The source <textarea> stays in the DOM
   (hidden) so forms/autosave/AI buttons keep reading .value.
   ============================================================ */
.rt-wrap { border: 1px solid var(--border-soft, #EDF0F6); border-radius: 12px;
  background: var(--card, #fff); overflow: hidden; }
.rt-bar { display: flex; align-items: center; gap: 2px; padding: 6px 8px;
  border-bottom: 1px solid var(--border-soft, #EDF0F6); flex-wrap: wrap; }
.rt-btn { min-width: 30px; height: 30px; padding: 0 7px; border: 0; border-radius: 8px;
  background: transparent; color: var(--muted, #667085); font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: inherit; display: inline-flex; align-items: center;
  justify-content: center; line-height: 1; }
.rt-btn:hover { background: rgba(47, 128, 255, .08); color: var(--ink, #101828); }
.rt-btn.on { background: rgba(47, 128, 255, .14); color: #2F80FF; }
.rt-btn sub { font-size: 9px; }
.rt-sep { width: 1px; height: 18px; background: var(--border-soft, #EDF0F6); margin: 0 5px; }
.rt-surface { border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  padding: 12px 14px; font-size: 14px; line-height: 1.6; color: var(--ink, #101828);
  outline: none; overflow-y: auto; max-height: 55vh; }
.rt-surface:empty::before { content: attr(data-placeholder); color: var(--muted, #667085);
  opacity: .7; pointer-events: none; }
.rt-surface h1 { font-size: 19px; margin: 10px 0 6px; }
.rt-surface h2 { font-size: 16px; margin: 8px 0 5px; }
.rt-surface ul, .rt-surface ol { padding-left: 22px; margin: 6px 0; }
.rt-surface a { color: #2F80FF; }
.rt-surface.rt-invalid { box-shadow: inset 0 0 0 2px #FF4B2B !important; }
.rt-hidden-src { position: absolute !important; width: 1px; height: 1px; opacity: 0;
  pointer-events: none; margin: 0; padding: 0; border: 0; }
/* Rendered rich narratives (read views) share the same type scale. */
.rt-view h1 { font-size: 18px; margin: 10px 0 6px; }
.rt-view h2 { font-size: 15.5px; margin: 8px 0 5px; }
.rt-view ul, .rt-view ol { padding-left: 22px; margin: 6px 0; }
.rt-view p { margin: 6px 0; }

/* ---- PWA install banner (v1.2.19) — login page "Add to Home Screen" prompt.
   Fixed bottom sheet on phones; a compact card bottom-right on wider screens.
   Shown/populated by assets/js/pwa-install.js (iOS gets Share→Add instructions). */
.pwa-install { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1200; }
.pwa-install[hidden] { display: none; }
.pwa-install .pwa-install-inner {
  display: flex; align-items: center; gap: 12px;
  background: var(--card-bg, #fff); color: var(--ink, #0f172a);
  border: 1px solid var(--border, #e6e8ec); border-radius: 14px; padding: 12px 14px;
  box-shadow: 0 14px 44px rgba(15, 23, 42, .22);
  transform: translateY(140%); opacity: 0; transition: transform .32s ease, opacity .32s ease;
}
.pwa-install.show .pwa-install-inner { transform: none; opacity: 1; }
.pwa-install .pwa-ico { flex: none; width: 42px; height: 42px; border-radius: 11px;
  background: rgba(47, 128, 255, .12); color: var(--brand, #2F80FF);
  display: flex; align-items: center; justify-content: center; font-size: 23px; }
.pwa-install .pwa-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
  font-size: 13px; line-height: 1.4; color: var(--ink-2, #334155); }
.pwa-install .pwa-text strong { font-size: 14px; color: var(--ink, #0f172a); }
.pwa-install .pwa-actions { display: flex; gap: 8px; flex: none; align-items: center; }
@media (min-width: 560px) { .pwa-install { left: auto; right: 20px; max-width: 430px; } }
@media (prefers-reduced-motion: reduce) { .pwa-install .pwa-install-inner { transition: none; } }