/* supervisorAvailability.css — Open Slots / Responses / Roster
   Loads alongside casualsAvailability.css (buttons, pills, modal shell, jobs). */

.sv-pane {
  --sv-accent: #22d3ee;
  --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);
  color: var(--ca-text);
  padding: 8px 16px 120px;
  max-width: 1100px;
  margin: 0 auto;
  font-size: 0.95rem;
}

/* ── toolbar ────────────────────────────────────────────────── */
.sv-toolbar { display: grid; gap: 10px; margin-bottom: 16px; }
.sv-toolbar-right { justify-items: end; }
/* Scoped to .sv-ranges on purpose: .sv-chip is shared with CreateCasualJobs
   (including its narrow month arrows), so the height is set here rather than
   on .sv-chip itself. Both are pinned to 34px so the Job Messages pill sits
   level with Match Availability instead of stretching the row. */
.sv-ranges { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sv-ranges .sv-chip { min-height: 34px; display: inline-flex; align-items: center; }
/* the pill sits at the right end of the row, its right edge on the toolbar's right edge — the
   same edge the Refresh button (last column of .sv-filters) ends on. Height / padding unchanged. */
.sv-ranges .ca-msgbtn { height: 34px; padding: 0 4px 0 14px; font-size: 0.86rem; margin-left: auto; }
.sv-ranges .ca-msgbtn-icon { width: 26px; height: 26px; }
.sv-chip {
  border: 1px solid var(--ca-line-strong);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ca-muted);
  border-radius: 999px;
  padding: 7px 14px;
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
}
.sv-chip.on { background: rgba(34, 211, 238, 0.1); }
.sv-filters { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: end; }
.sv-filters .ob-field { margin: 0; }
.sv-search {
  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: 10px 11px;
  font: inherit;
}
.sv-hint { color: var(--ca-muted); font-size: 0.84rem; }
@media (min-width: 720px) {
  .sv-filters { grid-template-columns: 1fr 1fr auto; }
}

/* ── day sections ───────────────────────────────────────────── */
.sv-day, .sv-group { margin-bottom: 22px; }

/* ── Closed Jobs, open state: one card per job, every field (the fold itself is .ca-fold in
   casualsAvailability.css — the sheet both availability pages load) ── */
