/* casualsAvailability.css — Work Availability (casual staff)
   Dark theme in the same family as newuseronboarding.css / filterTemplate.css.
   Accent is passed inline from the component (#F97316, the Staff colour). */

.ca-page, .ca-tab-pane {
  /* side gutters so the whole page is the working area and scrolls freely */
  --ca-bg: #0f172a;
  --ca-panel: #1e293b;
  --ca-line: rgba(255, 255, 255, 0.08);
  --ca-line-strong: rgba(255, 255, 255, 0.16);
  --ca-text: rgba(255, 255, 255, 0.92);
  --ca-muted: rgba(255, 255, 255, 0.55);
  --ca-faint: rgba(255, 255, 255, 0.32);
  --ca-green: #22c55e;
  --ca-red: #ef4444;
  color: var(--ca-text);
  padding: 20px 16px 120px;
  max-width: 1100px;
  margin: 0 auto;
  font-size: 0.95rem;
}
.ca-tab-pane { padding: 8px 0 40px; max-width: none; margin: 0; }
/* inside InnerTabsm / InnerTabsd the header text lines up with the builder's
   inner content (same 20px inset as .ca-builder-body), not the card border */
.ca-tab-pane .ca-head { padding: 0 20px; }
.ca-tab-pane .ca-jobs-panel, .ca-tab-pane > .ca-empty { margin-left: 0; margin-right: 0; }
@media (max-width: 480px) {
  .ca-tab-pane .ca-head { padding: 0 14px; }
}
.ca-section-title { font-size: 1.05rem; font-weight: 600; margin: 8px 0 12px; }

.ca-label {
  display: block;
  font-size: 0.78rem;
  color: var(--ca-muted);
  margin-bottom: 6px;
}

/* ── header ─────────────────────────────────────────────────── */
.ca-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.ca-title {
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.ca-head-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--ca-muted);
  font-size: 0.86rem;
}
.ca-head-date { color: var(--ca-faint); }
.ca-wwc {
  border: 1px solid rgba(34, 197, 94, 0.45);
  color: var(--ca-green);
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 0.78rem;
}
.ca-head-actions { display: flex; align-items: center; gap: 14px; }

.ca-bell {
  position: relative;
  color: var(--ca-faint);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid var(--ca-line);
}
.ca-bell.live { color: var(--ca-text); border-color: var(--ca-line-strong); }
.ca-bell-count {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  color: #0f172a;
  font-size: 0.74rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 3px var(--ca-bg);
}

/* ── buttons ────────────────────────────────────────────────── */
.ca-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 120ms ease, opacity 120ms ease, background 120ms ease;
}
.ca-btn:active { transform: translateY(1px); }
.ca-btn:disabled { opacity: 0.55; cursor: default; }
.ca-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ca-btn.solid { color: #0f172a; }
.ca-btn.ghost { background: transparent; color: var(--ca-muted); border-color: var(--ca-line-strong); }
.ca-btn.ghost:hover { color: var(--ca-text); }
.ca-btn.accept { background: rgba(34, 197, 94, 0.14); color: var(--ca-green); border-color: rgba(34, 197, 94, 0.4); }
.ca-btn.decline { background: rgba(239, 68, 68, 0.12); color: #f87171; border-color: rgba(239, 68, 68, 0.35); }
.ca-link {
  background: none;
  border: none;
  color: var(--ca-muted);
  font-size: 0.8rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── empty / locked / skeleton ──────────────────────────────── */
.ca-empty, .ca-locked {
  border: 1px dashed var(--ca-line-strong);
  border-radius: 14px;
  padding: 28px 22px;
  color: var(--ca-muted);
  max-width: 560px;
}
.ca-empty p, .ca-locked p { margin: 8px 0 0; line-height: 1.5; }
.ca-empty-title, .ca-locked-title { color: var(--ca-text); font-weight: 600; font-size: 1.02rem; }
.ca-skeleton {
  height: 56px;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--ca-panel), #273449, var(--ca-panel));
  background-size: 200% 100%;
  animation: ca-shimmer 1.4s infinite;
  margin-bottom: 12px;
}
.ca-skeleton.short { width: 60%; height: 40px; }
@keyframes ca-shimmer { to { background-position: -200% 0; } }

/* ── table ──────────────────────────────────────────────────── */
.ca-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--ca-line);
  border-radius: 14px;
  background: linear-gradient(135deg, var(--ca-panel) 0%, var(--ca-bg) 100%);
}
.ca-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.ca-table th {
  text-align: left;
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--ca-muted);
  padding: 12px 14px;
  border-bottom: 1px solid var(--ca-line-strong);
  white-space: nowrap;
}
.ca-table td { padding: 12px 14px; border-bottom: 1px solid var(--ca-line); vertical-align: top; }
.ca-tr { cursor: pointer; }
.ca-tr:hover td { background: rgba(255, 255, 255, 0.025); }
.ca-tr.open td { background: rgba(255, 255, 255, 0.04); border-bottom-color: transparent; }
.ca-td-label { font-weight: 600; }
.ca-td-sub { color: var(--ca-muted); font-size: 0.82rem; margin-top: 2px; }
.ca-td-days { display: flex; flex-wrap: wrap; gap: 4px; max-width: 260px; }
.ca-chip-num { display: none; }     /* chips show Mon Tue Wed… on every device */
.ca-td-chip {
  border: 1px solid var(--ca-line-strong);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 0.76rem;
  color: var(--ca-muted);
  white-space: nowrap;
}
.ca-th-jobs, .ca-td-jobs { text-align: center; }
.ca-count {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.82rem;
  color: #0f172a;
  background: var(--ca-muted);
}
.ca-count.none { background: transparent; color: var(--ca-faint); border: 1px solid var(--ca-line); }
.ca-tr-detail td { padding: 0 14px 18px; background: rgba(255, 255, 255, 0.04); }

.ca-slots { width: auto; min-width: 360px; border-collapse: collapse; margin: 6px 0 14px; }
.ca-slots th { padding: 6px 12px 6px 0; border: none; font-size: 0.74rem; }
.ca-slots td { padding: 6px 12px 6px 0; border: none; font-size: 0.88rem; }

/* ── jobs (assignments) ─────────────────────────────────────── */
.ca-no-jobs { color: var(--ca-faint); font-size: 0.88rem; padding-top: 10px; }
.ca-jobs-title { color: var(--ca-muted); font-size: 0.85rem; margin: 10px 0 10px; }

/* ── FoldGroup (components/shared/FoldGroup.jsx): a folded group of records ──────────
   Supervisor: Closed Jobs by date, Responses by status. Casual: Assigned Jobs by stage,
   Jobs Completed by month. Closed shows the first two records; open shows every one,
   capped at 60vh and scrolling inside. One open at a time is the caller's rule.
   --fold-accent is set by the component (supervisor cyan, casual orange). */
