/* Jovie team site — design tokens + base components.
   Canonical reference: 2026_mmks/STYLE_GUIDE.md (palette from
   Jovie-Color-Palette.pdf). Mobile-first; body.admin widens at >=900px. */

:root {
  /* brand — primary (most visible) */
  --jovie-orange: #F26B21;
  --jovie-orange-dark: #D8570F;
  --jovie-sky: #8CD5DF;
  --jovie-amber: #FFBF00;
  --jovie-lime: #B0CF36;
  --jovie-teal: #267D69;
  --jovie-indigo: #424773;
  /* brand — secondary (use sparingly) */
  --jovie-lavender: #D6B8F2;
  --jovie-plum: #964A7E;
  --jovie-blush: #FCBDB8;
  --jovie-lemon: #F2E005;
  /* brand — tertiary (use sparingly) */
  --jovie-deep-teal: #1A475E;
  --jovie-navy: #002E69;
  --jovie-maroon: #6B0A3D;

  /* Bright Horizons brand — used ONLY for BH-side data (see STYLE_GUIDE
     "Bright Horizons data"). Sampled from brighthorizons.com. */
  --bh-navy: #1A475F;
  --bh-gold: #F0BD1B;
  --bh-steel: #3C889E;
  --bh-tint: #EEF5F8;
  --bh-navy-ink: #EAF3F8;          /* text on navy */
  --bh-navy-muted: rgba(234, 243, 248, .68);
  --bh-steel-light: #8FCBE0;       /* links on navy */
  /* MyJovie-side data fill (Jovie indigo family) */
  --mj-tint: #F5F3FB;

  /* neutrals derived from indigo */
  --ink: #252A47;
  --ink-soft: #5A5F7D;
  --line: #E3E6EF;
  --surface: #FFFFFF;
  --bg: #F6F7FA;
  --sky-tint: #EDF8FA;
  --teal-tint: #E7F2EF;
  --maroon-tint: #FBEEF3;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 3px rgba(37, 42, 71, .08), 0 8px 24px rgba(37, 42, 71, .06);

  --font-display: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

  /* sticky chrome offsets (see STYLE_GUIDE "Sticky chrome") */
  --topbar-h: 64px;
  --nav-h: 41px;
  --chrome-h: 105px;   /* topbar + admin nav */
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* always reserve the scrollbar gutter: client-side filters (sector/
     sub-location, tag chips, search) hide rows, and the scrollbar
     appearing/vanishing would otherwise shift every table's width */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
}

/* ---------- top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: var(--topbar-h);
  box-sizing: border-box;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 46;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  color: var(--jovie-orange);
  text-decoration: none;
  letter-spacing: -0.5px;
}

.wordmark span { color: var(--jovie-indigo); font-weight: 600; }

.topbar-right { display: flex; align-items: center; gap: 12px; }

.top-link {
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  padding: 8px 4px; /* comfortable touch target */
}

.top-link:hover { color: var(--jovie-orange); }

.badge {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 3px 10px;
  border-radius: 999px;
}

.badge-admin { background: var(--jovie-indigo); color: #fff; }

/* ---------- shell (mobile-first: one narrow column) ---------- */
.shell {
  max-width: 520px;
  margin: 0 auto;
  padding: 20px 16px 48px;
}

/* admin pages are desktop-first: near-full-width working canvas */
body.admin .shell { max-width: none; }

/* ---------- typography ---------- */
h1, h2, h3 { font-family: var(--font-display); color: var(--ink); }

.page-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.3px;
  margin: 10px 0 6px;
}

h2 { font-size: 18px; font-weight: 600; margin: 0 0 8px; }

.lead { color: var(--ink-soft); margin: 0 0 16px; }

.fine-print { color: var(--ink-soft); font-size: 13px; margin: 14px 0 0; }

.fine-print a { color: var(--jovie-teal); font-weight: 500; }

p { margin: 0 0 10px; }

/* ---------- cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin: 14px 0;
}

.auth-card { margin-top: 8vh; }

/* ---------- chips (office badges etc.) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }

.chip {
  background: var(--sky-tint);
  color: var(--jovie-deep-teal);
  border: 1px solid var(--jovie-sky);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  padding: 3px 12px;
  border-radius: 999px;
}

/* ---------- forms ---------- */
.field { display: block; margin: 0 0 16px; }

.field > span {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.field input {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 13px 14px; /* >=44px touch target */
  outline: none;
}

.field input:focus {
  border-color: var(--jovie-orange);
  box-shadow: 0 0 0 3px rgba(242, 107, 33, .18);
}

.pin-input {
  font-size: 26px !important;
  letter-spacing: 14px;
  text-align: center;
  font-family: var(--font-display);
}

/* ---------- buttons ---------- */
.btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  border: none;
  border-radius: 999px;
  padding: 14px 26px;
  cursor: pointer;
  transition: background .15s ease;
  text-decoration: none;
  text-align: center;
  box-sizing: border-box;
}

.btn-primary { background: var(--jovie-orange); color: #fff; }

.btn-primary:hover { background: var(--jovie-orange-dark); }

.btn-block { display: block; width: 100%; }

.btn-link {
  background: none;
  border: none;
  padding: 10px 0;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--jovie-teal);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.aux-form { margin-top: 6px; }

/* ---------- flash messages ---------- */
.flash {
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin: 0 0 14px;
  font-size: 15px;
  border: 1px solid transparent;
}

.flash-error {
  background: var(--maroon-tint);
  color: var(--jovie-maroon);
  border-color: var(--jovie-blush);
}

.flash-ok {
  background: var(--teal-tint);
  color: var(--jovie-teal);
  border-color: var(--jovie-teal);
}

/* ---------- admin stats ---------- */
.stat-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }

.stat { margin: 0; }

.stat-num {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  color: var(--jovie-indigo);
  line-height: 1.1;
}

.stat-total .stat-num { color: var(--jovie-orange); }

.stat-label { color: var(--ink-soft); font-size: 14px; margin-top: 4px; }

.stat-label .chip { margin-right: 6px; }

/* ---------- desktop (admin canvas + comfortable staff view) ---------- */
@media (min-width: 900px) {
  .topbar { padding: 16px 32px; }

  body.admin .shell { padding: 24px 22px 64px; }

  body.admin .page-title { font-size: 30px; }

  body.admin .stat-grid { grid-template-columns: repeat(4, 1fr); }

  body.admin .stat-total { grid-column: span 4; }
}

@media (min-width: 1200px) {
  body.admin .stat-grid { grid-template-columns: repeat(7, 1fr); }

  body.admin .stat-total { grid-column: span 1; }
}

/* ---------- admin nav ---------- */
/* There are many admin sections — more than fit on one row, especially on a
   phone. The sticky wrapper owns the fixed height + border so the row inside
   can scroll horizontally (one line, never wraps) and --chrome-h stays valid on
   every screen. Edge fades appear only when tabs are scrolled off that side. */
.admin-nav-wrap {
  position: sticky;
  top: var(--topbar-h);
  z-index: 45;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.admin-nav-wrap::before,
.admin-nav-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 1px;
  width: 30px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity .15s ease;
}
.admin-nav-wrap::before { left: 0; background: linear-gradient(to right, var(--surface), transparent); }
.admin-nav-wrap::after  { right: 0; background: linear-gradient(to left, var(--surface), transparent); }
.admin-nav-wrap.scroll-start::before { opacity: 1; }
.admin-nav-wrap.scroll-end::after { opacity: 1; }

.admin-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 18px;
  height: var(--nav-h);
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;   /* momentum scroll on iOS */
  scrollbar-width: none;               /* Firefox: hide the scrollbar */
}
.admin-nav::-webkit-scrollbar { display: none; }   /* WebKit: hide the scrollbar */

.admin-nav a {
  flex: 0 0 auto;            /* keep full labels; scroll rather than squish */
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 7px 12px;
  border-radius: 999px;
}

.admin-nav a:hover { color: var(--jovie-orange); }

.admin-nav a.active { background: var(--sky-tint); color: var(--jovie-deep-teal); }

/* ---------- shared bits ---------- */
.hidden { display: none !important; }

.dim { color: var(--ink-soft); font-size: 13px; }

.dim a { color: var(--jovie-teal); }

.btn-sm { font-size: 13px; padding: 7px 14px; }

.btn-ghost {
  background: var(--surface);
  color: var(--jovie-deep-teal);
  border: 1.5px solid var(--line);
}

.btn-ghost:hover { border-color: var(--jovie-sky); background: var(--sky-tint); }

.btn.busy { opacity: .55; cursor: wait; }

/* tags (issue badges) */
.tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  margin: 1px 3px 1px 0;
  border: 1px solid transparent;
  white-space: nowrap;
}

.tag-blocker { background: var(--maroon-tint); color: var(--jovie-maroon); border-color: var(--jovie-blush); }

/* issue flags: uniform red + flag icon (vs. informational note badges) */
.tag-flag {
  background: var(--maroon-tint);
  color: var(--jovie-maroon);
  border-color: var(--jovie-blush);
}

.tag-flag::before { content: "⚑ "; }

.tag-note::before { content: "ℹ "; }

.tag-ok::before { content: "✓ "; }

.tag-warn { background: #FFF4D6; color: #7A5A00; border-color: var(--jovie-amber); }

.tag-soft { background: #F3EBFB; color: #6B4E8E; border-color: var(--jovie-lavender); }

.tag-info { background: var(--sky-tint); color: var(--jovie-deep-teal); border-color: var(--jovie-sky); }

.status {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: #CDEBD8;
  color: #256B43;
}

.status-tentative { background: #F6C7DE; color: #9C3A6E; }

.status-open { background: #CBDDF8; color: #1E4C8A; }

/* ---------- crosschecker ---------- */
.cc-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  padding: 10px 16px;
  position: sticky;
  top: var(--chrome-h);
  z-index: 30;
}

.fresh { margin-left: auto; }

.fresh-item {
  font-size: 12px;
  color: var(--ink-soft);
  white-space: nowrap;
  margin-left: 14px;
  cursor: default;
}

.fresh-item .src-pill { margin-right: 4px; }

.q-fresh { display: inline-flex; }

.cc-filter-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.cc-filter-group.grow { flex: 1; min-width: 220px; }

.cc-filter-group input[type="date"], .cc-filter-group input[type="search"],
.cc-filter-group select, .cc-office-select {
  font: inherit;
  font-size: 14px;
  padding: 8px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
}

.cc-office-select { max-width: 340px; }

.cc-filter-group input[type="search"] { width: 100%; }

/* sector / sub-location multi-select filters (crosschecker) */
.cc-filter-group.grow { flex-wrap: nowrap; }

.cc-filter-group.grow #cc-search { width: auto; flex: 1; }

.msel { position: relative; }

.msel-btn {
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.msel-on .msel-btn { border-color: var(--jovie-indigo); color: var(--jovie-indigo); }

.msel-count {
  background: var(--jovie-indigo);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.5;
  padding: 0 7px;
}

.msel-count:empty { display: none; }

.msel-caret { font-size: 10px; color: var(--ink-soft); }

.msel-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 290px;
  max-height: 380px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 32px rgba(37, 42, 71, .18);
  z-index: 40;
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.msel-panel.hidden { display: none; }

.msel-search { margin-bottom: 6px; }

.msel-opts { overflow-y: auto; flex: 1; }

.msel-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  padding: 5px 6px;
  cursor: pointer;
  border-radius: 6px;
}

.msel-opt:hover { background: var(--bg); }

.msel-clear {
  text-align: left;
  font-size: 12.5px;
  padding: 6px 0 0;
}

.checkchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
}

.checkchip input { accent-color: var(--jovie-indigo); }

.checkchip:has(input:checked) { color: var(--jovie-indigo); }

/* the flag chips' two always-visible presets, read as one pair */
.cc-flag-picks {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.cc-flag-picks .btn-link { font-size: 13px; }

.tagfilter { cursor: pointer; opacity: .45; }

.tagfilter.on { opacity: 1; outline: 2px solid var(--jovie-orange); }

.tag-ok {
  background: var(--teal-tint);
  color: var(--jovie-teal);
  border-color: var(--jovie-teal);
}

.cc-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
  margin: 26px 0 8px;
  padding-left: 12px;
  border-left: 4px solid var(--jovie-orange);
}

.cc-bucket:first-of-type .cc-section-head { margin-top: 14px; }

.cc-section-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--jovie-orange);
  background: #FDEEE4;
  border-radius: 999px;
  padding: 2px 11px;
}