.ca-fold-body .sv-table-wrap { border: none; background: transparent; }
.sv-fold-cards { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 1025px) { .sv-fold-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sv-jobcard {
  border: 1px solid var(--ca-line-strong); border-left: 3px solid var(--sv-accent, #22d3ee);
  border-radius: 12px; padding: 14px; background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
  display: grid; gap: 12px;
}
.sv-jobcard-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sv-jobcard-name { font-weight: 600; font-size: 1.02rem; color: var(--sv-accent, #22d3ee); flex: 1 1 auto; min-width: 0; }
.sv-jobcard .sv-detail-grid { gap: 10px 12px; }
.sv-jobcard-casuals { display: flex; flex-wrap: wrap; gap: 8px; }
.sv-jobcard-casual { display: inline-flex; align-items: center; gap: 6px; }
.sv-jobcard-open { justify-self: end; }
@media (max-width: 560px) { .sv-jobcard .sv-detail-grid { grid-template-columns: 1fr; } }   /* one field per row on a phone */
.sv-day-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 10px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.sv-day-count { color: var(--ca-faint); font-weight: 400; font-size: 0.84rem; }

/* ── slot cards ─────────────────────────────────────────────── */
.sv-slots { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 1025px) { .sv-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sv-slot {
  border: 1px solid var(--ca-line-strong);
  border-left: 3px solid #22c55e;
  border-radius: 14px;
  padding: 14px 14px 12px;
  background: linear-gradient(135deg, var(--ca-panel) 0%, var(--ca-bg) 100%);
}
.sv-slot-assigned { border-left-color: #F97316; }
.sv-slot-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.sv-slot-name, .sv-job-name { font-weight: 600; font-size: 1.02rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sv-tel { color: var(--ca-muted); font-size: 0.86rem; text-decoration: none; }
.sv-tel:hover { color: var(--ca-text); text-decoration: underline; }
.sv-slot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; font-size: 0.92rem; }
.sv-slot-grid .ca-label { margin-bottom: 1px; }
.sv-slot-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }

/* ── assign modal form ──────────────────────────────────────── */
.sv-assign { max-width: 760px; }

/* ── assign modal: header pinned, one scrolling middle ──────────
   The card is a flex COLUMN capped at 82vh. Head and foot are fixed rows;
   everything between them lives in .sv-assign-scroll, which is the single
   scroll region and is capped at 60vh.

   `min-height: 0` on that region is the part that actually makes it scroll:
   a flex child defaults to min-height:auto and refuses to shrink below its
   content, so without it `overflow-y: auto` never kicks in and the fields
   spill straight out of the card. */
.sv-assign-modal {
  display: flex;
  flex-direction: column;
  max-height: var(--fr-modal-max, 82vh);   /* room under the info bar (utils/usePublishModalTop) */
  overflow: hidden;           /* keeps the rounded corners over the scroll box */
}
.sv-assign-modal > .ca-rec-head {
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 5;
  background: linear-gradient(160deg, #1e293b 0%, #16233c 100%);
}
.sv-assign-scroll {
  flex: 1 1 auto;
  min-height: 0;              /* ← without this the scroll never engages */
  max-height: 60vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sv-assign-modal > .ca-rec-foot { flex: 0 0 auto; border-top: 1px solid var(--ca-line); }
/* a dead Send button must look dead */
.sv-assign-modal .ca-rec-foot .ca-btn:disabled { background: rgba(255,255,255,0.06); border-color: var(--ca-line-strong); color: var(--ca-muted); opacity: 1; cursor: not-allowed; }

/* ── assign form: labels on top, two 50% columns ────────────────
   Every label sits ABOVE its control, and the form spans the full width of
   the modal as a 2-column grid: two fields share a row at 50% each, and
   anything marked .sv-wide takes the whole row. Height is handled by the
   modal's scroll region (.sv-assign-scroll, 60vh), not by squeezing rows.
   Phones collapse to a single column in the 560px block below — one app
   serves mobile/iPad and desktop, so both are catered for. */
.sv-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
}
.sv-field { display: block; min-width: 0; }
.sv-wide { grid-column: 1 / -1; }

/* the dropdowns are absolutely positioned inside a scrolling box — keep
   them short enough to stay in view rather than clipping at its edge */
.sv-form .sf-list { max-height: min(30vh, 220px); }
.sv-form .custom-select-dropdown { max-height: min(30vh, 240px); }
.sv-field input, .sv-field textarea, .sv-reason-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: 10px 11px;
  font: inherit;
  resize: vertical;
}
.sv-field .ob-field { margin: 0; }
.sv-km { margin-top: 6px; font-size: 0.82rem; color: var(--ca-muted); }
.sv-km-out { color: #fbbf24; }
/* Phones / narrow iPad split view: a 50/50 split is too cramped under
   ~560px, so the grid drops to one field per row and the card gets a
   little more height to work with. */
@media (max-width: 560px) {
  /* label hidden on phones (casualsAvailability.css) — drop the label's 14px left padding too,
     or the bell's circle sits jammed against the pill's right edge with dead space on the left */
  .sv-ranges .ca-msgbtn { padding: 0 3px; }
  .sv-form { grid-template-columns: 1fr; }
  /* the 60vh scroll region is the house rule on every screen size */
  .sv-section-label { white-space: normal; }
  /* the six-column match table cannot shrink any further — let it scroll
     sideways rather than crushing the columns */
  .sv-match-table-wrap { overflow-x: auto; }
  .sv-match-table { min-width: 620px; }
  .sv-match-row { gap: 6px; }
  .sv-match-foot-count { font-size: 0.78rem; }
}

/* ── job cards (responses) ──────────────────────────────────── */
.sv-jobcard .ca-job-grid { display: none; }
.sv-job-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.sv-job-when { color: var(--ca-muted); font-size: 0.88rem; margin-top: 2px; }
.sv-job-body { margin-top: 10px; display: grid; gap: 6px; font-size: 0.92rem; }
.sv-job-line .ca-label { display: inline; margin-right: 6px; }
.sv-reason { color: #fca5a5; }
.sv-job-meta { color: var(--ca-faint); font-size: 0.8rem; margin-top: 2px; }
.sv-job-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.sv-job-actions .sv-reason-input { flex: 1 1 200px; }

/* ── roster ─────────────────────────────────────────────────── */
.sv-roster { display: grid; gap: 8px; }
/* day heading inside a Roster month fold: a little air above each new day, none above the first */
.sv-roster-day { margin: 10px 0 2px; }
.sv-roster-day:first-child { margin-top: 2px; }
.sv-roster-row {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--ca-line-strong);
  border-left: 3px solid #22c55e;
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(15, 23, 42, 0.6);
}
.sv-roster-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.sv-roster-end { font-weight: 400; color: var(--ca-muted); font-size: 0.82rem; }
.sv-roster-addr { margin-top: 2px; display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }   /* job name + the message total */
.sv-roster-addr-text { flex: 1 1 auto; min-width: 0; }
.sv-roster-contact { color: var(--ca-muted); font-size: 0.86rem; margin-top: 2px; }
@media (max-width: 480px) {
  .sv-roster-row { grid-template-columns: 1fr; }
  .sv-roster-actions { justify-self: end; }
}

/* ── assign modal header rows ───────────────────────────────── */
.sv-assign-head { padding-right: 20px; }

/* ── assign modal: Success Match badge ──────────────────────────
   Sits under the "Assign job · date" title. The number comes from
   successMatch() in SupervisorAvailability.jsx — hover shows the parts. */
.sv-match {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 2px 10px;
  margin-top: 10px;
  padding: 7px 14px 9px;
  border: 1px solid var(--sv-match-line, var(--ca-line-strong));
  border-radius: 12px;
  background: var(--sv-match-bg, rgba(255, 255, 255, 0.04));
  cursor: help;
}
.sv-match-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ca-muted);
}
.sv-match-value {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  justify-self: end;
  color: var(--sv-match-ink, var(--ca-text));
  font-variant-numeric: tabular-nums;
}
.sv-match-bar {
  grid-column: 1 / -1;
  height: 4px;
  margin-top: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.sv-match-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--sv-match-ink, var(--ca-text));
  transition: width 220ms ease;
}
/* Bill's grades: green >= 80, amber 70-79, red 0-69 */
.sv-match-good { --sv-match-ink: #4ade80; --sv-match-line: rgba(34, 197, 94, 0.45); --sv-match-bg: rgba(34, 197, 94, 0.09); }
.sv-match-ok   { --sv-match-ink: #fbbf24; --sv-match-line: rgba(251, 191, 36, 0.45); --sv-match-bg: rgba(251, 191, 36, 0.09); }
.sv-match-poor { --sv-match-ink: #f87171; --sv-match-line: rgba(239, 68, 68, 0.45); --sv-match-bg: rgba(239, 68, 68, 0.09); }
.sv-match-all  { --sv-match-ink: var(--sv-accent, #22d3ee); --sv-match-line: rgba(34, 211, 238, 0.45); --sv-match-bg: rgba(34, 211, 238, 0.09); }

/* The Success Match badge plus one per scoring part, on one wrapping row.
   Every badge on a header row is EXACTLY the same size so the row reads as
   one set of readings rather than a headline with three footnotes. */
.sv-match-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin-top: 10px; }
.sv-match-row .sv-match {
  margin-top: 0;
  box-sizing: border-box;
  width: var(--sv-badge-w, 172px);
  min-height: var(--sv-badge-h, 62px);
  grid-template-columns: 1fr auto;   /* label stretches, value pins right */
  align-content: space-between;      /* bar sits on the bottom edge */
}
.sv-match-row .sv-match-label { white-space: nowrap; }
.sv-match-row .sv-match-bar { width: 100%; }

/* the part badges now read at the same size as the headline one — only
   the padding and the bar are a shade tighter */
.sv-match-sm { padding: 5px 10px 7px; gap: 1px 8px; }
.sv-match-sm .sv-match-label { font-size: 0.7rem; letter-spacing: 0.06em; }
.sv-match-sm .sv-match-value { font-size: 1.25rem; }
.sv-match-sm .sv-match-bar { height: 3px; margin-top: 4px; }

/* on the Match board the badges double as the grade filter */
.sv-match-btn { display: block; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 12px; }
.sv-match-btn .sv-match { cursor: pointer; }
.sv-match-btn.on .sv-match { border-color: var(--sv-match-ink); box-shadow: 0 0 0 2px var(--sv-match-bg); }
.sv-match-btn:not(.on) .sv-match { opacity: 0.62; }
.sv-match-btn:hover .sv-match { opacity: 1; }

/* "Match Availability" sits with the range chips and reads as the action */
.sv-chip-match {
  margin-left: 6px;
  border-color: rgba(34, 211, 238, 0.5);
  color: var(--sv-accent, #22d3ee);
  font-weight: 600;
}
.sv-chip-match:hover { border-color: var(--sv-accent, #22d3ee); background: rgba(34, 211, 238, 0.1); }

/* ── Match Availability board ─────────────────────────────────── */
/* the four filter badges here are a size up on the assign header's */
/* exactly the inner tab's width: InnerTabsd's content area is 70vw, at least 500px, at most 1200px */
.sv-match-modal { max-width: clamp(500px, 70vw, 1200px); }
.sv-match-modal .sv-match-row { --sv-badge-w: 172px; --sv-badge-h: 70px; }
.sv-match-modal .sv-match-row .sv-match-label { font-size: 0.68rem; letter-spacing: 0.07em; }
.sv-match-modal .sv-match-row .sv-match-value { font-size: 1.2rem; }
.sv-match-modal .sv-match-row .sv-match-bar { height: 4px; }

/* the casual picker in the Match header: after the grade badges, a clear gap, its own width */
.sv-match-casual { margin: 0 0 0 18px; align-self: center; flex: 0 1 260px; min-width: 220px; }
@media (max-width: 560px) { .sv-match-casual { margin-left: 0; flex: 1 1 100%; } }

.sv-match-err { margin: 12px 20px 0; }
.sv-match-table-wrap { border: none; background: transparent; margin: 0; }
.sv-match-table { width: 100%; }
.sv-match-table th, .sv-match-table td { vertical-align: middle; }
/* a white divider between rows (on the cells — the table is border-collapse: separate, so a border
   on the <tr> itself never paints); every row opens the read-only Match details form */
.sv-match-table tbody tr + tr td { border-top: 1px solid rgba(255, 255, 255, 0.45); }
.sv-match-table tbody tr:hover td { background: rgba(255, 255, 255, 0.04); }
.sv-match-open { margin-top: 4px; color: var(--sv-accent, #22d3ee); font-size: 0.78rem; font-weight: 500; white-space: nowrap; }
/* the details form: 680px grown by 12.5% each side; the four score badges share one row; the body
   scrolls inside 60vh once it is taller than that (sv-assign-modal / sv-assign-scroll) */
.ca-rec.sv-match-info { max-width: 850px; }
.sv-match-info .ca-rec-head { padding-right: 20px; }
.sv-match-info .ca-rec-foot .sv-foot-left { margin-right: auto; }   /* Edit notes sits left, Close right */
.sv-match-info .sv-field textarea { width: 100%; box-sizing: border-box; }
.sv-match-info .sv-match-row { flex-wrap: nowrap; }
.sv-match-info .sv-match-row .sv-match { flex: 1 1 0; width: auto; min-width: 0; }
@media (max-width: 560px) {
  .sv-match-info .sv-match-row { flex-wrap: wrap; }
  .sv-match-info .sv-match-row .sv-match { flex: 1 1 45%; }
}
/* one identical badge per row, and the Assign button sits on its bottom edge */
.sv-match-table .sv-match { width: 132px; min-height: 62px; grid-template-columns: 1fr auto; align-content: space-between; box-sizing: border-box; }
.sv-match-table .sv-match-score, .sv-match-table .sv-match-assign { vertical-align: bottom; }
.sv-match-assign { text-align: right; white-space: nowrap; }
.sv-btn-sm { padding: 6px 14px; font-size: 0.85rem; }
.sv-match-foot-count { margin-right: auto; color: var(--ca-muted); font-size: 0.85rem; }

/* a time field that does not read as "7:00 AM" yet */
.sv-field input.sv-bad { border-color: #f59e0b; background: rgba(245, 158, 11, 0.08); }

/* ── Job 1 … Job N accordions in the Job Area ──────────────────
   One availability day can carry several jobs. Each is a collapsible
   section, collapsed by default so a busy day opens tidy; the day's only
   job opens expanded because there it IS the form. */
.sv-jobsec {
  border: 1px solid var(--ca-line-strong);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}
.sv-jobsec.is-open { background: rgba(255, 255, 255, 0.035); border-color: rgba(34, 211, 238, 0.35); }
.sv-jobsec-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  background: none;
  color: var(--ca-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.sv-jobsec-head:hover { background: rgba(255, 255, 255, 0.04); }
.sv-jobsec-caret { flex: 0 0 auto; color: var(--sv-accent, #22d3ee); transition: transform 150ms ease; }
.sv-jobsec.is-open .sv-jobsec-caret { transform: rotate(90deg); }
.sv-jobsec-n {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sv-accent, #22d3ee);
}
.sv-jobsec-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ca-muted);
  font-size: 0.9rem;
}
.sv-jobsec-status { flex: 0 0 auto; }
/* amber cue on a job's fold: this job's section carries the widen-your-hours warning */
.sv-jobsec-warn { flex: 0 0 auto; color: #fbbf24; font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
/* each job's own score, so it is never in doubt which job the header
   badges are describing */
.sv-jobsec-score {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--sv-match-line, var(--ca-line-strong));
  background: var(--sv-match-bg, rgba(255, 255, 255, 0.04));
  color: var(--sv-match-ink, var(--ca-text));
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* the section the header badges are currently scoring */
.sv-jobsec.is-focused { border-color: rgba(34, 211, 238, 0.45); }

/* how far the casual has to stretch to take every job on the day */
.sv-need {
  padding: 10px 12px;
  border: 1px solid rgba(251, 191, 36, 0.45);
  border-radius: 10px;
  background: rgba(251, 191, 36, 0.08);
  color: #fcd34d;
  font-size: 0.86rem;
  line-height: 1.45;
}
.sv-need b { color: #fde68a; }
/* the body is the same two-column grid as the rest of the form */
.sv-jobsec-body { padding: 4px 14px 14px; }
/* "Send message" first, then the fit / km hint on its own line beneath it — never wrapped
   around the button. Auto width on desktop; a full-width tap target on phones (below). */
.sv-jobsec-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 4px; }
.sv-jobsec-actions .sv-km { margin-top: 0; }
/* the whole point of a read-only job section is to message the casual about
   it, so this reads as an action rather than a washed-out ghost button */
.sv-msg-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border: 1px solid var(--sv-accent, #22d3ee);
  background: rgba(34, 211, 238, 0.12);
  color: var(--sv-accent, #22d3ee);
  font-weight: 600;
}
.sv-msg-btn:hover { background: rgba(34, 211, 238, 0.22); }

@media (max-width: 560px) {
  .sv-jobsec-title { white-space: normal; }
  .sv-jobsec-head { flex-wrap: wrap; }
  .sv-jobsec-actions .ca-btn { width: 100%; justify-content: center; }
}

/* ── assign modal: Job / Casual section headers + divider ────── */
.sv-section { display: flex; align-items: center; gap: 12px; margin: 2px 0 -2px; }
.sv-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sv-accent, #22d3ee);
  white-space: nowrap;
}
.sv-section::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--ca-line-strong), transparent);
}

/* the divider between the Job area and the Casual area */
.sv-split {
  position: relative;
  height: 1px;
  margin: 16px 0 12px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--ca-line-strong) 18%, var(--ca-line-strong) 82%, transparent);
}
.sv-split::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--sv-accent, #22d3ee);
  box-shadow: 0 0 0 5px var(--ca-panel, #1e293b);
}

/* Read-only fields read as information, not as something to type in — the
   assign form is now mostly read-only and it should look that way. */
.sv-form input[readonly], .sv-form textarea[readonly] {
  background: rgba(255, 255, 255, 0.02);
  border-color: var(--ca-line);
  color: rgba(255, 255, 255, 0.78);
  cursor: default;
}
.sv-form input[readonly]:focus { outline: none; border-color: var(--ca-line); }
.sv-assign-line { margin: 8px 0 0; line-height: 1.5; color: var(--ca-muted); font-size: 0.95rem; }
.sv-assign-line b { color: var(--ca-text); font-weight: 600; }
.sv-assign-contact { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; font-size: 0.9rem; }
.sv-assign-contact a { color: var(--sv-accent, #22d3ee); text-decoration: none; }
.sv-assign-contact a:hover { text-decoration: underline; }
.sv-km-ok { color: #86efac; }
.sv-assign .ca-rec-foot { gap: 14px; }

/* ── desktop: one table per date (Open Slots) ───────────────── */
.sv-table-wrap {
  border: 1px solid var(--ca-line-strong);
  border-radius: 14px;
  background: linear-gradient(135deg, var(--ca-panel) 0%, var(--ca-bg) 100%);
  overflow: hidden;
}
.sv-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.sv-table th {
  text-align: left;
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ca-muted);
  padding: 12px 14px;
  border-bottom: 1px solid var(--ca-line-strong);
  white-space: nowrap;
}
.sv-table td { padding: 12px 14px 6px; vertical-align: top; }
.sv-tr { cursor: pointer; }
.sv-tr:hover td, .sv-tr-foot:hover td { background: rgba(255, 255, 255, 0.025); }
.sv-td-name { font-weight: 600; color: var(--sv-accent, #22d3ee); }
.sv-td-sub { color: var(--ca-muted); font-size: 0.82rem; margin-top: 2px; }
/* feed footer row: "Click here to view record ›" then the job type pill, with air between them;
   on phone / iPad cards the pair sits centred like the link did on its own */
.sv-foot-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding-top: 6px; }
/* the link's own 6px top padding moves onto the row above, so the link TEXT and the pill share
   one centre line instead of the link's padded box being centred against the pill */
.sv-foot-row .ca-view-link { padding: 0; }
.sv-foot-type { margin-left: 4px; }
@media (max-width: 1024px) {
  .sv-foot-row { justify-content: center; padding: 10px 0 2px; }
  .sv-foot-row .ca-view-link { width: auto; padding: 0; }
}
/* casual names are capped at 28 characters (spaces included): on the desktop table the column
   is at least that wide and never wraps, so every name sits on one line. Cards (≤1024px) wrap. */
@media (min-width: 1025px) {
  .sv-feed .sv-th-casual, .sv-feed .sv-td-casual { min-width: 28ch; white-space: nowrap; }
}
.sv-yes { color: #86efac; font-weight: 600; }
.sv-no { color: #f87171; font-weight: 600; }
.sv-tr-foot { cursor: pointer; }
.sv-tr-foot td { padding: 0 14px 10px; border-bottom: 2px solid var(--ca-line-strong); }
.sv-tr-foot:last-child td { border-bottom: none; }
.sv-tr-foot + .sv-tr td { padding-top: 16px; }
.sv-tr-foot .ca-view-link { pointer-events: none; }

/* ── CreateCasualJobs ───────────────────────────────────────── */
.sv-jobtypes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; }
@media (min-width: 720px) { .sv-jobtypes { grid-template-columns: repeat(4, 1fr); } }
.sv-jobtype {
  text-align: left;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--ca-line-strong);
  border-radius: 14px;
  padding: 16px 14px;
  color: var(--ca-text);
  cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
  position: relative; overflow: hidden;
  font: inherit;
  transition: border-color 150ms ease, transform 150ms ease;
}
.sv-jobtype::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); opacity: 0.5; }
.sv-jobtype:hover { border-color: var(--accent); transform: translateY(-1px); }
.sv-jobtype.on { border-color: var(--accent); background: rgba(34, 211, 238, 0.1); }
.sv-jobtype.on::before { opacity: 1; }
.sv-jobtype-label { font-weight: 600; font-size: 1rem; }
.sv-jobtype-hint { font-size: 0.78rem; color: var(--ca-muted); }

.sv-panel {
  border: 1px solid var(--ca-line-strong);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
  background: linear-gradient(160deg, #1e293b 0%, #0f172a 100%);
  display: grid; gap: 12px;
}
.sv-panel-title { font-weight: 600; font-size: 1.02rem; display: flex; align-items: center; gap: 10px; }
.sv-panel-foot { display: flex; justify-content: flex-end; gap: 14px; }
.sv-draft { border-color: rgba(34, 211, 238, 0.45); }

.sv-cards { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 720px)  { .sv-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1025px) { .sv-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sv-card {
  border: 1px solid rgba(34, 211, 238, 0.18);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  display: grid; gap: 4px;
}
.sv-card:hover { border-color: rgba(34, 211, 238, 0.5); }
.sv-card-name { font-weight: 600; color: var(--sv-accent, #22d3ee); }
.sv-card-line { font-size: 0.88rem; }
.sv-card-muted { color: var(--ca-muted); font-size: 0.82rem; }
.sv-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; gap: 8px; }
.sv-use { padding: 7px 12px; font-size: 0.84rem; }
.sv-type-pill {
  margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 600;
  border: 1px solid rgba(34, 211, 238, 0.4); color: var(--sv-accent, #22d3ee);
}
/* ‹ Month › navigation for Periodical / Ticket jobs (Create Jobs on desktop, Jobs on phones):
   centred on every width — it sits on its own line above the search box */
.sv-monthnav { display: flex; align-items: center; justify-content: center; gap: 10px; }
.sv-month { font-weight: 600; min-width: 90px; text-align: center; }
.sv-muted { color: var(--ca-faint); }

/* feed table */
.sv-feed td { padding-bottom: 12px; border-bottom: 1px solid var(--ca-line); font-size: 0.9rem; }
.sv-feed-cont td { border-top: none; padding-top: 6px; }
.sv-feed-row:last-child td { border-bottom: none; }
@media (max-width: 1024px) {
  .sv-feed, .sv-feed tbody { display: block; }
  .sv-feed thead { display: none; }
  .sv-feed tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 12px 0; border-bottom: 1px solid var(--ca-line); }
  .sv-feed td { display: block; padding: 0; border: none; }
  .sv-feed td:first-child { grid-column: 1 / -1; }
  .sv-feed td:empty { display: none; }
  .sv-feed td::before { content: attr(data-label); display: block; font-size: 0.7rem; color: var(--ca-muted); }
  .sv-feed td:first-child::before, .sv-feed td:last-child::before { display: none; }
  .sv-feed-cont { padding-top: 0; }
}

/* ── busy buttons ───────────────────────────────────────────── */
.is-busy { opacity: 0.7; cursor: progress; pointer-events: none; }
.sv-spin {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(15, 23, 42, 0.35); border-top-color: #0f172a;
  animation: sv-spin 0.8s linear infinite; display: inline-block;
}
.ca-btn.ghost .sv-spin { border-color: rgba(255,255,255,0.3); border-top-color: #fff; }
@keyframes sv-spin { to { transform: rotate(360deg); } }

/* ── compact job rows (Responses + Roster) ──────────────────── */
.sv-roster-row { cursor: pointer; }
.sv-roster-row:hover { border-color: rgba(34, 211, 238, 0.5); }
.sv-row-status { margin-left: 8px; font-size: 0.78rem; }
.sv-roster-open { color: var(--ca-faint); font-size: 0.78rem; margin-top: 4px; }
.sv-row-pending  { border-left-color: #F97316; }
.sv-row-accepted { border-left-color: #22d3ee; }
.sv-row-declined { border-left-color: #ef4444; }
.sv-row-approved { border-left-color: #22c55e; }
.sv-roster-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.sv-roster-actions .sv-reason-input { width: 180px; }

/* ── detail modals ──────────────────────────────────────────── */
.sv-detail { max-width: 680px; }
.sv-detail .ca-rec-head { padding-right: 130px; position: relative; }
.sv-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.sv-detail-field { min-width: 0; }
.sv-detail-value {
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--ca-line);
  border-radius: 8px; padding: 9px 11px; font-size: 0.92rem; word-break: break-word;
}
.sv-rec-assign { border-top: 1px solid var(--ca-line); display: grid; gap: 8px; }
.sv-rec-assign-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  border: 1px solid var(--ca-line-strong); border-radius: 10px; padding: 10px 12px; cursor: pointer;
}
.sv-rec-assign-row:hover { border-color: rgba(34, 211, 238, 0.5); }
.sv-detail .ca-rec-foot { gap: 14px; }
@media (max-width: 480px) {
  .sv-detail-grid { grid-template-columns: 1fr; }
  .sv-detail .ca-rec-head { padding-right: 20px; }
  .sv-detail .ca-rec-status { position: static; display: inline-block; margin-top: 10px; }
}

/* ── address lookup ─────────────────────────────────────────── */
.sv-addr-row { display: flex; gap: 8px; }
.sv-addr-row input { flex: 1; }
.sv-lookup { padding: 8px 12px; white-space: nowrap; }

/* ── gap between records inside one date group ──────────────── */
@media (min-width: 1025px) {
  .sv-table { border-collapse: separate; border-spacing: 0; }
  .sv-tr-foot td { border-bottom: 2px solid var(--ca-line-strong); padding-bottom: 12px; }
  .sv-tr-foot + .sv-tr td { border-top: 16px solid transparent; }   /* the gap */
  .sv-tr-foot:last-child td { border-bottom: none; }
}
@media (max-width: 1024px) {
  .sv-slots { gap: 14px; }
  .sv-feed tr.sv-tr { border: 1px solid var(--ca-line-strong); border-radius: 14px 14px 0 0; border-bottom: none; padding: 12px 14px 8px; margin-top: 14px; }
  .sv-feed tr.sv-tr:first-child { margin-top: 0; }
  .sv-feed tr.sv-tr-foot { display: block; border: 1px solid var(--ca-line-strong); border-top: 1px solid var(--ca-line); border-radius: 0 0 14px 14px; padding: 0 14px 8px; }
  .sv-feed tr.sv-tr-foot td { display: block; padding: 0; border: none; }
  .sv-feed tr.sv-tr-foot td::before { display: none; }
  .sv-feed .ca-view-link { width: 100%; justify-content: center; padding: 10px 0 2px; }
  .sv-table-wrap { border: none; background: transparent; overflow: visible; }
  .sv-create { padding-left: 20px; padding-right: 16px; }              /* breathing room on the left */
}

/* ── five job-type buttons incl. Closed Jobs ────────────────── */
@media (min-width: 720px) { .sv-jobtypes-5 { grid-template-columns: repeat(5, 1fr); } }
.sv-jobtype-closed { border-style: dashed; }
.sv-jobtype-closed.on { background: rgba(255, 255, 255, 0.06); border-style: solid; }

/* ── close vs withdraw guidance ─────────────────────────────── */
.sv-reassign { color: #86efac; }
.sv-rec-help { padding: 0 20px 6px; color: var(--ca-muted); font-size: 0.86rem; line-height: 1.45; }

.sv-resync { margin-left: auto; font-size: 0.8rem; }

/* modal stack in Open Slots: Assign form (10050) → stacked job record (10070)
   → message thread (10090, portalled to <body>, centred over the stack) */
.ca-overlay + .ca-overlay { z-index: 10070; }
.ca-overlay.ca-overlay-top { z-index: 10090; align-items: center; }

/* work position (Full Time / Part Time / Casual / ABN) under the name / times */
.sv-position { color: #22d3ee; font-size: 0.8rem; font-weight: 600; margin-top: 2px; }

/* ── counts on the Open Slots range chips; message totals + edit row on job rows / records ── */
.sv-chip-n { margin-left: 6px; font-weight: 700; opacity: 0.85; }
/* message totals: on the name row (rows) / fold head (Open Slots record), same colour as the name */
.sv-msg-count { margin-left: auto; padding-left: 8px; color: var(--ca-text); font-weight: 600; font-size: 0.86rem; white-space: nowrap; }
.sv-jobsec-msgs { flex: 0 0 auto; color: var(--ca-text); font-weight: 600; font-size: 0.86rem; white-space: nowrap; }
/* record footers: the edit control sits left, Close right (Create Jobs record, Match details) */
.sv-detail .ca-rec-foot .sv-foot-left { margin-right: auto; }
.sv-detail .ca-rec-foot .sv-foot-left + .ca-btn.solid { margin-right: 8px; }

/* how-to video strip on the Create Jobs tab: first in the pane (every width), 16px above the five cards */
.sv-create .val-root { margin: 0 0 16px; }
/* phone (≤719px — the 2-column button grid): Closed Jobs spans both columns on the third row:
   New Client · Existing / Periodical · Ticket / Closed Jobs. (The strip's order is now the JSX order.) */
@media (max-width: 719px) {
  .sv-jobtypes-5 .sv-jobtype-closed { grid-column: 1 / -1; }
}