.ca-fold {
  --fold-accent: #22d3ee;
  margin-bottom: 14px;
  border: 1px solid var(--ca-line-strong);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}
.ca-fold.is-open { background: rgba(255, 255, 255, 0.035); border-color: color-mix(in srgb, var(--fold-accent) 35%, transparent); }
.ca-fold-head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px 14px; border: 0; background: none; color: var(--ca-text);
  font: inherit; font-weight: 600; text-align: left; cursor: pointer;
}
.ca-fold-head:hover { background: rgba(255, 255, 255, 0.04); }
.ca-fold-caret { flex: 0 0 auto; color: var(--fold-accent); transition: transform 150ms ease; }
.ca-fold.is-open .ca-fold-caret { transform: rotate(90deg); }
.ca-fold-title { flex: 1 1 auto; min-width: 0; }
.ca-fold-count { color: var(--ca-faint); font-weight: 400; font-size: 0.84rem; white-space: nowrap; }
.ca-fold-hint { flex: 0 0 auto; color: var(--fold-accent); font-size: 0.82rem; font-weight: 500; white-space: nowrap; }
.ca-fold-body { padding: 0 14px 14px; }
/* an OPEN fold whose records run past ~half the screen scrolls inside the fold instead of
   pushing the next group off the page: one bounded region capped at 60vh (see form-height) */
.ca-fold.is-open .ca-fold-body {
  max-height: 60vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-top: 2px;
}
@media (max-width: 560px) {
  .ca-fold-head { flex-wrap: wrap; }
  .ca-fold-hint { width: 100%; padding-left: 24px; }          /* under the title, aligned past the caret */
}
/* Messages (casual and supervisor, both devices): the thread list scrolls inside 60vh rather
   than running down the page. No folding here. */
.ca-messages .ca-table-wrap { max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.ca-jobs { display: grid; gap: 10px; }
.ca-job {
  border: 1px solid var(--ca-line-strong);
  border-left: 3px solid var(--ca-line-strong);
  border-radius: 12px;
  padding: 14px 14px 12px;
  background: rgba(15, 23, 42, 0.6);
}
.ca-job-pending { border-left-color: #F97316; }
.ca-job-accepted { border-left-color: var(--ca-green); opacity: 0.9; }
.ca-job-declined { border-left-color: var(--ca-red); opacity: 0.65; }
.ca-job-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}
.ca-job-wide { grid-column: 1 / -1; }
.ca-job-field input, .ca-job-field textarea, .ca-readonly {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--ca-line);
  border-radius: 8px;
  color: var(--ca-text);
  padding: 9px 11px;
  font-size: 0.9rem;
  font-family: inherit;
  resize: none;
}
.ca-job-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.ca-job-date { color: var(--ca-muted); font-size: 0.84rem; }
.ca-job-actions { display: flex; gap: 8px; }
.ca-status { font-size: 0.84rem; font-weight: 600; }
.ca-status.accepted { color: var(--ca-green); }
.ca-status.declined { color: #f87171; }

/* ── builder section (on-page, replaces the modal) ──────────── */
.ca-builder {
  border: 1px solid var(--ca-line-strong);
  border-radius: 20px;
  background: linear-gradient(160deg, #1e293b 0%, #0f172a 100%);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  margin: 0 0 24px;
  scroll-margin-top: 12px;
  overflow: visible;                 /* open CustomSelect lists spill freely */
}
.ca-builder-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--ca-line);
}
.ca-builder-title { font-size: 1.15rem; font-weight: 600; }
.ca-builder-sub { color: var(--ca-muted); font-size: 0.85rem; margin-top: 3px; }
.ca-close {
  background: transparent;
  border: 1px solid var(--ca-line);
  color: var(--ca-muted);
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.ca-close:hover { color: var(--ca-text); }
.ca-builder-body { padding: 16px 20px; overflow: visible; }
.ca-builder-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--ca-line);
}
@keyframes ca-rise { from { transform: translateY(24px); opacity: 0; } }
/* toasts come DOWN from the top — ca-rise is the mode buttons' upward one.
   Named ca-toast-drop, not ca-drop: .ca-rec already owns that name below. */