.cc-table {
  width: 100%;
  table-layout: fixed;      /* every section table shares these column widths */
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  font-size: 14px;
}

/* one width scheme so all three section tables align; Actions is capped
   and wraps instead of stretching the whole table */
.col-date { width: 8%; }
.col-flags { width: 8%; }
.col-client { width: 21%; }
.col-time { width: 8%; }
.col-cg { width: 15%; }
.col-loc { width: 22%; }
.col-act { width: 18%; }

.cc-table td, .cc-table th { overflow-wrap: anywhere; }

/* dates and times must not break mid-value (the narrow fixed columns +
   overflow-wrap:anywhere above were splitting "08/04/2026" and "3:30 PM").
   The date stays on one line; a time range may wrap only at its en-dash
   (each time is glued to its AM/PM by a non-breaking space in qtr_label). */
.cc-table td.cc-date b { white-space: nowrap; }
.cc-table td.cc-time { overflow-wrap: normal; }

.cc-table th {
  text-align: left;
  font-family: var(--font-display);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-soft);
  padding: 10px 12px;
  border-bottom: 2px solid var(--line);
  background: var(--bg);
}

.cc-table td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }

.ccrow .bh-row td, .ccrow .mj-top td { border-top: 2px solid var(--line); }

/* Client/caregiver names deep-link to their MyJovie profile. They keep the
   row's own text colour (white on navy BH rows, ink on light MJ rows) so the
   palette still answers which SYSTEM the row is — only the underline marks
   the name clickable. */