@keyframes ca-toast-drop { from { transform: translateY(-24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ca-mode, .ca-toast { animation: none; }
}
/* ── mode buttons ───────────────────────────────────────────── */
/* every range card the same height, so tops and bottoms line up across
   both rows; the last cell of row 2 is simply left empty */
.ca-modes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; grid-auto-rows: 1fr; align-items: stretch; }
.ca-modes .ca-mode { height: 100%; }
.ca-modes .ca-mode:last-child { grid-column: 1 / -1; }
@media (min-width: 560px) {
  .ca-modes { grid-template-columns: repeat(3, 1fr); }
  .ca-modes .ca-mode:last-child { grid-column: auto; }
}
.ca-mode {
  text-align: left;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--ca-line-strong);
  border-radius: 14px;
  padding: 18px 16px;
  color: var(--ca-text);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 92px;
  position: relative;
  overflow: hidden;
  transition: border-color 150ms ease, transform 150ms ease;
  animation: ca-rise 260ms both;
}
.ca-mode::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--accent);
  opacity: 0.8;
}
.ca-mode:hover { border-color: var(--accent); transform: translateY(-1px); }
/* a range whose every day is already posted: one row per date is the rule */
.ca-mode.is-taken { opacity: 0.45; cursor: not-allowed; }
.ca-mode.is-taken:hover { border-color: var(--ca-line-strong); transform: none; }
.ca-mode-taken, .ca-mode-free { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; margin-top: 2px; }
.ca-mode-taken { color: var(--ca-faint); text-transform: uppercase; }
.ca-mode-free { color: #86efac; }
.ca-mode:focus-visible { outline: 2px solid var(--accent); }
.ca-mode-label { font-size: 1.05rem; font-weight: 600; }
.ca-mode-hint { font-size: 0.8rem; color: var(--ca-muted); }

/* ── block / accordion ──────────────────────────────────────── */
.ca-block {
  border: 1px solid var(--ca-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  margin-bottom: 12px;
}
.ca-block-body { padding: 16px; }
.ca-acc.has-error { border-color: rgba(239, 68, 68, 0.5); }
.ca-acc-head {
  width: 100%;
  display: grid;
  grid-template-columns: 4px auto 1fr auto 18px;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: none;
  color: var(--ca-text);
  padding: 14px 16px 14px 12px;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.ca-acc-bar { width: 4px; height: 26px; border-radius: 2px; }
.ca-acc-title { font-weight: 600; }
.ca-acc-range { color: var(--ca-muted); font-size: 0.84rem; }
.ca-acc-count { font-size: 0.8rem; color: var(--ca-faint); white-space: nowrap; }
.ca-acc-chev { color: var(--ca-faint); transition: transform 180ms ease; }
.ca-acc.open .ca-acc-chev { transform: rotate(180deg); }
.ca-acc .ca-block-body { border-top: 1px solid var(--ca-line); }

/* location + dates */
/* Job Availability Location above Dates on phones AND iPads; side by side only on desktop */
.ca-meta { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 16px; }
.ca-daterange {
  padding: 9px 11px;
  border: 1px dashed var(--ca-line-strong);
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--ca-text);
}

/* day chips */
.ca-days-head { display: flex; justify-content: space-between; align-items: baseline; }
.ca-days { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ca-day {
  width: 58px;
  height: 58px;
  border-radius: 12px;
  border: 1px solid var(--ca-line-strong);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ca-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  font: inherit;
  transition: transform 120ms ease, background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.ca-day:hover { color: var(--ca-text); }
.ca-day:active { transform: scale(0.96); }
.ca-day:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ca-day.today .ca-day-num { text-decoration: underline; text-underline-offset: 3px; }
.ca-day-name { font-size: 0.74rem; }
.ca-day-num { font-size: 1.1rem; font-weight: 600; line-height: 1; }

/* checkbox */
.ca-check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 14px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--ca-muted);
  user-select: none;
}
.ca-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.ca-check-box {
  width: 20px; height: 20px;
  border-radius: 6px;
  border: 1px solid var(--ca-line-strong);
  background: rgba(255, 255, 255, 0.04);
  position: relative;
  flex-shrink: 0;
}
.ca-check input:checked + .ca-check-box::after {
  content: '';
  position: absolute;
  left: 6px; top: 2px;
  width: 5px; height: 10px;
  border: solid #0f172a;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.ca-check input:focus-visible + .ca-check-box { outline: 2px solid #fff; outline-offset: 2px; }

/* time rows */
.ca-row {
  border-top: 1px solid var(--ca-line);
  padding: 14px 0 6px;
}
.ca-row-error { border-top-color: rgba(239, 68, 68, 0.45); }
.ca-row-title { font-size: 0.86rem; color: var(--ca-muted); margin-bottom: 10px; }
/* Start above End on phones AND iPads; side by side only on desktop */
.ca-row-times { display: grid; grid-template-columns: 1fr; gap: 12px; }
.ca-row .ob-field { margin: 0; }

/* radius slider */
.ca-radius { margin-top: 12px; }
.ca-radius-head { display: flex; justify-content: space-between; align-items: baseline; }
.ca-radius-value { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1rem; }
.ca-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent) 0 var(--fill), rgba(255, 255, 255, 0.12) var(--fill) 100%);
  outline: none;
  margin: 8px 0 4px;
  cursor: pointer;
}
.ca-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid #0f172a;
  box-shadow: 0 0 0 1px var(--accent);
  transition: transform 100ms ease;
}
.ca-range::-webkit-slider-thumb:active { transform: scale(1.15); }
.ca-range::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid #0f172a;
  box-shadow: 0 0 0 1px var(--accent);
}
.ca-range:focus-visible::-webkit-slider-thumb { outline: 2px solid #fff; outline-offset: 2px; }
.ca-range-ticks { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--ca-faint); }

.ca-error { color: #f87171; font-size: 0.82rem; margin-top: 8px; }
.ca-error-global { margin-top: 4px; }

/* ── review ─────────────────────────────────────────────────── */
.ca-review { display: grid; gap: 12px; }
.ca-review-block {
  border: 1px solid var(--ca-line-strong);
  border-radius: 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
}
.ca-review-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 10px; }
.ca-review-title { font-weight: 600; }
.ca-review-range { color: var(--ca-muted); font-size: 0.86rem; }
.ca-review-loc { margin-left: auto; color: var(--ca-muted); font-size: 0.86rem; }
.ca-review-table { width: 100%; border-collapse: collapse; }
.ca-review-table th { text-align: left; font-weight: 500; font-size: 0.76rem; color: var(--ca-muted); padding: 4px 8px 6px 0; }
.ca-review-table td { padding: 7px 8px 7px 0; border-top: 1px solid var(--ca-line); font-size: 0.9rem; }
.ca-review-days { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ca-review-chip { border: 1px solid; border-radius: 8px; padding: 3px 9px; font-size: 0.82rem; font-weight: 600; }
.ca-review-line { font-size: 0.95rem; }

/* ── toast ──────────────────────────────────────────────────── */
/* House rule: toasts drop in from the TOP of the screen, never the bottom.
   The bottom belongs to FooterNav (z-index 9999) and the page's own padding,
   and a bottom toast is easy to miss on a phone. Every toast also sits above
   .ca-overlay-top (10090) so one fired from inside a modal — a message sent
   from a thread, a job accepted from a record — is still readable. */
.ca-toast {
  position: fixed;
  left: 50%;
  top: calc(14px + env(safe-area-inset-top, 0px));
  transform: translateX(-50%);
  /* solid, not tinted glass: the toast floats over the page and over modal
     backdrops, so anything see-through made it hard to read. */
  background: #07321f;
  border: 1px solid rgba(34, 197, 94, 0.75);
  color: #ccfbd5;
  padding: 11px 18px;
  border-radius: 12px;
  font-weight: 600;
  box-shadow: 0 10px 28px rgba(2, 6, 23, 0.6);
  z-index: 10200;
  animation: ca-toast-drop 200ms ease;
}

/* ── small screens ──────────────────────────────────────────── */
@media (max-width: 480px) {
  .ca-page { padding: 16px 12px 120px; }
  .ca-builder-body { padding: 14px 12px; }
  .ca-builder-head, .ca-builder-foot { padding-left: 14px; padding-right: 14px; }
  .ca-head { align-items: stretch; }
  .ca-head-actions { justify-content: space-between; }
  .ca-create { flex: 1; justify-content: center; }
  .ca-day { width: calc((100% - 6 * 8px) / 7); min-width: 40px; height: 54px; }
  .ca-job-grid { grid-template-columns: 1fr; }
  .ca-acc-head { grid-template-columns: 4px 1fr auto 18px; }
  .ca-acc-range { grid-column: 2; grid-row: 2; }
  .ca-acc-title { grid-column: 2; }
  .ca-acc-count { grid-column: 3; grid-row: 1 / span 2; }
  .ca-acc-chev { grid-column: 4; grid-row: 1 / span 2; }
}

/* ── Home Base card (top of the build step) ─────────────────── */
.ca-home {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--ca-line-strong);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: rgba(255, 255, 255, 0.03);
}
.ca-home-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 1px solid;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.ca-home-text .ca-label { margin-bottom: 2px; }
.ca-home-value { font-weight: 600; font-size: 0.98rem; }
.ca-home-others { font-weight: 400; color: var(--ca-muted); font-size: 0.86rem; }
.ca-home-unknown { font-weight: 400; color: var(--ca-muted); font-size: 0.88rem; }
.ca-head-home { color: var(--ca-muted); }

/* ── Job Location autocomplete ──────────────────────────────── */
.ca-ac { position: relative; }
.ca-ac.open { z-index: 60; }                  /* above the sticky modal footer */
.ca-ac-field { position: relative; }
.ca-ac-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--ca-line-strong);
  border-radius: 8px;
  color: var(--ca-text);
  padding: 9px 38px 9px 11px;
  font-size: 0.92rem;
  font-family: inherit;
}
.ca-ac-input::placeholder { color: var(--ca-faint); }
.ca-ac-input:focus { outline: none; border-color: rgba(255, 255, 255, 0.4); }
.ca-ac-input:disabled { opacity: 0.6; }
.ca-ac-toggle {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  border: none; background: transparent;
  color: var(--ca-muted);
  display: grid; place-items: center;
  cursor: pointer;
  border-radius: 6px;
}
.ca-ac.open .ca-ac-toggle svg { transform: rotate(180deg); }
.ca-ac-list {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 6px);
  margin: 0; padding: 6px;
  list-style: none;
  max-height: 300px;
  overflow-y: auto;
  background: #0b1120;
  border: 1px solid var(--ca-line-strong);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  z-index: 60;
}
.ca-ac-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 0.92rem;
}
.ca-ac-item.hi { background: rgba(255, 255, 255, 0.06); }
.ca-ac-name mark { background: transparent; font-weight: 700; }
.ca-ac-meta { color: var(--ca-faint); font-size: 0.78rem; white-space: nowrap; }
.ca-ac-empty { padding: 10px; color: var(--ca-muted); font-size: 0.86rem; }

/* ── radius estimate line ───────────────────────────────────── */
.ca-radius-hint {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--ca-muted);
}
.ca-radius-hint b { color: var(--ca-text); }

/* ── review extras ──────────────────────────────────────────── */
.ca-review-home { color: var(--ca-muted); font-size: 0.9rem; margin-bottom: 2px; }
.ca-review-home b { color: var(--ca-text); }
.ca-review-km { color: var(--ca-faint); }

/* Job Location CustomSelect: its open list sits above the sticky footer,
   and the field keeps the same vertical rhythm as the Dates box beside it. */
.ca-jobloc { position: relative; }
.ca-jobloc:focus-within, .ca-jobloc:has([class*="open"]) { z-index: 60; }
.ca-jobloc .ob-field { margin: 0; }

/* ── CustomSelect inside the builder: never clipped ─────────────
   The modal chain (.ca-modal → body → block → row) is overflow: visible,
   so the only thing that can cover an open list is a later sibling with a
   stacking context — the sticky footer (z 5) or the next row's inputs.
   Any select that is open / focused is lifted well above both, and its
   list above that again. Selectors match the open state by focus,
   aria-expanded, or an "open"/"active" class, so they hold whatever
   CustomSelect names its internals. */
.ca-builder .ob-field { position: relative; }
.ca-builder .ob-field:focus-within,
.ca-builder .ob-field:has([aria-expanded="true"]),
.ca-builder .ob-field:has([class*="open"]),
.ca-builder .ob-field:has([class*="active"]) { z-index: 200; }
.ca-builder .ob-field [class*="dropdown"],
.ca-builder .ob-field [class*="options"],
.ca-builder .ob-field [class*="menu"],
.ca-builder .ob-field [role="listbox"] { z-index: 210; }

/* ── desktop (≥1025px): two-column fields, InnerTabsd layout ─── */
@media (min-width: 1025px) {
  .ca-meta { grid-template-columns: 1fr 1fr; }
  .ca-row-times { grid-template-columns: 1fr 1fr; }
  /* inside InnerTabsd's full-width content area */
  .ca-tab-pane { padding: 8px 0 40px; color: rgba(255, 255, 255, 0.92); }
  .ca-tab-pane .ca-builder { max-width: 960px; margin: 0 auto 24px; }
  .ca-tab-pane .ca-table-wrap, .ca-tab-pane .ca-empty, .ca-tab-pane .ca-jobs-panel { max-width: 1100px; margin: 0 auto; }
  .ca-tab-pane .ca-head { max-width: 1100px; margin: 0 auto 20px; }
}

/* why Accept is greyed out — the day's jobs run past the hours you gave.
   .ca-job-row is a 84px / 1fr / auto grid, so this has to span all three or
   it lands in the time column and wraps one word per line. */
.ca-job-blocked { grid-column: 1 / -1; }
.ca-job-blocked:empty { display: none; }
.ca-blocked {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding: 9px 11px;
  border: 1px solid rgba(251, 191, 36, 0.45);
  border-radius: 10px;
  background: rgba(251, 191, 36, 0.08);
  color: #fcd34d;
  font-size: 0.84rem;
  line-height: 1.45;
}
.ca-blocked svg { flex: 0 0 auto; margin-top: 1px; }
.ca-btn.accept:disabled { opacity: 0.4; cursor: not-allowed; }

.ca-toast-error {
  background: #3d1013;
  border-color: rgba(239, 68, 68, 0.75);
  color: #fedada;
  cursor: pointer;
}

/* Several toasts can be live at once — the action ("Job accepted") and the
   lifecycle-email one ("Email sent to Jai for Job Accepted"). They stack
   downward from the top, oldest first, so a new one never covers the last. */
.ca-toast-stack {
  position: fixed;
  left: 50%;
  top: calc(14px + env(safe-area-inset-top, 0px));
  transform: translateX(-50%);
  z-index: 10200;                    /* above .ca-overlay-top (10090) and FooterNav (9999) */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: min(92vw, 560px);
  pointer-events: none;
}