.cc-table .mjlink {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.cc-table .mjlink:hover { text-decoration-thickness: 2px; }

/* BH-side rows are DARK (Bright Horizons navy, light text); MyJovie rows
   are LIGHT (lavender, dark ink) — instant which-system-is-this contrast */
.bh-row td { background: var(--bh-navy); color: var(--bh-navy-ink); }

.bh-row b { color: #fff; }

.bh-row td:first-child { border-left: 4px solid var(--bh-gold); }

.bh-row .dim { color: var(--bh-navy-muted); }

.bh-row .dim a { color: var(--bh-steel-light); }

.bh-row .chip {
  background: rgba(255, 255, 255, .14);
  color: var(--bh-navy-ink);
  border-color: rgba(255, 255, 255, .28);
}

.bh-row .btn-ghost {
  background: transparent;
  color: var(--bh-navy-ink);
  border-color: rgba(255, 255, 255, .4);
}

.bh-row .btn-ghost:hover {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .65);
}

.mj-row td { font-size: 13px; }

.mj-row.mj-top td { font-size: 14px; }

/* whole MJ row colored by status, distinct at a glance (the MJ pill keeps
   the source identity): confirmed=green, tentative=pink, open=blue */
.mj-status-scheduled td { background: #CDEBD8; }    /* green */

.mj-status-tentative td { background: #F8CFE2; }    /* pink */

.mj-status-open td { background: #CEDFF9; }          /* blue */

.mj-status-scheduled td:first-child { border-left: 4px solid #3E9E63; }

.mj-status-tentative td:first-child { border-left: 4px solid #C24E8E; }

.mj-status-open td:first-child { border-left: 4px solid #3F72C4; }

/* cancelled/deleted from the team site — kept visible (grayed) until the
   page is reloaded; buttons stay functional. Server-rendered cancelled
   shifts (Show-cancelled toggle) reuse the same treatment; the status
   class supplies the left border markCancelled inherits from the old
   status color. */
.mj-status-cancelled td:first-child { border-left: 4px solid #D0D0D8; }

.ccrow tr.row-cancelled td {
  background: #F1F1F4 !important;
  color: #BFBFC9 !important;
}

.ccrow tr.row-cancelled td:first-child { border-left-color: #D0D0D8 !important; }

.ccrow tr.row-cancelled b,
.ccrow tr.row-cancelled a,
.ccrow tr.row-cancelled em,
.ccrow tr.row-cancelled .status,
.ccrow tr.row-cancelled .tag { color: #C4C4CE !important; }

.ccrow tr.row-cancelled .status,
.ccrow tr.row-cancelled .tag,
.ccrow tr.row-cancelled .src-pill { background: #E4E4EA !important; border-color: #D8D8E0 !important; }

/* Flags column: one flag per line so it stays narrow */
.flags-cell { white-space: nowrap; }

.flags-cell .tag, .flags-cell .status {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0 0 3px;
}

.mj-indent { font-weight: 600; }

/* secondary detail line inside table cells */
/* ---------- quality (CIR / CSAT) ---------- */
.q-section { margin-top: 16px; }

/* quality page CIR / CSAT tabs */
.q-tabs {
  display: flex;
  gap: 6px;
  margin-top: 18px;
  border-bottom: 2px solid var(--line);
}
.q-tab {
  font: inherit;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  padding: 8px 16px;
  border: none;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}
.q-tab:hover { color: var(--ink); }
.q-tab.on { color: var(--jovie-indigo); border-bottom-color: var(--jovie-orange); }
.q-tab-count {
  background: var(--sky-tint);
  color: var(--jovie-indigo);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 12px;
  margin-left: 6px;
}
.q-section-bar { display: flex; align-items: center; gap: 12px; }
.q-section-bar .cc-section-head { flex: 1; margin-bottom: 0; }
.q-export { margin-left: auto; white-space: nowrap; }
.q-cap { font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 8px; }

/* script monitor status dots */
.script-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  vertical-align: middle;
}
.script-ok { background: var(--jovie-teal); }
.script-warn { background: var(--jovie-amber); }
.script-bad { background: var(--jovie-maroon); }

.q-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  font-size: 14px;
}

.q-table th {
  text-align: left;
  font-family: var(--font-display);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-soft);
  padding: 9px 12px;
  border-bottom: 2px solid var(--line);
  background: var(--bg);
}

.q-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  overflow-wrap: anywhere;
}

.q-table tbody tr:hover td { background: var(--bg); }
.q-table tr.q-low td { background: #FCE9F1; }   /* low-CSAT rows draw the eye */
.nowrap { white-space: nowrap; }

.q-table col.w-date { width: 7%; }
.q-table col.w-office { width: 6%; }
.q-table col.w-cg { width: 16%; }
.q-table col.w-csat { width: 6%; }
.q-table col.w-case { width: 10%; }
.q-table col.w-cat { width: 15%; }
.q-table col.w-svc { width: 10%; }

.cell-sub { font-size: 12px; color: var(--ink-soft); margin-top: 2px; line-height: 1.45; }

.bh-row .cell-sub { color: var(--bh-navy-muted); }

/* inline note expanders (special/find-location/caregiver instructions) */
details.note { margin-top: 3px; }

details.note summary {
  font-size: 12px;
  font-weight: 600;
  color: var(--jovie-teal);
  cursor: pointer;
}

.bh-row details.note summary { color: var(--bh-steel-light); }

details.note p {
  margin: 3px 0 4px;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  max-width: 420px;
}

/* source pills — the at-a-glance BH / MJ identity */
.src-pill {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: 6px;
  vertical-align: 1px;
}

.src-bh { background: var(--bh-gold); color: var(--bh-navy); }

.src-mj { background: var(--jovie-indigo); color: #fff; }

/* action buttons wrap within the capped column instead of forcing it wide */
.actions { display: flex; flex-wrap: wrap; gap: 4px; }

.actions .btn { margin: 0; }

/* ---------- scheduling queue ---------- */
.q-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 16px;
  position: sticky;
  top: var(--chrome-h);
  z-index: 30;
}

.q-toolbar input[type="search"] {
  font: inherit;
  font-size: 14px;
  padding: 9px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  flex: 1;
  min-width: 200px;
}

.q-toolbar-btns { display: flex; gap: 6px; flex-wrap: wrap; }

.qcard {
  display: flex;
  gap: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 5px solid var(--jovie-sky);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 18px;
  margin: 10px 0;
  align-items: flex-start;
}

.qcard.u-now { border-left-color: var(--jovie-maroon); }

.qcard.u-soon { border-left-color: var(--jovie-amber); }

.qcard.u-later { border-left-color: var(--jovie-sky); }

.qcard.u-far { border-left-color: var(--line); }

.q-left { min-width: 110px; }

.q-when { font-family: var(--font-display); font-weight: 700; }

.q-time { color: var(--ink-soft); font-size: 13px; margin: 2px 0 6px; }

.q-mid { flex: 1; }

.q-client { font-family: var(--font-display); font-weight: 600; font-size: 16px; margin: 4px 0 2px; }

.q-case { color: var(--ink-soft); font-weight: 400; font-size: 13px; }

.q-cat {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  margin-left: 8px;
}

.q-meta { font-size: 13px; color: var(--ink-soft); margin: 1px 0 3px; }

.q-inspect { margin-top: 7px; }

.q-inspect summary {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--jovie-teal);
  cursor: pointer;
  width: max-content;
}

.q-pane {
  border-radius: 10px;
  padding: 9px 12px;
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.55;
}

.q-pane .src-pill { float: right; margin-left: 8px; }

.q-pane-bh { background: var(--bh-navy); color: var(--bh-navy-ink); }

.q-pane-bh a { color: var(--bh-steel-light); }

.q-pane-bh b { color: #fff; }

.q-pane-mj {
  background: var(--mj-tint);
  color: var(--ink);
  border: 1px solid #E2DDF1;
}

.q-pane-mj a { color: var(--jovie-teal); }

.q-staff { font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 3px; }

/* same dark-BH / light-MJ contrast as the crosschecker rows */
.side-seg {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 11px 3px 4px;
  border-radius: 8px;
}

.side-seg-bh { background: var(--bh-navy); color: var(--bh-navy-ink); }

.side-seg-bh em { color: var(--bh-navy-muted); }

.side-seg-mj {
  background: var(--mj-tint);
  color: var(--ink);
  border: 1px solid #E2DDF1;
}

/* tomorrow panel + per-office grouping */
.q-tomorrow {
  background: #FDF6F4;
  border: 1px solid var(--jovie-blush);
  border-radius: var(--radius);
  padding: 12px 16px 16px;
  margin: 12px 0 24px;
}

.q-section-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--jovie-maroon);
  background: var(--maroon-tint);
  border: 1px solid var(--jovie-blush);
  border-left: 4px solid var(--jovie-maroon);
  border-radius: 999px;
  padding: 8px 18px;
  margin: 2px 0 8px;
}

.q-office-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--jovie-indigo);
  border-radius: 999px;
  padding: 6px 14px;
  margin: 18px 0 6px;
  box-shadow: var(--shadow);
}

.q-tomorrow .q-office-head {
  border-left-color: var(--jovie-maroon);
  background: #FFFBFA;
}

.q-office-count { color: var(--ink-soft); font-weight: 500; font-size: 13px; }

.q-snoozed { font-size: 12px; color: var(--jovie-plum); margin-top: 4px; }

.q-actions { display: flex; flex-direction: column; gap: 4px; align-items: stretch; min-width: 170px; }

.q-drawer { margin-top: 22px; }

.q-drawer summary {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 8px 0;
}

/* ---------- modal + toasts ---------- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(37, 42, 71, .45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh 16px;
  z-index: 50;
}

.modal {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 12px 48px rgba(37, 42, 71, .3);
  width: 100%;
  max-width: 560px;
  max-height: 78vh;
  overflow: auto;
}

.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px 8px;
}

.modal-head h3 { margin: 0; font-size: 16px; }

.btn-x { background: none; border: none; font-size: 22px; color: var(--ink-soft); cursor: pointer; }

.modal-body { padding: 8px 20px 20px; }

.match-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.match-score {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--jovie-indigo);
  background: var(--sky-tint);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 13px;
}

.match-name { font-weight: 600; flex: 1; }

.match-meta { color: var(--ink-soft); font-size: 12px; }

/* hover-explained bits of a match row: the score (breakdown), the ⭐
   (preferred/requested caregiver) and the (N) booked-days count */
.match-score, .match-star, .match-booked { cursor: help; }
.match-booked { color: var(--ink-soft); font-size: 12px; }
.match-cap { margin: 2px 0 6px; color: var(--ink-soft); font-size: 12px; }

/* a Matches button whose count came back zero — visibly inert (a class
   guard in the click dispatch, not [disabled]: disabled controls get no
   hover events, which would mute the instant tooltip) */
.btn.mc-zero, .btn.mc-zero:hover { opacity: .45; cursor: default; }

/* ---------- crosschecker: every office renders, selected first ----------
   One .cc-office card per office (selected = .cc-office-main, on top), each
   with its own three sections and a REGIONAL WATERMARK tile behind the
   card — line-art landmarks at low ink so they read at a glance without
   competing with the tables (tables keep an opaque background). */
.cc-office {
  /* ------------- WATERMARK TUNING — the two knobs to fiddle -------------
     --cc-glass scales how SEE-THROUGH every table surface is, while
     keeping their relative readability (BH navy rows stay near-opaque
     for their white text).  1 = the shipped look;  0 = fully opaque
     tables (pattern only in the gutters);  2 = twice as see-through.

     --cc-ink scales how DARK the landmark line-art itself is, everywhere
     it shows — the card gutters included, so it still bites at
     --cc-glass: 0.  1 = the shipped look (16% ink);  0 = no watermark;
     2 = twice as dark;  ~6 = solid ink.  The two knobs are independent:
     ink sets how dark the mark is drawn, glass sets how much of it the
     tables let through.
     Values between/beyond are fine — the browser clamps the extremes. */
  --cc-glass: 2;
  --cc-ink: 0.6;
  border: 1px solid var(--line, #e3e5ee);
  border-radius: 12px;
  padding: 4px 16px 14px;
  margin: 26px 0;
  background-color: #fff;
  /* the landmark (--cc-pattern, set per office below) is drawn at SOLID
     ink and knocked back by a white veil laid over it — that's what lets
     --cc-ink go darker than shipped as well as lighter.  At --cc-ink: 1
     the veil is 84% white, which reproduces the 16% strokes we used to
     bake into each SVG — same composite by construction, give or take
     how the rasteriser rounds an antialiased stroke edge. */
  background-image:
    linear-gradient(rgba(255, 255, 255, calc(1 - .16 * var(--cc-ink))),
                    rgba(255, 255, 255, calc(1 - .16 * var(--cc-ink)))),
    var(--cc-pattern, none);
  background-repeat: repeat;
  background-size: auto, 260px auto;   /* veil covers, landmark tiles */
}
.cc-office-main { border: 2px solid var(--ink); }
.cc-office-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 2px 10px;
  border-bottom: 3px solid var(--ink);
  margin-bottom: 4px;
}
.cc-office-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: .5px;
}
.cc-office-label { color: var(--ink-soft); font-size: 15px; }
/* translucent table surfaces (crosschecker office cards only): the regional
   watermark ghosts through the rows themselves, not just the card gutters.
   Every alpha derives from the ONE --cc-glass knob on .cc-office above —
   tune it there, not here. Per-surface factors keep the hierarchy: plain
   cells most transparent, status tints next, cancelled subtler, BH navy
   rows near-opaque (white text needs the contrast). */
.cc-office .cc-table {
  background: rgba(255, 255, 255, calc(1 - .50 * var(--cc-glass)));
}
.cc-office .cc-table th {
  background: rgba(255, 255, 255, calc(1 - .28 * var(--cc-glass)));
}
.cc-office .bh-row td {
  background: rgba(26, 71, 95, calc(1 - .07 * var(--cc-glass)));
}
.cc-office .mj-status-scheduled td {
  background: rgba(205, 235, 216, calc(1 - .32 * var(--cc-glass)));
}
.cc-office .mj-status-tentative td {
  background: rgba(248, 207, 226, calc(1 - .32 * var(--cc-glass)));
}
.cc-office .mj-status-open td {
  background: rgba(206, 223, 249, calc(1 - .32 * var(--cc-glass)));
}
.cc-office .ccrow tr.row-cancelled td {
  background: rgba(241, 241, 244, calc(1 - .20 * var(--cc-glass))) !important;
}

/* PROVISIONAL row — an Instant Book scraped in the last few minutes whose
   Bright Horizons half may simply not be in yet. Only rows we deliberately
   still show get this (same/next day, or surfaced by a search); the rest are
   filtered out server-side. Yellow diagonal striping so a scheduler reads it
   as "not settled yet" at a glance and never works it as a real Missing BH.

   background-IMAGE only: the status-tint rules above set the `background`
   shorthand, which would blow away a stripe declared with less specificity.
   These selectors carry more (and the second covers the row rendered outside
   an office card, e.g. the RTB queue), so the tint stays as the base colour
   and the stripes ride on top of it. */
.cc-office .ccrow.cc-fresh td,
.ccrow.cc-fresh td {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(214, 158, 12, .13) 0 6px,
    rgba(214, 158, 12, 0) 6px 16px);
}
/* the note row carries the stripe at full strength instead — it has no text
   to compete with, so the banding reads clearly there and stays light enough
   over the shift cells to keep them comfortable to read */
.ccrow.cc-fresh tr.cc-fresh-note td {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(214, 158, 12, .30) 0 6px,
    rgba(214, 158, 12, .10) 6px 16px);
  color: #6B4E00;
  font-size: 12px;
  line-height: 1.45;
  padding: 6px 10px;
  border-top: 1px solid rgba(214, 158, 12, .55);
}
.ccrow.cc-fresh tr:first-child td { border-top: 2px solid #d69e0c; }

/* SF Bay — Golden Gate Bridge */
.cc-office-105 { --cc-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 20 260 140'%3E%3Cg fill='none' stroke='%23252a47' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M14 128 H246'/%3E%3Cpath d='M78 56 V128 M88 56 V128 M75 56 H91 M78 70 H88 M78 88 H88 M78 108 H88'/%3E%3Cpath d='M172 56 V128 M182 56 V128 M169 56 H185 M172 70 H182 M172 88 H182 M172 108 H182'/%3E%3Cpath d='M14 100 Q46 124 78 60'/%3E%3Cpath d='M88 60 Q130 132 172 60'/%3E%3Cpath d='M182 60 Q214 124 246 100'/%3E%3Cpath d='M46 112 V128 M130 114 V128 M214 112 V128'/%3E%3C/g%3E%3C/svg%3E"); }

/* Sacramento — Tower Bridge (vertical-lift span) */
.cc-office-101 { --cc-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 20 260 140'%3E%3Cg fill='none' stroke='%23252a47' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M14 128 H246'/%3E%3Cpath d='M96 46 V128 M112 46 V128 M96 46 L104 30 L112 46'/%3E%3Cpath d='M148 46 V128 M164 46 V128 M148 46 L156 30 L164 46'/%3E%3Cpath d='M96 60 H112 M96 78 H112 M148 60 H164 M148 78 H164'/%3E%3Cpath d='M112 92 H148 M112 100 H148'/%3E%3Cpath d='M14 128 L96 92 M246 128 L164 92'/%3E%3C/g%3E%3C/svg%3E"); }

/* St. Paul / Rochester — Spoonbridge and Cherry */
.cc-office-129 { --cc-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 20 260 140'%3E%3Cg fill='none' stroke='%23252a47' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M22 132 C 70 108 118 104 150 112'/%3E%3Cpath d='M150 112 C 148 100 176 94 194 102 C 206 108 202 122 182 126 C 164 129 152 122 150 112'/%3E%3Ccircle cx='183' cy='84' r='11'/%3E%3Cpath d='M183 73 C 181 60 189 52 196 48'/%3E%3C/g%3E%3C/svg%3E"); }

/* Seattle metro — Space Needle */
.cc-office-130 { --cc-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 20 260 140'%3E%3Cg fill='none' stroke='%23252a47' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M130 24 V44'/%3E%3Cpath d='M106 52 Q130 38 154 52'/%3E%3Cpath d='M96 56 H164'/%3E%3Cpath d='M104 62 Q130 74 156 62'/%3E%3Cpath d='M116 66 C 120 96 108 126 98 148'/%3E%3Cpath d='M144 66 C 140 96 152 126 162 148'/%3E%3Cpath d='M126 70 V116 M134 70 V116'/%3E%3Cpath d='M112 100 H148 M104 128 H156'/%3E%3Cpath d='M84 148 H176'/%3E%3C/g%3E%3C/svg%3E"); }

/* Portland — Mt. Hood + fir */
.cc-office-151 { --cc-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 20 260 140'%3E%3Cg fill='none' stroke='%23252a47' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M20 146 L120 36 L220 146'/%3E%3Cpath d='M92 78 Q104 88 114 74 Q124 86 140 76'/%3E%3Cpath d='M198 146 V122'/%3E%3Cpath d='M184 124 L198 100 L212 124 M187 110 L198 90 L209 110'/%3E%3C/g%3E%3C/svg%3E"); }

/* Eastern Washington — apple country */
.cc-office-178 { --cc-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 20 260 140'%3E%3Cg fill='none' stroke='%23252a47' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M130 78 C 106 58 76 70 76 102 C 76 132 104 152 130 142 C 156 152 184 132 184 102 C 184 70 154 58 130 78'/%3E%3Cpath d='M130 76 C 129 62 133 54 138 48'/%3E%3Cpath d='M136 58 C 150 44 168 48 170 57 C 161 68 143 68 136 58'/%3E%3C/g%3E%3C/svg%3E"); }

/* ---------- RTB queue (/admin/rtb-queue) ---------- */
.rtbq-card {
  background: #fff;
  border: 1px solid var(--line, #e3e5ee);
  border-radius: 10px;
  margin: 10px 0;
  overflow: hidden;
}
.rtbq-card.rtbq-held { border-left: 4px solid #964A7E; }
.rtbq-card > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
}
.rtbq-card > summary::-webkit-details-marker { display: none; }
.rtbq-sum-main { display: flex; align-items: baseline; gap: 10px;
  flex-wrap: wrap; }
.rtbq-sum-chips { display: flex; align-items: center; gap: 6px; }
.rtbq-caret { color: var(--ink-soft); transition: transform .15s; }
.rtbq-card[open] .rtbq-caret { transform: rotate(180deg); }
.rtbq-body { padding: 0 14px 12px; }

.rtbq-plan {
  background: #f7f8fc;
  border: 1px solid var(--line, #e3e5ee);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 4px 0 12px;
}
.rtbq-plan-head { display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; }
.rtbq-plan-head .rtbq-replan { margin-left: auto; }
.rtbq-planrow {
  border-top: 1px solid var(--line, #e3e5ee);
  margin-top: 8px;
  padding-top: 8px;
}
.rtbq-planrow.rtbq-ok { background: rgba(176, 207, 54, .08);
  border-radius: 6px; padding: 8px; }
.rtbq-planhead { display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; }
.rtbq-day {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 3px 0 3px 12px;
  font-size: 13px;
}
.rtbq-daylabel { font-weight: 600; min-width: 88px; }
.rtbq-btns { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.rtbq-blocked { opacity: .65; }

/* the shared instant tooltip (admin.js): shown for [data-tip] elements the
   moment the pointer enters — native title tips wait ~1s. pre-line keeps
   the multi-line score breakdowns readable. */
#tip {
  position: fixed;
  z-index: 70;              /* above the modal overlay (50) + toasts (60) */
  display: none;
  max-width: 360px;
  padding: 8px 11px;
  background: var(--ink);
  color: #fff;
  border-radius: 7px;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-line;
  pointer-events: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}

.match-btns { display: flex; gap: 5px; }

.match-row.match-queued { opacity: .6; }

.match-done { font-size: 12px; font-weight: 600; color: var(--jovie-teal); }

/* a button that has been queued (e.g. Restaff BH) but whose modal stays open */
.btn.btn-queued, .btn.btn-queued[disabled] {
  background: var(--jovie-teal);
  color: #fff;
  cursor: default;
  opacity: 1;
}

/* assign (staff dropdown) modal */
.assign-search {
  width: calc(100% - 40px);
  margin: 0 20px 4px;
  font: inherit;
  font-size: 14px;
  padding: 9px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
}

.modal-body.assign-list { max-height: 52vh; overflow-y: auto; }

/* shuffle-pathways modal */
.modal-shuffle { max-width: 680px; }

.shuffle-lead { font-size: 13px; margin: 0 20px 4px; }

.modal-body.shuffle-body { max-height: 56vh; overflow-y: auto; }

.path-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin: 10px 0;
}

.path-head {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--jovie-indigo);
  margin-bottom: 2px;
}

.path-rank {
  background: var(--sky-tint);
  border-radius: 999px;
  padding: 1px 8px;
  margin-right: 6px;
}

.path-leg {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px dashed var(--line);
  font-size: 13.5px;
}

.path-leg:first-of-type { border-top: none; }

.leg-step {
  flex: none;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--sky-tint);
  color: var(--jovie-indigo);
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.leg-who { font-weight: 600; }

.leg-arrow { color: var(--ink-soft); }

.leg-to { flex: 1; min-width: 0; }

.leg-dist { white-space: nowrap; color: var(--ink-soft); }

.leg-score { font-size: 11.5px; }

.leg-btns { display: flex; gap: 4px; }

/* cancel-shift modal (mirrors MyJovie's cancel panel) */
.modal-cancel { max-width: 520px; }

.cancel-form .cf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
  align-items: start;
}

.cancel-form .cf-field {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 8px 0;
}

.cancel-form .cf-field select,
.cancel-form .cf-field input[type="text"] {
  display: block;
  width: 100%;
  margin-top: 4px;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
  padding: 8px 10px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.cancel-form .cf-req { color: var(--jovie-maroon); }

.cancel-form .cf-check {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  margin: 8px 0;
  cursor: pointer;
}

.cancel-form .cf-check-solo { margin-top: 30px; }  /* aligns with the select */

.cf-deadline {
  margin: 10px 0 2px;
  padding: 10px 14px;
  background: #FFF8E1;                       /* amber tint — money involved */
  border: 1px solid #F2DFA0;
  border-radius: var(--radius-sm);
}

.cf-deadline-note { font-size: 12.5px; color: var(--ink-soft); }

.cf-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.btn-cancel-confirm {
  background: var(--jovie-maroon);
  color: #fff;
}

.btn-cancel-confirm:hover { filter: brightness(1.15); }

/* edit-shift modal (full mirror of MyJovie's dock form) */
.modal-edit { max-width: 700px; }

.edit-form .ef-lock { font-size: 12.5px; margin: 2px 0 6px; }

.edit-form .cf-field textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ink);
  padding: 8px 10px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  resize: vertical;
}

.edit-form .ef-kids {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 18px;
  font-weight: 400;
  margin-top: 2px;
}

.edit-form .ef-kids .cf-check { margin: 2px 0; }

/* notify-available-staff modal */
.modal-notify { max-width: 560px; }

.notify-form .nf-lead { font-size: 13px; margin: 0 0 10px; }

.nf-note { font-size: 12.5px; margin: 8px 0; }

.nf-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 4px;
}

.nf-head .cf-check { margin: 0; font-weight: 600; white-space: nowrap; }

.nf-head #nf-search {
  flex: 1;
  font: inherit;
  font-size: 13.5px;
  padding: 6px 10px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
}

.nf-list {
  max-height: 40vh;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  margin-bottom: 8px;
}

.nf-opt { display: flex; align-items: center; gap: 6px; }

.nf-opt.hidden { display: none; }

.nf-opt .nf-name { font-weight: 500; }

.nf-opt .nf-hrs { margin-left: auto; font-size: 11.5px; white-space: nowrap; }

.nf-opt .tag-note { font-size: 10.5px; padding: 1px 6px; }

/* ---------- text-blast modal (Heymarket list + broadcast) ---------- */
.modal-blast { max-width: 640px; }

.bl-ctx {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 10px;
}

.bl-ctx .dim { margin-left: 6px; }

.bl-warn {
  background: #FFF8E1;                       /* amber — duplicate-send risk */
  border: 1px solid #F2DFA0;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 10px;
}

.bl-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 20px;
}

.bl-filter { margin-bottom: 8px; }

.bl-filter-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 2px;
}

.bl-filters .cf-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  margin: 3px 0;
  cursor: pointer;
}

.bl-range { width: 90px; }

.bl-num {
  font: inherit;
  font-size: 13px;
  width: 62px;
  padding: 3px 6px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
}

.bl-actions { align-items: center; }

.bl-names {
  max-height: 32vh;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px 10px 6px 26px;
  margin-top: 8px;
  font-size: 13px;
}

.bl-names.hidden { display: none; }

.bl-send {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.bl-send textarea {
  width: 100%;
  font: inherit;
  font-size: 13.5px;
  padding: 8px 10px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  resize: vertical;
}

.bl-send textarea[readonly] { background: var(--bg); }

.bl-opts {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.bl-opts .cf-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  margin: 0;
  cursor: pointer;
}

@media (max-width: 700px) {
  .bl-filters { grid-template-columns: 1fr; }
}

.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  transform: translateY(12px);
  opacity: 0;
  transition: all .3s ease;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  z-index: 60;
  max-width: 420px;
}

.toast.show { transform: translateY(0); opacity: 1; }

.toast-ok { background: var(--jovie-teal); }

.toast-error { background: var(--jovie-maroon); }

/* stack multiple toasts */
.toast + .toast { bottom: 76px; }

/* ---------- swap-review tray (bottom-right workbench): scrollable list of
   pending swap plans, one compact card each — headline + status line + the
   Approve/Request/Decline row always visible, full narration (why / costs /
   steps with reply state) behind a per-card expand. Chrome mirrors the
   bottom-left action tray (same tray-head/tray-toggle collapse). */
#swap-tray {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 55;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--jovie-indigo);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 10px 12px;
  width: min(480px, calc(100vw - 40px));
  max-height: min(74vh, 680px);
  display: flex;
  flex-direction: column;
  font-size: 13px;
}
#swap-tray.tray-collapsed { padding: 7px 12px; width: auto; min-width: 0; }
#swap-tray.tray-collapsed .tray-head { margin-bottom: 0; }
.swt-body { overflow-y: auto; margin-top: 6px; padding-right: 2px; }
.swt-card { border: 1px solid var(--line); border-radius: 8px;
            padding: 8px 10px; margin: 0 0 8px; }
.swt-card:last-child { margin-bottom: 0; }
.swt-head { display: flex; align-items: baseline; gap: 7px;
            cursor: pointer; }
.swt-pill { flex: none; align-self: center; font-size: 10px;
            font-weight: 700; text-transform: uppercase;
            letter-spacing: .4px; padding: 2px 7px; border-radius: 999px;
            background: var(--line); color: var(--ink-soft); }
.swt-pill.coverage { background: #fdeadc; color: #a34d00; }
.swt-pill.requested { background: #e6e3f5; color: #424773; }
.swt-pill.consolidate { background: #def0e4; color: #1d6b3d; }
.swt-hl { flex: 1; font-family: var(--font-display); font-weight: 600;
          line-height: 1.3; }
.swt-chev { color: var(--ink-soft); flex: none;
            transition: transform .15s ease; }
.swt-card.open .swt-chev { transform: rotate(180deg); }
.swt-sub { color: var(--ink-soft); font-size: 11.5px; margin-top: 2px; }
.swt-detail { display: none; border-top: 1px dashed var(--line);
              margin-top: 7px; padding-top: 2px; }
.swt-card.open .swt-detail { display: block; }
.swt-detail h6 { margin: 8px 0 3px; font-size: 10.5px;
                 text-transform: uppercase; letter-spacing: .5px;
                 color: var(--ink-soft); }
.swt-sum { margin: 6px 0 0; }
.swt-avail-warn { color: #a34d00; }
.swt-why, .swt-costs, .swt-steps { margin: 0; padding-left: 18px; }
.swt-why li, .swt-costs li, .swt-steps li { margin: 2px 0; }
.swt-why li { color: #1d6b3d; }
.swt-costs li { color: #a34d00; }
.swt-chip { font-size: 10px; font-weight: 600; border-radius: 999px;
            padding: 1px 6px; white-space: nowrap;
            background: #fdeecd; color: #8a5a00; }
.swt-chip.c-sent { background: #e2ecfb; color: #1f4e96; }
.swt-chip.c-yes { background: #def0e4; color: #1d6b3d; }
.swt-chip.c-no, .swt-chip.c-expired { background: #f8d7da; color: #842029; }
.swt-dim { color: var(--ink-soft); }
.swt-link { display: inline-block; margin-top: 6px; font-size: 12px;
            color: var(--jovie-indigo); }
.swt-actions { display: flex; align-items: center; gap: 6px;
               margin-top: 7px; }
.swt-actions .btn-sm { font-size: 12px; padding: 5px 11px; }
.swt-decline { color: #842029; }
.swt-msg { font-size: 11.5px; color: var(--ink-soft); }
.swt-empty { color: var(--ink-soft); padding: 4px 2px; }

/* ---------- pending-action tray ---------- */
#action-tray {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 55;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--jovie-orange);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 10px 16px;
  min-width: 210px;
  font-size: 13px;
}

.tray-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  margin-bottom: 4px;
}

.tray-item { color: var(--ink-soft); padding: 1px 0; }

/* collapse control: a long queue of actions would otherwise grow the tray up
   the left edge of the page. Collapsed keeps the spinner + live count so it
   is obvious work is still running — only the per-action list is hidden. */
.tray-toggle {
  margin-left: auto;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 3px 7px;
}
.tray-toggle:hover { background: var(--line); color: var(--ink); }
#action-tray.tray-collapsed { padding: 7px 12px; min-width: 0; }
#action-tray.tray-collapsed .tray-head { margin-bottom: 0; }
/* the list can get long on a big batch — cap it and scroll rather than let
   the tray run off the top of the viewport */
#action-tray { max-height: 45vh; overflow-y: auto; }

.spin {
  width: 13px;
  height: 13px;
  border: 2px solid var(--line);
  border-top-color: var(--jovie-orange);
  border-radius: 50%;
  animation: mmks-spin .8s linear infinite;
  flex-shrink: 0;
}

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

/* freshly-swapped row (crosschecker + placements + BH caregivers) */
.ccrow.row-flash td,
.plrow.row-flash td,
.bhcgrow.row-flash td { animation: mmks-row-flash 2.2s ease-out; }

@keyframes mmks-row-flash {
  0% { box-shadow: inset 0 0 0 100px rgba(38, 125, 105, .22); }
  100% { box-shadow: inset 0 0 0 100px rgba(38, 125, 105, 0); }
}

/* ---------- placements board ---------- */
.pl-status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}

.pl-status-searching { background: var(--sky-tint); color: #1E4C8A; }

.pl-status-filled { background: #CDEBD8; color: #1F6B3F; }

.pl-status-archived { background: #E7E7EE; color: #5A5F7D; }

tbody.plrow tr.pl-archived td { opacity: .6; }

.pl-day { display: inline-block; width: 24px; color: var(--jovie-indigo); }

.pl-headline { font-weight: 600; margin-bottom: 2px; }

.pl-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12.5px;
  color: var(--ink-soft);
  white-space: pre-line;
  margin-top: 2px;
}

.pl-details-tr td { padding-top: 0; }

.pl-panes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

.pl-panes .q-pane { flex: 1 1 280px; font-size: 13px; }

.pl-pane-head { font-family: var(--font-display); font-weight: 600; margin-bottom: 4px; }

/* interested-caregivers (admin board) */
.pl-interest-badge { background: var(--jovie-plum); color: #fff; }

.pl-interests {
  margin-top: 10px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.pl-interest {
  font-size: 13px;
  padding: 8px 10px;
  margin-top: 6px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--jovie-plum);
}

.pl-interest-top { margin-bottom: 3px; }

.pl-interest-top a { color: var(--jovie-indigo); text-decoration: none; }

.pl-interest-top a:hover { color: var(--jovie-orange); text-decoration: underline; }

.pl-qa { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--ink-soft); }

.pl-interest > div { margin-top: 2px; }

#pl-table .actions { min-width: 150px; }

#pl-table .actions .btn { margin: 1px 2px 1px 0; }

/* placement edit modal */
.pl-modal { max-width: 660px; }

.pl-form label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin: 10px 0 0; }

.pl-form input[type="text"],
.pl-form input[type="date"],
.pl-form input[type="number"],
.pl-form select,
.pl-form textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
  padding: 8px 10px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.pl-form textarea { resize: vertical; }

.pl-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

.pl-form .pl-check { display: flex; align-items: center; gap: 7px; font-size: 14px; margin-top: 28px; cursor: pointer; }

.pl-form .pl-check input { width: auto; margin: 0; }

.pl-sched-head { font-size: 13px; font-weight: 600; color: var(--ink-soft); margin: 14px 0 4px; }

.pl-sched-grid { border-collapse: collapse; }

.pl-sched-grid th { text-align: left; font-size: 12.5px; color: var(--ink-soft); padding: 2px 10px 2px 0; }

.pl-sched-grid td { padding: 2px 12px 2px 0; white-space: nowrap; }

.pl-sched-grid input[type="time"] {
  font: inherit;
  font-size: 13px;
  padding: 4px 6px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
}

.pl-form-foot { display: flex; gap: 8px; margin-top: 16px; }

/* placement prospects map (day-fit chips shared with list rows + popups) */
.plm-days { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

.plm-day {
  font-size: 11.5px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
}

/* ---------- BH live chat board (/admin/bhchat) ----------
   Incoming (BH-side) messages use the reserved --bh-* palette; our operator
   replies use the Jovie indigo family. See STYLE_GUIDE "Bright Horizons data". */
.bhc-toolbar { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; }
.bhc-status { font-size: 12.5px; }

.bhc-new { padding: 14px 16px; margin-bottom: 16px; }
.bhc-new-row { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.bhc-new label { display: flex; flex-direction: column; font-size: 12.5px;
  font-weight: 600; color: var(--ink-soft); gap: 4px; }
.bhc-new input, .bhc-new select, .bhc-new textarea {
  font: inherit; font-size: 14px; font-weight: 400; color: var(--ink);
  padding: 7px 9px; border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface); }
.bhc-new .bhc-full { width: 100%; }
.bhc-new textarea { resize: vertical; }
.bhc-new-actions { display: flex; gap: 8px; margin-top: 12px; }

.bhc-board { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }

.bhc-pane {
  display: flex; flex-direction: column;
  width: 360px; max-width: 100%;
  height: min(72vh, 620px);
  padding: 0; overflow: hidden;
}
.bhc-pane.bhc-ended { opacity: .82; }

.bhc-pane-head {
  position: relative;
  padding: 12px 56px 12px 14px; border-bottom: 1px solid var(--line);
  background: var(--bh-tint);
}
.bhc-end { position: absolute; top: 9px; right: 10px; font-size: 12px; padding: 3px 9px; }

/* crosschecker chat-status pill (link to the live board / the chat log) */
.bhc-cc { text-decoration: none; }
.bhc-cc-open { color: var(--jovie-teal); border-color: var(--jovie-teal); font-weight: 600; }

/* /admin/bhchat tabs + searchable logs history */
.bhc-tabs { display: flex; gap: 6px; margin: 4px 0 14px; }
.bhc-tab { font: inherit; font-size: 14px; padding: 6px 14px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface);
  border-radius: 999px; color: var(--ink-soft); }
.bhc-tab.on { background: var(--bh-navy); color: var(--bh-navy-ink);
  border-color: var(--bh-navy); }
.bhc-logs-bar { margin-bottom: 12px; }
.bhc-logs-bar input { width: 100%; max-width: 480px; font: inherit; font-size: 14px;
  padding: 8px 10px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); }
.bhc-logs-split { display: flex; gap: 16px; align-items: flex-start; }
.bhc-logs-list { flex: 0 0 340px; max-height: 72vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px; }
.bhc-log-row { display: flex; align-items: center; gap: 8px; width: 100%;
  text-align: left; font: inherit; padding: 8px 10px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); }
.bhc-log-row:hover { background: var(--bg); }
.bhc-log-row.sel { border-color: var(--bh-navy); background: var(--bh-tint); }
.bhc-log-date { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.bhc-log-main { flex: 1; min-width: 0; font-size: 13px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.bhc-logs-view { flex: 1; min-width: 0; padding: 14px; min-height: 220px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.bhc-log-head { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.bhc-log-transcript { display: flex; flex-direction: column; gap: 8px;
  max-height: 64vh; overflow-y: auto; }
@media (max-width: 720px) {
  .bhc-logs-split { flex-direction: column; }
  .bhc-logs-list { flex-basis: auto; width: 100%; max-height: 40vh; }
}
.bhc-pane-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bhc-pane-title b { font-size: 14.5px; color: var(--bh-navy); }
.bhc-pane-sub { font-size: 12px; margin-top: 3px; }

.bhc-badge {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-soft); background: var(--surface);
}
.bhc-badge-active { color: var(--jovie-teal); border-color: var(--jovie-teal); }
.bhc-badge-pending, .bhc-badge-connecting {
  color: var(--jovie-orange-dark); border-color: var(--jovie-orange); }
.bhc-badge-ended { color: var(--ink-soft); }
.bhc-badge-failed { color: var(--jovie-maroon); border-color: var(--jovie-maroon); }

.bhc-log {
  flex: 1; overflow-y: auto; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px; background: var(--bg);
}

.bhc-msg { max-width: 85%; padding: 7px 10px; border-radius: 12px;
  border: 1px solid var(--line); }
.bhc-msg-meta { display: flex; gap: 6px; align-items: baseline;
  font-size: 11px; color: var(--ink-soft); margin-bottom: 2px; }
.bhc-sender { font-weight: 700; }
.bhc-body { font-size: 13.5px; color: var(--ink); white-space: pre-wrap;
  word-break: break-word; }

.bhc-in { align-self: flex-start; background: var(--bh-tint);
  border-color: var(--bh-steel); }
.bhc-in .bhc-sender { color: var(--bh-navy); }
.bhc-out { align-self: flex-end; background: var(--mj-tint);
  border-color: var(--jovie-indigo); }
.bhc-out .bhc-sender { color: var(--jovie-indigo); }

.bhc-intake { align-self: center; max-width: 92%; opacity: .6;
  background: transparent; border-style: dashed; }
.bhc-intake .bhc-body { font-size: 12px; color: var(--ink-soft); }

.bhc-sendstate { text-transform: uppercase; font-size: 10px; font-weight: 700; }
.bhc-sendstate-pending { color: var(--jovie-orange-dark); }
.bhc-sendstate-failed { color: var(--jovie-maroon); }

.bhc-reply { display: flex; gap: 8px; padding: 10px 12px;
  border-top: 1px solid var(--line); background: var(--surface); }
.bhc-input {
  flex: 1; font: inherit; font-size: 13.5px; color: var(--ink);
  padding: 7px 9px; border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); resize: none; background: var(--surface);
}
.bhc-input:disabled { background: var(--bg); color: var(--ink-soft); }
.bhc-empty { margin-top: 8px; }

@media (max-width: 640px) {
  .bhc-pane { width: 100%; height: 70vh; }
}

.plm-day.plm-full { background: #CDEBD8; color: #1F6B3F; border-color: #A8D8BC; }

.plm-day.plm-part { background: #FDF3D5; color: #8A6A0C; border-color: #EFD98F; }

.plm-day.plm-zero { opacity: .55; }

.plm-star { color: #C99700; font-size: 15px; }

.pr-layout {
  display: flex;
  gap: 14px;
  align-items: stretch;
  height: calc(100vh - var(--chrome-h) - 44px);
  min-height: 480px;
}

.pr-side {
  width: 440px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.pr-back { font-size: 13px; color: var(--jovie-teal); text-decoration: none; }

.pr-title { font-size: 21px; margin: 2px 0 2px; }

.pr-head { padding: 4px 2px 8px; }

.pr-filters {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 8px;
}

.pr-filters input[type="search"] {
  width: 100%;
  font: inherit;
  font-size: 13.5px;
  padding: 7px 10px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}

.pr-filter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px 10px;
}

.pr-filter-grid label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-soft);
}

.pr-filter-grid select {
  display: block;
  width: 100%;
  margin-top: 2px;
  font: inherit;
  font-size: 12.5px;
  padding: 4px 6px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.pr-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 8px;
}

.pr-checks label {
  font-size: 12.5px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.pr-count { font-size: 12.5px; color: var(--ink-soft); padding: 2px 2px 6px; }

.pr-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.pr-row {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.pr-row:hover { background: var(--bg); }

.pr-row-active { background: var(--sky-tint); }

.pr-row-top { display: flex; align-items: center; gap: 6px; }

.pr-row-top b { font-size: 14px; }

.pr-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px var(--line);
}

.pr-dist { margin-left: auto; font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }

.pr-map-wrap { flex: 1; min-width: 0; }

#pr-map {
  height: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  z-index: 1;              /* stay under the sticky chrome */
}

.pr-pop { font-family: var(--font-body); font-size: 13px; }

.pr-pop .cell-sub { margin-top: 3px; }

/* caregiver name -> MyJovie profile link */
.pr-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}

.pr-name:hover { color: var(--jovie-orange); text-decoration: underline; }

.pr-pop .pr-name { font-size: 14px; }

/* caregiver-submitted "looking for placement" + admin exclusion */
.tag-looking {
  background: #EFF5D4;
  color: #5A6E12;
  border-color: var(--jovie-lime);
}

.pr-looking { color: #5A6E12; font-weight: 600; }

.pr-excluded { color: var(--jovie-maroon); font-weight: 600; }

.pr-act { margin-top: 5px; display: flex; gap: 6px; }

.pr-act .btn-sm { padding: 3px 10px; font-size: 12px; }

/* CSAT / CIR signal coloring (goals: CSAT >=4.5, CIR <2%) */
.sig-good { color: var(--jovie-teal); font-weight: 600; }

.sig-mid { color: #8A6A0C; font-weight: 600; }        /* amber-dark, readable */

.sig-bad { color: var(--jovie-maroon); font-weight: 700; }

/* map color key */
.pr-legend {
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 8px 11px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink);
}

.pr-legend b {
  display: block;
  font-family: var(--font-display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-soft);
  margin-bottom: 3px;
}

.pr-leg-item { display: flex; align-items: center; gap: 7px; }

.pr-leg-item i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px var(--line);
  flex-shrink: 0;
}

/* add-placement modal */
.pl-add-modal { max-width: 680px; }

/* steady presence: no 166px stub before the first search, no jump after */
.pl-add-modal .assign-list { min-height: 340px; }

.pl-add-controls { display: flex; gap: 8px; padding: 0 20px 4px; }

.pl-add-controls select {
  flex: 0 1 auto;
  min-width: 0;                 /* flex children may shrink below content */
  max-width: 46%;
  font: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.pl-add-controls .assign-search { flex: 1 1 120px; min-width: 0; width: auto; margin: 0; }

.pl-add-modal .match-name { min-width: 0; overflow-wrap: anywhere; }

/* ---------- staff: bottom tab bar ---------- */

:root { --tabbar-h: 62px; }

body.staff .shell {
  padding-bottom: calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom));
}

.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  gap: 8px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 6px 10px calc(6px + env(safe-area-inset-bottom));
}

.tabbar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 76px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
}

.tabbar svg { width: 22px; height: 22px; fill: currentColor; }

.tabbar a.active { color: var(--jovie-orange); }

.tabbar a:active { background: var(--sky-tint); }

/* ---------- staff: schedule agenda ---------- */

.agenda { display: flex; flex-direction: column; gap: 18px; margin-bottom: 18px; }

.day-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 2px 6px;
}

.day-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--jovie-indigo);
}

.day-today .day-label { color: var(--jovie-orange); }

.day-sub { color: var(--ink-soft); font-size: 13px; }

.day-empty {
  margin: 0;
  padding: 10px 14px;
  color: var(--ink-soft);
  font-size: 14px;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
}

.ev {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  margin-bottom: 6px;
  font-size: 15px;
}

.ev-time {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}

.ev-title { flex: 1; min-width: 120px; }

.ev .status { margin-left: auto; }

.chip-xs { font-size: 11px; padding: 1px 8px; }

/* shifts: expandable, status-tinted left edge (crosschecker palette) */
details.ev { display: block; padding: 0; }

details.ev > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 11px 14px;
  cursor: pointer;
  list-style: none;
  min-height: 44px;
  box-sizing: border-box;
}

details.ev > summary::-webkit-details-marker { display: none; }

.ev-shift { border-left-color: #4CAF7D; }
.ev-shift.ev-tentative { border-left-color: #E4739F; background: #FDF4F8; }
.ev-shift.ev-muted { border-left-color: var(--line); color: var(--ink-soft); }

.status-muted { background: var(--line); color: var(--ink-soft); }

.ev-overnight { font-size: 12px; }

.ev-detail {
  border-top: 1px solid var(--line);
  padding: 10px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}

.ev-row { display: flex; gap: 10px; }

.ev-key {
  flex: 0 0 44px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  padding-top: 2px;
}

.ev-row a { color: var(--jovie-teal); font-weight: 500; }

.ev-notes { white-space: pre-line; overflow-wrap: anywhere; }

.ev-avail { border-left-color: var(--jovie-lavender); background: #FBF8FE; }

.ev-timeoff { border-left-color: #7f9aa1; background: #F4F6F7; color: var(--ink-soft); }

.ev-pending { font-size: 12px; color: var(--ink-soft); }

/* ---------- admin: site settings ---------- */

.settings-table { border-collapse: collapse; }

.settings-table th, .settings-table td {
  padding: 10px 22px 10px 0;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.settings-table thead th { color: var(--ink-soft); font-size: 13px; }

.settings-table tbody tr:last-child td { border-bottom: none; }

.switch { position: relative; display: inline-block; width: 42px; height: 24px; vertical-align: middle; }

.switch input { opacity: 0; width: 0; height: 0; }

.switch .slider {
  position: absolute;
  inset: 0;
  background: var(--line);
  border-radius: 999px;
  transition: background .15s ease;
}

.switch .slider::before {
  content: "";
  position: absolute;
  height: 18px; width: 18px;
  left: 3px; top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .15s ease;
  box-shadow: 0 1px 2px rgba(37, 42, 71, .25);
}

.switch input:checked + .slider { background: var(--jovie-teal); }

.switch input:checked + .slider::before { transform: translateX(18px); }

.switch input:disabled + .slider { opacity: .5; }

.settings-table .setting-text {
  font: inherit;
  font-size: 13px;
  width: 430px;
  max-width: 100%;
  padding: 7px 10px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  vertical-align: middle;
}

.settings-table .setting-text:focus {
  border-color: var(--jovie-orange);
  outline: none;
}

.settings-table .setting-select {
  font: inherit;
  font-size: 13px;
  padding: 6px 8px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  vertical-align: middle;
}

.settings-table .setting-select:focus {
  border-color: var(--jovie-orange);
  outline: none;
}

.save-note { margin-left: 8px; font-size: 12px; color: var(--jovie-teal); }

.save-note.save-err { color: var(--jovie-maroon); }

/* ---------- staff: schedule actions ---------- */

.sched-toolbar { display: flex; gap: 8px; margin: 0 0 14px; }

.sched-toolbar .btn-ghost { margin-left: auto; }

.field select, .field textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  outline: none;
}

.field select:focus, .field textarea:focus {
  border-color: var(--jovie-orange);
  box-shadow: 0 0 0 3px rgba(242, 107, 33, .18);
}

.btn-danger { background: var(--jovie-maroon); color: #fff; }

.btn-danger:hover { background: #55082F; }

.ev-actions {
  border-top: 1px dashed var(--line);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.ev-actions .btn-link { padding: 4px 0; }

.decline-form { width: 100%; }

.decline-form .field { margin-bottom: 10px; }

.act-msg { margin: 0; font-size: 14px; color: var(--ink-soft); }

.act-msg-err { color: var(--jovie-maroon); }

.ev-declined { opacity: .75; }

.ev-declined-note { margin: 0; color: var(--ink-soft); font-size: 14px; }

/* manage (delete availability) mode */
.manage-check { display: none; width: 20px; height: 20px; accent-color: var(--jovie-maroon); }

body.manage-mode .ev-avail .manage-check { display: inline-block; }

body.manage-mode .ev-avail { cursor: pointer; }

.manage-bar {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  z-index: 41;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 10px 16px;
  font-size: 14px;
}

/* add-availability bottom sheet */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(37, 42, 71, .45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.sheet {
  background: var(--surface);
  border-radius: var(--radius) var(--radius) 0 0;
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
}

.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }

.sheet-head h2 { margin: 0; }

.sheet-close {
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 6px 10px;
}

.field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.day-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 14px;
}

.day-cell {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font: inherit;
  font-size: 14px;
  padding: 5px 0 6px;
  text-align: center;
  cursor: pointer;
  min-height: 44px;
  color: var(--ink);
}

.day-cell small {
  display: block;
  font-size: 10px;
  color: var(--ink-soft);
  text-transform: uppercase;
}

.day-cell.sel {
  background: var(--jovie-orange);
  border-color: var(--jovie-orange);
  color: #fff;
}

.day-cell.sel small { color: rgba(255, 255, 255, .85); }

.day-cell-head, .day-cell-pad {
  border: none;
  background: none;
  min-height: auto;
  cursor: default;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 2px 0;
}

.time-range { display: flex; gap: 10px; }

.time-range .field { flex: 1; }

/* ---------- staff: home dashboard ---------- */

.action-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 0 0 10px;
  text-decoration: none;
  color: var(--ink);
}

.action-text { display: flex; flex-direction: column; gap: 2px; }

.action-text strong { font-family: var(--font-display); font-size: 15px; }

.action-text span:not(.chip) { font-size: 13px; color: var(--ink-soft); }

.action-arrow {
  margin-left: auto;
  font-size: 26px;
  line-height: 1;
  color: var(--ink-soft);
}

.action-pink { border-left-color: #E4739F; background: #FDF4F8; }

.action-amber { border-left-color: var(--jovie-amber); background: #FFF9E6; }

.action-maroon { border-left-color: var(--jovie-maroon); background: var(--maroon-tint); }

.action-sky { border-left-color: var(--jovie-sky); background: var(--sky-tint); }

.next-shift .ev-row { margin-bottom: 8px; font-size: 15px; }

.ns-when {
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ns-when strong { font-family: var(--font-display); }

.ns-more { margin-top: 6px; }

/* home: "want a regular placement?" card */
.pl-seek h2 { margin-top: 0; }

.pl-seek p { margin: 6px 0 10px; }

.pl-seek textarea {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  margin: 0 0 10px;
  resize: vertical;
}

.pl-seek textarea:focus { border-color: var(--jovie-orange); outline: none; }

.pl-seek-on { color: var(--jovie-teal); font-weight: 600; }

.pl-seek-note {
  color: var(--ink-soft);
  white-space: pre-line;
  border-left: 3px solid var(--jovie-lime);
  padding-left: 10px;
}

.pl-seek-edit summary {
  cursor: pointer;
  color: var(--jovie-teal);
  font-weight: 500;
  font-size: 14px;
}

.pl-seek-edit form { margin-top: 10px; }

.pl-seek-btns { display: flex; gap: 10px; }

.week-strip {
  text-align: center;
  color: var(--ink-soft);
  font-size: 14px;
  margin: 4px 0 0;
}

.week-strip strong {
  font-family: var(--font-display);
  color: var(--jovie-indigo);
}

/* dashboard: keep long care notes from swallowing the card */
.next-shift .ev-notes {
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- staff: open shifts feed ---------- */

.of-total { font-size: 14px; color: var(--ink-soft); align-self: center; }

.seg { display: flex; gap: 4px; margin-left: auto; }

.seg-btn {
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
}

.seg-btn.active {
  background: var(--jovie-indigo);
  border-color: var(--jovie-indigo);
  color: #fff;
}

.of-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--jovie-sky);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 8px;
}

.of-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.of-hours {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--jovie-teal);
  background: var(--teal-tint);
  padding: 1px 8px;
  border-radius: 999px;
}

.of-dist { font-size: 13px; color: var(--ink-soft); }

.of-sub { font-size: 14px; color: var(--ink); }

.of-badges { margin-bottom: 8px; }

.of-act { display: flex; align-items: center; gap: 10px; }

.of-claimed { border-left-color: #4CAF7D; background: #F3FBF6; }

.of-claimed-note {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--jovie-teal);
}

/* open-shifts loading state */
.of-loading {
  text-align: center;
  color: var(--ink-soft);
  font-size: 14px;
  padding: 36px 0;
}

.spinner {
  width: 34px;
  height: 34px;
  margin: 0 auto 12px;
  border: 3px solid var(--line);
  border-top-color: var(--jovie-orange);
  border-radius: 50%;
  animation: of-spin .8s linear infinite;
}

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

/* ---------- admin: log in as ---------- */

.badge-impersonated {
  background: var(--jovie-amber);
  color: var(--ink);
  max-width: 40vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.la-card { max-width: 720px; }

.la-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.la-row:last-child { border-bottom: none; }

.la-name { font-weight: 600; flex: 0 0 220px; }

.la-email { color: var(--ink-soft); flex: 1; overflow-wrap: anywhere; }

.la-chips { display: flex; gap: 4px; flex-wrap: wrap; }

.la-row .btn { padding: 6px 14px; }

/* ---------- staff: schedule calendar view ---------- */

.cal-months { margin-bottom: 18px; }

.cal-month { margin-bottom: 20px; }

.cal-month-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--jovie-indigo);
  padding: 0 2px 6px;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  margin-bottom: 3px;
}

.cal-head span {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  padding-bottom: 2px;
}

.cal-cell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  min-height: 52px;
  padding: 3px 3px 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  cursor: pointer;
  text-align: left;
  overflow: hidden;
}

.cal-pad { background: none; border: none; cursor: default; }

.cal-past { opacity: .55; }

.cal-today { border-color: var(--jovie-orange); border-width: 2px; }

.cal-today .cal-num { color: var(--jovie-orange); font-weight: 700; }

.cal-num {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--ink-soft);
  line-height: 1.1;
}

/* mobile: event bars are slim color slivers — no text */
.cb {
  display: block;
  height: 5px;
  border-radius: 3px;
  font-size: 0;
  overflow: hidden;
  white-space: nowrap;
}

.cb-sh-ok { background: #4CAF7D; }
.cb-sh-tentative { background: #E4739F; }
.cb-sh-muted { background: #B9BECF; }
.cb-avail { background: var(--jovie-lavender); }
.cb-avail-pending {
  background: repeating-linear-gradient(45deg, var(--jovie-lavender),
    var(--jovie-lavender) 4px, #EDE2F9 4px, #EDE2F9 8px);
}
.cb-timeoff { background: #7f9aa1; }

.cb-more {
  font-size: 9px;
  color: var(--ink-soft);
  line-height: 1;
}

/* desktop: the calendar expands — cells grow, bars become readable chips */
@media (min-width: 900px) {
  .cal-cell { min-height: 96px; padding: 5px 6px 6px; }

  .cal-num { font-size: 12px; }

  .cb {
    height: auto;
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.35;
    padding: 1px 5px;
    color: var(--ink);
    text-overflow: ellipsis;
  }

  .cb-sh-ok { background: #CDEBD8; }
  .cb-sh-tentative { background: #F8CFE2; }
  .cb-sh-muted { background: #E3E6EF; color: var(--ink-soft); }
  .cb-avail { background: #EFE3FB; }
  .cb-avail-pending {
    background: repeating-linear-gradient(45deg, #EFE3FB, #EFE3FB 6px,
      #F8F2FE 6px, #F8F2FE 12px);
  }
  .cb-timeoff { background: #DDE5E7; color: var(--ink-soft); }

  .cb-more { font-size: 10px; }
}

/* pending (saving) availability rows */
.ev-avail.ev-pending {
  border-style: dashed;
  opacity: .8;
}

.ev-saving {
  font-size: 12px;
  color: var(--jovie-plum);
  font-weight: 600;
}

/* manage mode: whole row is the tap target */
body.manage-mode .ev-avail { cursor: pointer; user-select: none; }

.ev-avail.row-sel {
  outline: 2px solid var(--jovie-maroon);
  outline-offset: -1px;
  background: var(--maroon-tint);
}

/* decline form availability checkbox */
.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 14px;
  cursor: pointer;
}

.check-row input {
  width: 20px;
  height: 20px;
  accent-color: var(--jovie-orange);
  flex-shrink: 0;
}

/* schedule page: the calendar may expand on desktop; the list stays cozy */
@media (min-width: 900px) {
  body.schedpage .shell { max-width: 960px; }

  body.schedpage .sched-toolbar { max-width: 960px; }

  body.schedpage #agenda,
  body.schedpage #more-weeks,
  body.schedpage .fine-print,
  body.schedpage .card {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* single-day modal (opened from a calendar cell) */
.day-sheet { min-height: 220px; }

.day-sheet .day.in-modal { margin: 0 0 12px; }

.day-sheet .day.in-modal > .day-head { display: none; }

/* on desktop, sheets read better centered than bottom-docked */
@media (min-width: 900px) {
  .sheet-backdrop { align-items: center; padding: 24px; }

  .sheet { border-radius: var(--radius); }
}

/* availability rows are tappable (edit/remove a single entry) */
.ev-avail { cursor: pointer; }

.ev-chevron {
  margin-left: auto;
  color: var(--ink-soft);
  font-size: 20px;
  line-height: 1;
  font-family: var(--font-display);
}

body.manage-mode .ev-chevron { display: none; }

#edit-avail-sheet .btn-danger { margin-top: 8px; }

#ea-date { font-size: 15px; color: var(--ink); margin-bottom: 12px; }

/* ---------- staff: open-shifts map ---------- */

body.shiftspage .shell {
  max-width: none;
  padding: 0;
}

.of-map-wrap {
  position: relative;
  height: calc(100dvh - var(--topbar-h) - var(--tabbar-h)
               - env(safe-area-inset-bottom));
}

#of-map { position: absolute; inset: 0; z-index: 1; }

.of-count {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow);
  padding: 7px 16px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.of-pin {
  width: 34px;
  height: 34px;
  border-radius: 50%;  /* plain circle: the spot is ~100m randomized, so the
                          pin must not appear to point anywhere exact */
  background: var(--jovie-orange);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(37, 42, 71, .35);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.of-pin-done { background: var(--jovie-teal); }

/* placement pins on the shifts map — deliberately a DIFFERENT colour + a
   star so caregivers can tell placements apart from claimable shifts */
.pl-pin {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--jovie-plum);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(37, 42, 71, .35);
  color: #fff;
  font-size: 16px;
  line-height: 28px;
  text-align: center;
  font-weight: 700;
}

.pl-pin-applied { background: var(--jovie-teal); }

/* placement detail in the shared bottom panel */
.pl-detail { padding: 2px 2px 4px; }

.pl-meta { color: var(--ink-soft); font-size: 14px; margin-bottom: 6px; }

.pl-area { font-weight: 600; color: var(--ink); }

.pl-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }

.pl-premium {
  background: var(--teal-tint);
  color: var(--jovie-teal);
  border: 1px solid var(--jovie-teal);
  font-weight: 600;
}

.pl-sched { margin: 4px 0 8px; }

.pl-sched-head {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 2px;
}

.pl-sched-row { font-size: 14px; }

.pl-sched-row b { display: inline-block; width: 34px; color: var(--jovie-indigo); }

.pl-notes {
  white-space: pre-line;
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin: 6px 0 10px;
}

/* interest questionnaire (reuses the global .overlay/.modal) */
.pl-form-modal { max-width: 560px; }

.pl-iform .pl-f { display: block; margin: 0 0 12px; }

.pl-iform .pl-f > span {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 5px;
}

.pl-req { color: var(--jovie-maroon); font-weight: 600; font-style: normal; font-size: 12px; }

.pl-iform textarea,
.pl-iform select,
.pl-ref input {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.pl-iform textarea { resize: vertical; }

.pl-refs { margin: 4px 0 12px; }

.pl-refs summary { font-size: 14px; font-weight: 600; color: var(--jovie-teal); cursor: pointer; padding: 6px 0; }

.pl-ref { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }

.pl-form-foot { display: flex; gap: 8px; margin-top: 4px; }

.pl-form-foot .btn { flex: 1; }

.of-cardpanel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  background: var(--surface);
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: 0 -4px 24px rgba(37, 42, 71, .18);
  max-height: 55%;
  overflow-y: auto;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
}

.of-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 8px;
}

.of-unmapped {
  max-width: 520px;
  margin: 14px auto;
  padding: 0 16px 24px;
}

.of-note { max-width: 520px; margin: 20px auto; }

@media (min-width: 900px) {
  .of-cardpanel {
    left: auto;
    right: 18px;
    bottom: 18px;
    width: 400px;
    border-radius: var(--radius);
    max-height: 70%;
  }
}


/* pre-claim info rows inside map day cards */
.of-info {
  border-top: 1px dashed var(--line);
  margin: 6px 0 8px;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13.5px;
}

.of-info .ev-key { flex: 0 0 92px; }

/* ---------- BH caregiver profiles (/admin/bh-caregivers) ---------- */
.bhcg-table { width: 100%; table-layout: fixed; }
.bhcg-table td { vertical-align: top; }
.bhcg-table td.bhcg-bh { background: var(--bh-navy); color: var(--bh-navy-ink); }
.bhcg-table td.bhcg-bh .cell-sub { color: var(--bh-navy-muted); }
.bhcg-table td.bhcg-bh a { color: var(--bh-navy-ink); }

.bhcg-status {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.bhcg-status-Active { background: var(--bh-gold); color: var(--bh-navy); }
.bhcg-status-EligibletoReactivate,
.bhcg-status-IneligibletoReactivate {
  background: rgba(234, 243, 248, .16);
  color: var(--bh-navy-muted);
  border: 1px solid rgba(234, 243, 248, .35);
}
.bhcg-status-Suspended { background: var(--jovie-maroon); color: #fff; }

.bhcg-ext {
  font-size: 12.5px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1px 6px;
}

.bhcg-notonbh { margin: 26px 0 8px; }
.bhcg-nob-list { display: flex; flex-wrap: wrap; gap: 8px; }
.bhcg-nob {
  background: var(--lavender, #EFEFFA);
  border: 1px solid var(--jovie-indigo);
  color: var(--jovie-indigo);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 13px;
  text-decoration: none;
}

/* edit modal */
.bhcg-modal { max-width: 760px; }
.bhcg-modal .modal-body { max-height: 72vh; overflow-y: auto; }
.bhcg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 14px;
}
.bhcg-grid label, .bhcg-bio {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
}
.bhcg-grid input, .bhcg-grid select, .bhcg-bio textarea { width: 100%; }
.bhcg-bio { margin-top: 10px; }
.bhcg-h4 {
  margin: 18px 0 6px;
  font-size: 13.5px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
}
.bhcg-attrs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px 10px;
}
.bhcg-attr { font-size: 12.5px; font-weight: 400; }
.bhcg-crow { font-size: 13px; padding: 2px 0; }
.bhcg-crow .btn { margin-left: 8px; }
.bhcg-add {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.bhcg-add input, .bhcg-add select { min-width: 0; }
.bhcg-save {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

/* ---------- BH exclusions (/admin/bh-exclusions) ---------- */
.bhex-table { width: 100%; table-layout: fixed; }
.bhex-table td { vertical-align: top; }
.bhex-table td.bhex-bh { background: var(--bh-navy); color: var(--bh-navy-ink); }
.bhex-table td.bhex-bh .cell-sub { color: var(--bh-navy-muted); }
.bhex-table td.bhex-bh a { color: var(--bh-navy-ink); }
.bhex-desc {
  font-size: 13px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bhex-state {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.bhex-state-Active { background: var(--bh-gold); color: var(--bh-navy); }
.bhex-state-Inactive { background: var(--bg); color: var(--ink-soft); border: 1px solid var(--line); }
.bhex-state-Removed { background: var(--maroon-tint); color: var(--jovie-maroon); }
.bhex-actions .btn { margin: 0 0 4px; }
.btn-danger-ghost {
  background: transparent;
  border: 1px solid var(--jovie-maroon);
  color: var(--jovie-maroon);
}
.btn-danger-ghost:hover { background: var(--maroon-tint); }

.bhex-modal { max-width: 560px; }
.bhex-modal .modal-body { max-height: 76vh; overflow-y: auto; }
.bhex-lb {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
}
.bhex-lb input, .bhex-lb select, .bhex-lb textarea { width: 100%; }
.bhex-lb select[size] { height: auto; }
.bhex-radios { display: flex; gap: 18px; font-weight: 400; color: var(--ink); }
.bhex-radios label { display: flex; align-items: center; gap: 5px; }
.bhex-dates { display: flex; gap: 14px; }
.bhex-dates .bhex-lb { flex: 1; }
.bhex-cb { display: flex; align-items: center; gap: 7px; font-size: 13.5px; }
.bhex-foot {
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  display: flex;
  justify-content: flex-end;
}


/* ---------- caregiver profile (/profile) ---------- */

body.profilepage .shell { padding-bottom: calc(var(--tabbar-h) + 120px); }

.page-sub { color: var(--ink-soft); margin: -6px 0 14px; }

.profilepage .card { margin-bottom: 14px; }
.profilepage .card h2 {
  font-family: Poppins, Inter, "Segoe UI", system-ui, sans-serif;
  font-size: 18px;
  margin: 0 0 6px;
  color: var(--jovie-indigo);
}
.card-hint { color: var(--ink-soft); font-size: 14px; margin: 0 0 12px; }

.office-switch { margin-bottom: 14px; }
.office-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 2px; }
.office-chip { text-decoration: none; }
.office-chip.chip-active {
  background: var(--jovie-indigo);
  border-color: var(--jovie-indigo);
  color: #fff;
}

.sector-map {
  height: 55vh;
  min-height: 300px;
  max-height: 560px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  overflow: hidden;
  /* own stacking context: Leaflet panes carry z-index 400-800, which would
     otherwise float over the fixed save bar and tabbar */
  position: relative;
  z-index: 1;
}

.opt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.opt-row:last-of-type { border-bottom: 0; }
.opt-main { min-width: 0; }
.opt-title { display: block; font-weight: 600; }
.opt-sub { display: block; color: var(--ink-soft); font-size: 13px; margin-top: 1px; }
.opt-row .switch { flex: 0 0 auto; }

.save-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  z-index: 40;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 10px 16px;
}
.save-bar .btn-block { max-width: 520px; margin: 0 auto; display: block; }
.save-msg {
  max-width: 520px;
  margin: 0 auto 8px;
  font-size: 14px;
  color: var(--jovie-teal);
}
.save-msg-err { color: var(--jovie-maroon); }

@media (min-width: 900px) {
  .sector-map { height: 480px; }
}

/* ---- swap v2 cards (shared: /admin/swaps + crosschecker tray) ---- */
.swt-pill.fill { background: #fdeadc; color: #a34d00; }
.swt-pill.familiar { background: #def0e4; color: #1d6b3d; }
.swt-chip.c-req { background: #f3e9fb; color: #6b3f9c; }
.swc-h { flex: none; align-self: center; font-family: var(--font-display);
         font-weight: 700; font-size: 13px; border-radius: 8px;
         padding: 1px 8px; white-space: nowrap; }
.swc-h.gain { background: #def0e4; color: #1d6b3d; }
.swc-h.lost { background: #f8d7da; color: #842029; }
.swt-cost { color: #a34d00; }
.swc-danger { color: #842029; }
.swt-actions form { display: inline; margin: 0; }
/* the Swaps page wraps its card lists in .swc-full: details always open */
.swc-full .swt-detail { display: block; }
.swc-full .swt-chev { display: none; }
.swc-full .swt-card { margin-bottom: 12px; }
.swc-msgs { margin-top: 8px; font-size: 12.5px; }
.swc-msgs summary { cursor: pointer; color: var(--jovie-indigo);
                    font-weight: 600; }
.swc-msg-card { border: 1px solid var(--line); border-radius: 8px;
                padding: 7px 11px; margin: 6px 0; background: #fbfbfe; }
.swc-msg-text { margin-top: 3px; white-space: pre-wrap;
                line-height: 1.5; }

/* ---- staff swap-offer cards (staff /swaps tab + admin offer preview) ---- */
.swp-wrap { max-width: 560px; margin: 0 auto; padding: 0 4px; }
.swp-wrap h2 { font-family: Poppins, Inter, sans-serif; font-size: 20px;
               color: var(--jovie-indigo); margin: 10px 0 4px; }
.swp-lead { color: var(--ink-soft); font-size: 13.5px; margin: 0 0 14px;
            line-height: 1.5; }
.swp-card { background: var(--surface); border: 1px solid var(--line);
            border-radius: var(--radius); box-shadow: var(--shadow);
            padding: 14px 16px; margin-bottom: 14px; }
.swp-card.focus { outline: 2px solid var(--jovie-indigo); }
.swp-req { background: #f3e9fb; color: #6b3f9c; border-radius: 10px;
           padding: 6px 11px; font-size: 13px; font-weight: 600;
           margin-bottom: 8px; display: inline-block; }
.swp-when { font-family: Poppins, Inter, sans-serif; font-weight: 600;
            font-size: 16px; }
.swp-hours { font-family: Poppins, Inter, sans-serif; font-weight: 700;
             font-size: 16px; color: #1d6b3d; }
.swp-hours.give { color: #842029; }
.swp-fam { font-size: 14px; margin: 2px 0 6px; }
.swp-row { display: flex; gap: 8px; font-size: 13.5px; margin: 3px 0;
           line-height: 1.5; }
.swp-key { color: var(--ink-soft); min-width: 64px; font-size: 12px;
           text-transform: uppercase; letter-spacing: .04em;
           padding-top: 1.5px; }
.swp-vac { border: 1px dashed var(--line); border-radius: 10px;
           padding: 8px 12px; margin: 8px 0; font-size: 13px; }
.swp-net { font-weight: 700; font-size: 14px; margin-top: 6px; }
.swp-btns { display: flex; gap: 10px; margin-top: 10px; }
.swp-days { margin: 10px 0 0; font-size: 13px; color: var(--ink-soft); }
.swp-days label { margin-right: 12px; white-space: nowrap;
                  color: var(--ink); }
.swp-btns button { flex: 1; padding: 12px 0; font-size: 15px;
                   font-weight: 700; border: 0; border-radius: 10px;
                   cursor: pointer; }
.swp-btns button[disabled] { opacity: .55; cursor: not-allowed; }
.swp-yes { background: #24784a; color: #fff; }
.swp-no  { background: #eef0f6; color: var(--ink); }
.swp-empty { color: var(--ink-soft); font-size: 14px; margin: 18px 0; }
.swp-preview-note { background: #fdf1e2; color: #9a6b1f;
                    border-radius: 10px; padding: 8px 12px;
                    font-size: 13px; margin: 0 0 12px; }