.ca-toast-stack .ca-toast {
  position: static;
  left: auto;
  top: auto;
  transform: none;
  pointer-events: auto;
  cursor: pointer;
  text-align: center;
  max-width: 100%;
}
.ca-status.approved { color: #22c55e; }
.ca-status.cancelled { color: rgba(255, 255, 255, 0.45); }
.ca-job-approved { border-left-color: #22c55e; }
.ca-job-cancelled { border-left-color: rgba(255, 255, 255, 0.25); opacity: 0.55; }

/* ── readable entries ───────────────────────────────────────── */
.ca-sentence {
  margin: 12px 0 10px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ca-text);
}
.ca-rel { color: var(--ca-faint); font-size: 0.8rem; }
.ca-avail-status {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  vertical-align: middle;
  border: 1px solid;
}
.ca-avail-status.open      { color: #86efac; border-color: rgba(34, 197, 94, 0.45); }
.ca-avail-status.assigned  { color: #F97316; border-color: rgba(249, 115, 22, 0.5); }
.ca-avail-status.withdrawn { color: var(--ca-faint); border-color: var(--ca-line); }
.ca-avail-status.expired   { color: var(--ca-faint); border-color: var(--ca-line); }

/* ── phone + iPad (< 1025px): each entry becomes a card ─────────
   Same markup as the desktop table; the cells stack with their column
   name shown small on the left, so nothing needs sideways scrolling. */
@media (max-width: 1024px) {
  .ca-table-wrap { border: none; background: transparent; overflow: visible; }
  .ca-table { min-width: 0; display: block; }
  .ca-table thead { display: none; }
  .ca-table tbody { display: block; }
  .ca-table tr.ca-tr {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
      "loc   status jobs"
      "dates days   days"
      "time  radius radius";
    align-items: center;
    gap: 8px 12px;
    padding: 14px 14px 10px;
    border: 1px solid var(--ca-line-strong);
    border-radius: 14px;
    background: linear-gradient(135deg, var(--ca-panel) 0%, var(--ca-bg) 100%);
  }
  .ca-table tr.ca-tr td { display: block; padding: 0; border: none; background: transparent !important; }
  /* row 1: suburb + status …………………………… count */
  .ca-td-loc    { grid-area: loc; }
  .ca-td-loc .ca-td-label { font-size: 1.05rem; }
  .ca-td-status { grid-area: status; text-align: right; }
  .ca-td-jobs   { grid-area: jobs; text-align: right; }
  /* row 2: date range …………………………… day chips (names only) */
  .ca-td-dates  { grid-area: dates; white-space: normal; color: var(--ca-text); }
  .ca-td-dayscell { grid-area: days; }
  .ca-td-days { max-width: none; margin: 0; justify-content: flex-end; }
  /* row 3: start – end …………………………… home – job (caption and value left-aligned together) */
  .ca-td-time   { grid-area: time; }
  .ca-td-radius { grid-area: radius; text-align: left; justify-self: end; }
  /* small column name before the value, for the cells that need it */
  .ca-td-time::before, .ca-td-radius::before {
    content: attr(data-label);
    display: block;
    font-size: 0.72rem;
    color: var(--ca-muted);
    margin-bottom: 2px;
  }
  /* footer link attached under the card */
  .ca-table tr.ca-tr { margin-bottom: 0; border-radius: 14px 14px 0 0; border-bottom: none; }
  .ca-table tr.ca-tr-foot { display: block; margin-bottom: 12px; }
  .ca-table tr.ca-tr-foot td {
    display: block;
    padding: 0;
    border: 1px solid var(--ca-line-strong);
    border-top: 1px solid var(--ca-line);
    border-radius: 0 0 14px 14px;
    background: linear-gradient(135deg, var(--ca-panel) 0%, var(--ca-bg) 100%);
  }
}

/* ── record list: desktop row + footer link, status corner ───── */
.ca-tr { cursor: pointer; }
.ca-tr td { border-bottom: none; padding-bottom: 6px; }
@media (min-width: 1025px) {
  /* space between records: the footer row's bottom border, then a clear gap */
  .ca-table { border-collapse: separate; border-spacing: 0; }
  .ca-tr td { padding-top: 16px; }
  .ca-tr-foot td { padding-bottom: 14px; border-bottom: 2px solid var(--ca-line-strong); }
  .ca-tr-foot + .ca-tr td { border-top: 14px solid transparent; }   /* the gap itself */
  .ca-tr-foot:last-child td { border-bottom: none; }

  /* sticky column headings: the wrapper must not be its own scroll container,
     so the header sticks to whatever scrolls the page (InnerTabsd's content
     area on the d page, the window elsewhere) */
  .ca-table-wrap { overflow: visible; }
  .ca-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #1c2740;                       /* solid so rows slide underneath */
    box-shadow: 0 1px 0 var(--ca-line-strong); /* keeps the divider while stuck */
  }
  .ca-table thead th:first-child { border-top-left-radius: 14px; }
  .ca-table thead th:last-child  { border-top-right-radius: 14px; }
}
.ca-td-loc .ca-td-label { font-size: 1.02rem; }
.ca-td-dates { white-space: nowrap; }
.ca-th-jobs, .ca-td-jobs, .ca-th-status, .ca-td-status { text-align: left; white-space: nowrap; }
.ca-td-status .ca-avail-status { margin-left: 0; }
.ca-td-jobs .ca-count { margin-left: 0; }
.ca-tr-foot { cursor: pointer; }
.ca-tr-foot td { padding: 0 14px 10px; border-bottom: 2px solid var(--ca-line-strong); }
.ca-tr:hover td, .ca-tr-foot:hover td { background: rgba(255, 255, 255, 0.025); }
.ca-view-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 6px 0 0;
  color: var(--ca-muted);
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
}
.ca-tr-foot:hover .ca-view-link { color: var(--ca-text); }
@media (max-width: 1024px) {
  .ca-tr-foot td { border-bottom: none; padding: 0 14px 10px; }
  .ca-view-link { width: 100%; justify-content: center; padding: 10px 0 2px; }
}

/* ── job-messages table on phones: the "Click here to view messages" footer row folds into a
   chevron on the card itself. The card is already the tap target (onClick on the row), so the
   footer only doubled each record's height. Scoped to .ca-msg-table: the availability table
   and the other record lists keep their footer row. ── */
@media (max-width: 560px) {
  .ca-msg-table tr.ca-tr-foot { display: none; }
  .ca-msg-table tr.ca-tr {
    position: relative;
    margin-bottom: 12px;
    border-radius: 14px;
    border-bottom: 1px solid var(--ca-line-strong);
    padding-right: 40px;                      /* room for the chevron */
  }
  .ca-msg-table tr.ca-tr::after {             /* absolutely positioned: not a grid item */
    content: '';
    position: absolute;
    right: 18px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--ca-muted);
    border-bottom: 2px solid var(--ca-muted);
    transform: translateY(-50%) rotate(-45deg);
  }
}

/* ── record modal (read-only; no dropdowns inside) ───────────── */
.ca-overlay {
  position: fixed;
  inset: 0;
  /* Phone layout (InnerTabsm) publishes --fr-modal-top = top of its content panel, so a
     pop-up sits UNDER the TabBar, the inner tabs and the info bar instead of hiding them.
     Desktop pages never set it, so there the overlay still covers the whole screen.
     --fr-modal-max (also from InnerTabs, on <html>) is the height a modal may use below that edge. */
  top: var(--fr-modal-top, 0px);
  z-index: 10050;                    /* above FooterNav (9999) */
  background: rgba(2, 6, 23, 0.72);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16px 12px calc(84px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
}
.ca-rec {
  --ca-line: rgba(255, 255, 255, 0.08);
  --ca-line-strong: rgba(255, 255, 255, 0.16);
  --ca-text: rgba(255, 255, 255, 0.92);
  --ca-muted: rgba(255, 255, 255, 0.55);
  --ca-faint: rgba(255, 255, 255, 0.32);
  color: var(--ca-text);
  width: 100%;
  max-width: 640px;
  border: 1px solid var(--ca-line-strong);
  border-radius: 20px;
  background: linear-gradient(160deg, #1e293b 0%, #0f172a 100%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: ca-drop 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes ca-drop { from { transform: translateY(-16px); opacity: 0; } }
.ca-rec-head {
  position: relative;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--ca-line);
  padding-right: 120px;
}
.ca-rec-title { font-size: 1.15rem; font-weight: 600; line-height: 1.35; }
.ca-rec-dates { font-weight: 500; color: var(--ca-text); }
.ca-rec-dot { color: var(--ca-faint); font-weight: 400; }
.ca-rec-sub {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.98rem;
}
.ca-rec-home, .ca-rec-job { font-weight: 600; }
.ca-rec-arrow { color: #F97316; flex-shrink: 0; }
.ca-rec-km { color: var(--ca-muted); font-size: 0.86rem; margin-left: 2px; }
/* phone: the title wraps onto two lines cleanly — "3 days" then the dates */
@media (max-width: 480px) {
  .ca-rec-head { padding-right: 20px; }
  .ca-rec-status { position: static; display: inline-block; margin-top: 10px; }
  .ca-rec-title .ca-rec-dot { display: none; }
  .ca-rec-dates { display: block; font-size: 0.95rem; }
}
.ca-rec-status { position: absolute; top: 18px; right: 20px; }
/* the My Availability record: 640px grown by half on each side (1280px), inside the viewport */
.ca-rec.ca-rec-wide { max-width: min(1280px, 96vw); }

/* ── Job Messages bell ──────────────────────────────────────────
   In the Work availability header and in each availability record, so a
   casual can read and answer a job message without changing tabs. */
/* ca-msgbtn, deliberately NOT ca-bell: MessagesPanel owns .ca-bell for its
   inline 30x30 icon bells, and reusing that name collapsed their icons. */
.ca-msgbtn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 7px 5px 16px;
  border: 1px solid var(--ca-line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ca-text);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.ca-msgbtn:hover { border-color: var(--ca-accent, #22d3ee); background: rgba(34, 211, 238, 0.1); }
/* the icon sits in its own circle at the right end of the pill */
.ca-msgbtn-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(34, 211, 238, 0.14);
  color: var(--ca-accent, #22d3ee);
}
.ca-msgbtn-dot {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: #F97316;
  color: #0f172a;
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
}

/* the header row: title on the left, bell hard right */
.ca-head-msg { order: 3; margin-left: auto; padding-right: 4px; }

/* bell + status badge share the record's top-right corner */
.ca-rec-head-actions { padding-right: 250px; }
.ca-rec-actions { position: absolute; top: 14px; right: 20px; display: flex; align-items: center; gap: 14px; }
.ca-rec-actions .ca-rec-status { position: static; top: auto; right: auto; }

/* ── the Job Messages modal ─────────────────────────────────── */
.ca-msg-modal { max-width: 860px; display: flex; flex-direction: column; max-height: var(--fr-modal-max, 82vh); overflow: hidden; }
.ca-msg-modal > .ca-rec-head { flex: 0 0 auto; }
.ca-msg-scroll { flex: 1 1 auto; min-height: 0; max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; padding: 0 12px; }
.ca-msg-modal > .ca-rec-foot { flex: 0 0 auto; border-top: 1px solid var(--ca-line); }

@media (max-width: 560px) {
  .ca-rec-head-actions { padding-right: 20px; }
  .ca-rec-actions { position: static; margin-top: 12px; }
  .ca-msgbtn-label { display: none; }          /* icon only when space is tight */
  .ca-msgbtn { padding: 4px; }
}

/* ── jobs grouped by date inside an availability record ───────────
   Each date gets one of ten colours (--day); the job rows inside take it on
   their left edge so a row is instantly tied to its day. The amber note sits
   on the group's face, once, instead of repeating under every row. */
.ca-daygrp {
  border: 1px solid var(--ca-line-strong);
  border-left: 3px solid var(--day, var(--ca-line-strong));
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  margin-bottom: 10px;
  overflow: hidden;
}
.ca-daygrp.is-open { background: rgba(255, 255, 255, 0.035); }
.ca-daygrp-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  background: none;
  color: var(--ca-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ca-daygrp-head:hover { background: rgba(255, 255, 255, 0.04); }
.ca-daygrp-caret { flex: 0 0 auto; color: var(--day, var(--ca-text)); transition: transform 150ms ease; }
.ca-daygrp.is-open .ca-daygrp-caret { transform: rotate(90deg); }
.ca-daygrp-title { font-weight: 600; color: var(--day, var(--ca-text)); }
.ca-daygrp-count {
  flex: 0 0 auto;
  min-width: 20px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ca-muted);
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
}
/* the one amber line for the whole day */
.ca-daygrp-note {
  flex: 1 1 100%;
  color: #fcd34d;
  font-size: 0.8rem;
  line-height: 1.45;
  white-space: normal;
}
/* the day-colour call to action, under the amber line */
.ca-daygrp-cta {
  flex: 1 1 100%;
  color: var(--day, var(--ca-text));
  font-size: 0.8rem;
  font-weight: 600;
}
/* the part that names the white footer button reads white */
.ca-daygrp-cta-alt { color: var(--ca-text); font-weight: 500; }

/* Breathing room: between the head text and the first card, between cards,
   and at the foot of the dropdown. */
.ca-daygrp-body { padding: 6px 12px 16px; display: grid; gap: 12px; }
/* rows inherit their day's colour on the left edge */
.ca-daygrp-body .ca-job { border-left-color: var(--day, var(--ca-line-strong)); }
/* Every stacked card is the height of a two-line one, so the stack is even.
   Reserving the lines (rather than a pixel min-height) keeps it right if the
   font ever changes, and a longer job name clamps instead of growing. */
.ca-daygrp-body .ca-job-title { line-height: 1.35; }
.ca-daygrp-body .ca-job-title-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;                 /* 2 lines at the 1.35 line-height */
  line-height: 1.35;
}

/* ── editing an availability day in place ─────────────────────── */
.ca-edit-in {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--ca-line-strong);
  border-radius: 8px;
  color: var(--ca-text);
  padding: 7px 9px;
  font: inherit;
  font-size: 0.9rem;
}
.ca-edit-in:focus { outline: none; border-color: var(--ca-accent, #22d3ee); }
.ca-edit-bad { border-color: #f59e0b; background: rgba(245, 158, 11, 0.1); }
.ca-edit-row td { vertical-align: top; }
.ca-edit-row .ca-rel { display: block; font-size: 0.72rem; color: var(--ca-faint); margin-top: 3px; }
/* opt-in, NOT :first-child — the job modal's Send message button is first and
   must sit beside Decline, not be flung to the far edge */
.ca-rec-foot .ca-foot-left { margin-right: auto; }
/* Send message, available at every stage of a job */
.ca-msg-job {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-color: var(--ca-accent, #22d3ee);
  background: rgba(34, 211, 238, 0.12);
  color: var(--ca-accent, #22d3ee);
  font-weight: 600;
}
.ca-msg-job:hover { background: rgba(34, 211, 238, 0.22); }

@media (max-width: 560px) {
  .ca-head-msg { order: -1; margin-left: 0; }
}
.ca-rec-body { padding: 14px 20px 6px; }
.ca-rec-table { width: 100%; min-width: 0; margin: 0 0 14px; }
.ca-rec-table th { padding: 6px 8px 8px 0; }
.ca-rec-table td { padding: 9px 8px 9px 0; border-top: 1px solid var(--ca-line); font-size: 0.95rem; }
.ca-rec-jobs { padding: 4px 0 8px; }
.ca-rec-foot {
  display: flex;
  justify-content: flex-end;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--ca-line);
}
@media (min-width: 720px) {
  /* desktop: the card sits just under the info bar with a 24px gap (not centred — a centred
     card taller than the space overflowed above the overlay and the info bar clipped its header) */
  .ca-overlay { align-items: flex-start; padding: 24px; }
}

/* ── House rule for every record card in an overlay ────────────────────────────
   The card never exceeds the space under the info bar. Its header and footer stay put;
   only the body scrolls, and the body is capped at 60vh (less on a short screen). */
.ca-overlay > .ca-rec { display: flex; flex-direction: column; max-height: var(--fr-modal-max, 82vh); overflow: hidden; }
.ca-overlay > .ca-rec > .ca-rec-head, .ca-overlay > .ca-rec > .ca-rec-foot { flex: 0 0 auto; }
.ca-overlay > .ca-rec > .ca-rec-body { flex: 1 1 auto; min-height: 0; max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* ── compact assignment rows (casual side) ──────────────────── */
.ca-job-row {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  cursor: pointer;
}
.ca-job-row:hover { border-color: rgba(249, 115, 22, 0.6); }
.ca-job-time { font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.ca-job-time-end { font-weight: 400; color: var(--ca-muted); font-size: 0.8rem; }
.ca-job-title { font-size: 0.92rem; display: flex; align-items: flex-start; gap: 8px; }   /* job name + the message total */
.ca-job-title-text { flex: 1 1 auto; min-width: 0; }
/* message totals: on the job-name line (rows) / day fold head (record), same colour as the name */
.ca-msg-count { margin-left: auto; padding-left: 8px; color: var(--ca-text); font-weight: 600; font-size: 0.86rem; line-height: 1.35; white-space: nowrap; }
.ca-daygrp-msgs { flex: 0 0 auto; color: var(--ca-text); font-weight: 600; font-size: 0.86rem; white-space: nowrap; }
.ca-job-row .ca-job-date { font-size: 0.78rem; color: var(--ca-faint); margin-top: 2px; }
.ca-job-side { display: flex; align-items: center; }
.ca-job-side .ca-btn { padding: 7px 12px; font-size: 0.84rem; }
@media (max-width: 480px) {
  .ca-job-row { grid-template-columns: 72px 1fr; }
  .ca-job-side { grid-column: 1 / -1; justify-content: flex-end; }
}
.ca-rec .ca-rec-foot { gap: 12px; }

/* ── processing state on Accept / Decline (shared with supervisor buttons) ── */
.is-busy { opacity: 0.7; cursor: progress; pointer-events: none; }
.sv-spin {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #fff;
  animation: ca-spin 0.8s linear infinite; display: inline-block; margin-right: 6px;
}
.ca-btn.solid .sv-spin { border-color: rgba(15, 23, 42, 0.35); border-top-color: #0f172a; }
@keyframes ca-spin { to { transform: rotate(360deg); } }
.ca-job-actions .ca-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* ── Assigned Jobs: one header per stage ───────────────────── */
.ca-stage { margin-bottom: 18px; }
.ca-stage-title {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 0.95rem; font-weight: 600; margin: 0 0 8px;
  padding-left: 10px; border-left: 3px solid var(--ca-line-strong);
}
.ca-stage-count { color: var(--ca-faint); font-weight: 400; font-size: 0.82rem; }
.ca-stage-pending   { border-left-color: #F97316; }
.ca-stage-accepted  { border-left-color: #22d3ee; }
.ca-stage-declined  { border-left-color: #ef4444; }
.ca-stage-cancelled { border-left-color: rgba(255, 255, 255, 0.35); }

/* ── Messages panel ─────────────────────────────────────────── */
.ca-messages { display: grid; gap: 12px; }
.ca-messages-head { display: flex; justify-content: space-between; align-items: center; }
.ca-messages-title { font-size: 1.05rem; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.ca-bell-inline { width: 30px; height: 30px; border-radius: 9px; }
.ca-bell-inline .ca-bell-count { top: -6px; right: -6px; min-width: 18px; height: 18px; font-size: 0.68rem; }
.ca-msg-status {
  border: 1px solid var(--ca-line-strong); background: transparent; color: var(--ca-muted);
  border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.ca-msg-status.new { font-weight: 700; }
.ca-tr-unread .ca-td-label { font-weight: 700; }
.ca-th-bell, .ca-td-bell { text-align: center; }
/* the inline bell is a 30x30 grid cell — centre the glyph in it and sit it
   on the text baseline of the row, or it rides low in the cell */
.ca-bell-inline svg { display: block; }
.ca-td-bell .ca-bell-inline { display: inline-grid; vertical-align: middle; }
.ca-msg-table .ca-td-from, .ca-msg-table .ca-td-to, .ca-msg-table .ca-td-casual { white-space: nowrap; }

/* thread modal */
.ca-thread { max-width: 640px; }
.ca-thread-body { display: grid; gap: 12px; max-height: 60vh; overflow-y: auto; }
.ca-msg { display: grid; gap: 4px; justify-items: start; }
.ca-msg-mine { justify-items: end; }
.ca-msg-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 0.76rem; color: var(--ca-faint); }
.ca-msg-from { color: var(--ca-muted); font-weight: 600; }
.ca-msg-new { color: #F97316; font-weight: 700; }
.ca-msg-text {
  max-width: 85%; padding: 9px 12px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--ca-line-strong);
  white-space: pre-line; word-break: break-word; font-size: 0.92rem;
}
.ca-msg-mine .ca-msg-text { background: rgba(255, 255, 255, 0.08); }
.ca-thread-foot { flex-direction: column; align-items: stretch; gap: 8px; }
.ca-thread-input {
  width: 100%; box-sizing: border-box; resize: vertical;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--ca-line-strong); border-radius: 8px;
  color: var(--ca-text); padding: 10px 11px; font: inherit;
}
.ca-thread-actions { display: flex; justify-content: flex-end; gap: 12px; }




/* ── SuburbField — append to supervisorAvailability.css ─────────────────
   Same rhythm as the CustomSelect fields around it (.ob-field / .ca-label). */
.sf-wrap { position: relative; display: flex; flex-direction: column; gap: 6px; }
.sf-row { display: flex; gap: 8px; align-items: stretch; }
.sf-input {
  flex: 1; min-width: 0;
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--ca-border, rgba(255,255,255,.14));
  background: var(--ca-field, rgba(255,255,255,.04));
  color: inherit; font: inherit;
}
.sf-input:focus { outline: none; border-color: var(--ca-accent, #22d3ee); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ca-accent, #22d3ee) 22%, transparent); }
.sf-unmatched .sf-input { border-color: #f59e0b; }
.sf-lookup {
  flex: 0 0 auto; padding: 0 14px; border-radius: 10px;
  border: 1px solid var(--ca-accent, #22d3ee);
  background: color-mix(in srgb, var(--ca-accent, #22d3ee) 14%, transparent);
  color: var(--ca-accent, #22d3ee); font: inherit; font-weight: 600; cursor: pointer;
}
.sf-lookup:disabled { opacity: .45; cursor: default; }
.sf-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30;
  margin: 0; padding: 4px; list-style: none;
  max-height: min(48vh, 320px); overflow-y: auto;
  border-radius: 12px; border: 1px solid var(--ca-border, rgba(255,255,255,.14));
  background: var(--ca-panel, #0f172a); box-shadow: 0 12px 32px rgba(0,0,0,.35);
}
.sf-opt {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  padding: 9px 10px; border-radius: 8px; cursor: pointer;
}
.sf-opt.sf-hi { background: color-mix(in srgb, var(--ca-accent, #22d3ee) 16%, transparent); }
.sf-name { font-weight: 600; }
.sf-meta { color: var(--ca-muted, #94a3b8); font-size: .82rem; white-space: nowrap; }
.sf-lookup-row { border-top: 1px dashed var(--ca-border, rgba(255,255,255,.14)); margin-top: 4px; }
.sf-lookup-row .sf-name { color: var(--ca-accent, #22d3ee); }
.sf-note { font-size: .82rem; color: #f59e0b; line-height: 1.4; }
.sf-note.sf-note-ok { color: #86efac; }

/* when the list opens inside the Assign modal it must not be clipped */
.sv-assign .ca-rec-body { overflow: visible; }



/* ── DateField — append to supervisorAvailability.css ────────────────────
   The input carries .sv-search as well, so height / border / font come from
   there and it lines up with the search box; these rules only add the icon,
   the clear button and the dropdown. */
.df-wrap { position: relative; display: inline-flex; align-items: center; min-width: 170px; }
.df-icon { position: absolute; left: 11px; pointer-events: none; color: var(--ca-muted, #94a3b8); }
.df-input { width: 100%; padding-left: 34px !important; padding-right: 30px !important; cursor: text; }
.df-picked .df-icon { color: var(--ca-accent, #22d3ee); }
.df-clear {
  position: absolute; right: 6px; width: 22px; height: 22px; border-radius: 50%;
  border: 0; background: transparent; color: var(--ca-muted, #94a3b8);
  font-size: 16px; line-height: 22px; cursor: pointer; padding: 0;
}
.df-clear:hover { background: rgba(255,255,255,.08); color: inherit; }
.df-list {
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 30;
  min-width: 100%; margin: 0; padding: 4px; list-style: none;
  max-height: 200px; overflow-y: auto;
  border-radius: 12px; border: 1px solid var(--ca-border, rgba(255,255,255,.14));
  background: var(--ca-panel, #0f172a); box-shadow: 0 12px 32px rgba(0,0,0,.35);
}
.df-opt { padding: 8px 10px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.df-opt.df-hi { background: color-mix(in srgb, var(--ca-accent, #22d3ee) 16%, transparent); }
.df-opt.df-sel { color: var(--ca-accent, #22d3ee); font-weight: 600; }
.df-any { color: var(--ca-muted, #94a3b8); border-bottom: 1px dashed var(--ca-border, rgba(255,255,255,.14)); margin-bottom: 4px; border-radius: 8px 8px 0 0; }
.df-none { color: #f87171; cursor: default; }

@media (max-width: 480px) {
  .df-wrap { min-width: 0; flex: 1 1 100%; }
}






/* messages table on phone / iPad: rows become cards like the availability list */
@media (max-width: 1024px) {
  .ca-msg-table tr.ca-tr {
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
      "loc    status bell"
      "dates  dates  dates"
      "casual casual casual"
      "from   to     to";
  }
  .ca-msg-table .ca-td-loc { grid-area: loc; }
  .ca-msg-table .ca-td-status { grid-area: status; }
  .ca-msg-table .ca-td-bell { grid-area: bell; }
  .ca-msg-table .ca-td-dates { grid-area: dates; }
  .ca-msg-table .ca-td-casual { grid-area: casual; }
  .ca-msg-table .ca-td-from { grid-area: from; }
  .ca-msg-table .ca-td-to { grid-area: to; text-align: right; }
  .ca-msg-table .ca-td-from::before, .ca-msg-table .ca-td-to::before, .ca-msg-table .ca-td-casual::before {
    content: attr(data-label); display: block; font-size: 0.72rem; color: var(--ca-muted); margin-bottom: 2px;
  }
}

/* message thread opened over another record: always the top layer, centred */
.ca-overlay.ca-overlay-top { z-index: 10090; align-items: center; }

/* messages table fills the pane (the centred max-width rule shrank it) */
.ca-messages .ca-table-wrap { width: 100%; max-width: none; margin: 0; }
.ca-tab-pane .ca-messages { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.ca-msg-table { min-width: 0; }
@media (max-width: 480px) { .ca-tab-pane .ca-messages { padding: 0 14px; } }

/* how-to video strip on the Create Availability tab: the builder's width, a gap above the builder */
.ca-tab-pane .val-root { max-width: 960px; margin: 0 auto 20px; }