/**
 * sales-reps-manager.css — Sales Reps: the sales manager's screens
 * (src/public/js/sales-reps-manager.js).
 *
 * The shared Sales Reps layout (sr-split, sr-grid, sr-kpi, sr-li, sr-tbl,
 * sr-why, sr-note, sr-score, sr-acard…) lives in css/sales-reps.css. This
 * sheet carries only what the manager's screens draw and nobody else does:
 * the cover grid, the booked-against-room bars, the "Needs you" rows, the
 * rep cards and the legend. Copied from the approved playground
 * (docs/projects/sales-reps/playground-v0.2.html, "manager" block), with its
 * one-off hex tints rebuilt from the design tokens.
 *
 * Everything is scoped under .sr-mgr (the root every manager view renders)
 * or carries the sr- prefix, so nothing here can restyle another screen.
 */

/* ── Small local helpers (scoped: other packages may name theirs the same) ── */
/* app-shell.css stacks cards with `.card + .card { margin-top: 14px }`, which
   staggers any card sitting beside another in a grid. These screens space
   cards with their grids and .sr-block instead. */
.sr-mgr .card + .card { margin-top: 0; }
.sr-mgr .card-title { margin: 0; }
.sr-mgr .page-head { flex-wrap: wrap; }
.sr-mgr .page-head > div:first-child { flex: 1 1 320px; }
.sr-mgr .card-head { flex-wrap: wrap; }
/* A held follow-up: its words first, its two buttons drop below them on a phone. */
.sr-mgr .sr-held { flex-wrap: wrap; }
.sr-mgr .sr-held > .sr-grow { flex: 1 1 260px; }
/* The count pill at the right end of a card head (app-shell styles it only inside .card-title). */
.sr-mgr .card-head > .count {
  background: var(--surface-3); color: var(--text-2); font-family: "JetBrains Mono", monospace;
  font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 999px;
}
.sr-mgr h3 { font-size: 14px; margin: 0; font-weight: 600; }
.sr-mgr p { margin: 0; }
.sr-mgr .sr-muted { color: var(--text-3); }
.sr-mgr .sr-small { font-size: 12.5px; }
.sr-mgr .sr-num { font-variant-numeric: tabular-nums; }
.sr-mgr .sr-grow { flex: 1; min-width: 0; }
.sr-mgr .sr-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sr-mgr .sr-stack { display: flex; flex-direction: column; gap: 12px; }
.sr-mgr .sr-block { margin-bottom: 16px; }
.sr-mgr .sr-span { grid-column: 1 / -1; }
.sr-mgr .sr-inset { padding: 4px; }
.sr-mgr .sr-empty { padding: 28px 20px; text-align: center; color: var(--text-3); font-size: 13.5px; }
.sr-mgr .badge { white-space: nowrap; }
.sr-mgr .btn-sm { padding: 6px 11px; font-size: 12.5px; border-radius: 8px; }
.sr-mgr .btn[disabled] { opacity: .45; cursor: not-allowed; }
.sr-mgr .sr-link {
  border: 0; background: transparent; padding: 0; font: inherit; font-weight: 600;
  color: var(--text); text-align: left; cursor: pointer;
}
.sr-mgr .sr-link:hover { color: var(--accent-deep); text-decoration: underline; }
.sr-mgr tr.is-on td { background: var(--accent-softer); }
.sr-mgr td.sr-act { text-align: right; }
.sr-mgr .sr-late { color: var(--danger); font-weight: 600; }
.sr-mgr .sr-met { color: var(--good); font-weight: 600; }
.sr-mgr .sr-under { color: var(--warn); font-weight: 600; }
.sr-mgr .sr-gap-top, .sr-mgr .card.sr-gap-top { margin-top: 16px; }   /* beats the .card + .card reset above */
.sr-mgr .sr-label-gap { margin: 0 0 8px; }
.sr-mgr .sr-when { font-family: "JetBrains Mono", monospace; font-size: 12.5px; color: var(--text-2); min-width: 64px; }
.sr-mgr .sr-mark { font-weight: 700; width: 14px; flex: 0 0 14px; text-align: center; }
.sr-mgr .sr-mark.yes { color: var(--good); }
.sr-mgr .sr-mark.no { color: var(--danger); }
.sr-mgr .sr-field { display: flex; flex-direction: column; gap: 6px; }
.sr-mgr .sr-field label { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.sr-mgr .sr-input {
  border: 1px solid var(--border-strong); border-radius: 10px; padding: 10px 12px; width: 100%;
  background: var(--surface); color: var(--text); font: inherit; font-size: 14px; line-height: 1.55;
}
.sr-mgr textarea.sr-input { min-height: 80px; resize: vertical; }
.sr-mgr .sr-label {
  font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-3);
}

/* ── Team now: the "Late for their shift" card at the top (playground v0.4/v0.5 mgrNow4) ── */
.sr-mgr .sr-late-card { border-color: color-mix(in srgb, var(--danger) 32%, var(--border)); }
.sr-mgr .sr-late-card .sr-late-who { min-width: 200px; }
.sr-mgr .sr-late-card p.sr-late-line { color: var(--text); margin-top: 4px; }
.sr-mgr .sr-late-card .sr-li .avatar { flex: 0 0 auto; }

/* ── Team now: one card per rep ── */
.sr-repcard { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.sr-repcard .sr-who { min-width: 0; }
.sr-repcard .avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* ── Team now: the "Needs you" rows ── */
.sr-alert {
  display: flex; gap: 12px; padding: 12px 20px; align-items: flex-start;
  border-top: 1px solid var(--border-soft);
}
.sr-alert:first-child { border-top: 0; }
.sr-alert .ic {
  width: 28px; height: 28px; border-radius: 8px; flex: 0 0 28px;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
}
.sr-alert .ic.red { background: var(--danger-soft); color: var(--danger); }
.sr-alert .ic.amber { background: var(--warn-soft); color: var(--warn); }
.sr-alert .ic.violet { background: var(--accent-soft); color: var(--accent-deep); }
.sr-alert .ic.calm { background: var(--surface-3); color: var(--text-3); }

/* ── Shifts: the cover grid (a row per day, a cell per hour) ── */
.sr-cover {
  display: grid;
  grid-template-columns: 52px repeat(var(--sr-cols, 15), minmax(0, 1fr));
  gap: 2px; font-size: 10.5px; min-width: 620px;
}
.sr-cover .h { font-family: "JetBrains Mono", monospace; color: var(--text-3); text-align: center; }
.sr-cover .d { font-family: "JetBrains Mono", monospace; color: var(--text-2); font-size: 11px; display: flex; align-items: center; }
.sr-cover .c { height: 24px; border-radius: 4px; background: var(--surface-3); }
.sr-cover .c.gap {
  background: var(--danger-soft);
  border: 1px dashed color-mix(in srgb, var(--danger) 45%, var(--surface));
}
/* One tint per rep, in the order the legend lists them. */
.sr-cover .c.s1, .sr-legend i.s1 { background: color-mix(in srgb, var(--accent) 32%, var(--surface)); }
.sr-cover .c.s2, .sr-legend i.s2 { background: color-mix(in srgb, var(--good) 36%, var(--surface)); }
.sr-cover .c.s3, .sr-legend i.s3 { background: color-mix(in srgb, var(--warn) 40%, var(--surface)); }
.sr-cover .c.s4, .sr-legend i.s4 { background: color-mix(in srgb, var(--plum) 34%, var(--surface)); }
.sr-cover .c.s5, .sr-legend i.s5 { background: color-mix(in srgb, var(--rose) 32%, var(--surface)); }
.sr-cover .c.s6, .sr-legend i.s6 { background: color-mix(in srgb, var(--accent-deep) 30%, var(--surface)); }

.sr-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); }
.sr-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -2px; }
.sr-legend i.gap {
  background: var(--danger-soft);
  border: 1px dashed color-mix(in srgb, var(--danger) 45%, var(--surface));
}

/* ── Shifts: booked against room, a bar per day ── */
.sr-supply { display: flex; align-items: flex-end; gap: 10px; height: 150px; padding: 10px 0 0; }
.sr-supply .sr-sup-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; min-width: 0; }
.sr-supply .sr-sup-bars { width: 100%; max-width: 44px; position: relative; flex: 1; display: flex; align-items: flex-end; }
.sr-supply .sr-sup-cap { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--text-3); }
.sr-supply .sr-sup-bk { width: 100%; background: var(--accent); border-radius: 6px 6px 2px 2px; }
.sr-supply .sr-sup-bk.short { background: var(--warn); }
.sr-supply .sr-sup-lab { font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--text-3); }

/* ── Custom packages (round 6, playground v0.5 pkgMakeSheet5 / pkgPage5) ──
   The sheets are CBSheet panels (#cb-sheet .rel-editor, 420px by default); their
   body is wrapped in .sr-mgr.sr-pkg, which is what widens them here. The fields
   are the platform's own sheet fields (.cbs-form / .cbs-f, outreach-dashboard.css). */
#cb-sheet .rel-editor:has(.sr-pkg) { max-width: 600px; }
#cb-sheet .rel-editor:has(.sr-pkg-frame), #cb-sheet .rel-editor:has(.sr-pkg-sum) { max-width: 760px; }
.sr-pkg .sr-note { margin-bottom: 12px; }
.sr-pkg .cbs-form { padding-bottom: 0; }
.sr-pkg .cbs-f > span label { font: inherit; color: inherit; }
.sr-pkg .cbs-f > .cbs-err[hidden], .sr-pkg .cbs-err[hidden] { display: none; }
.sr-pkg-money { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.sr-pkg-money .cbs-f[hidden] { display: none; }
.sr-pkg .sr-pkg-hint { font-size: 12.5px; color: var(--text-3); line-height: 1.45; }
.sr-pkg .sr-pkg-gap { margin-top: 10px; }
.sr-pkg .vi-row { margin-top: 2px; }
/* The real payment page, as drafted (P15's private preview), in a frame the size of a phone-to-laptop card. */
.sr-pkg-frame { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: #fff; }
.sr-pkg-frame iframe { display: block; width: 100%; height: min(60vh, 560px); border: 0; }
/* Where the real page cannot be shown: what is on it, laid out as pkgPage5 is (no business colours on the client). */
.sr-pkg-sum { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--surface); }
.sr-pkg-sum-h { padding: 16px 18px; background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #fff; }
.sr-pkg-sum-h h3 { color: #fff; font-size: 18px; }
.sr-pkg-sum-h p { opacity: .85; margin-top: 4px; }
.sr-pkg-sum-b { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.sr-pkg-sum-b ul { margin: 0; padding-left: 18px; font-size: 13.5px; display: flex; flex-direction: column; gap: 4px; }
.sr-pkg-sum .sr-pkg-price { font-family: "Bricolage Grotesque", sans-serif; font-size: 22px; font-weight: 700; }
.sr-pkg-problems { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; color: var(--text); }
@media (max-width: 480px) {
  .sr-pkg-frame iframe { height: 56vh; }
}
.sr-pkg-money { align-items: start; }
/* A phone: the primary button gets its own row above Decline and Cancel, rather than three squeezed in one. */
@media (max-width: 480px) {
  #cb-sheet .rel-editor:has(.sr-pkg) .rel-ed-foot-right { flex-wrap: wrap; }
  #cb-sheet .rel-editor:has(.sr-pkg) .rel-ed-foot-right .rel-ed-primary { flex: 1 1 100%; order: -1; }
}

/* ── Round 7 (playground v0.6): the release6 sheet and the shift line on a rep's card ── */
.sr-mgr .sr-ask { color: var(--warn); font-weight: 600; }
#cb-sheet .rel-editor:has(.sr-rel) { max-width: 560px; }
.sr-rel { display: flex; flex-direction: column; gap: 12px; }
.sr-rel .cbs-f > span label { font: inherit; color: inherit; }
.sr-rel .cbs-err[hidden] { display: none; }
.sr-rel .cbs-f > textarea { min-height: 64px; }
/* What is left, as the to-do list draws it (v0.6 .td6): a kind mark, the title, its detail. */
.sr-mgr .sr-td-list { padding: 0; }
.sr-mgr .sr-td { display: flex; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border-soft); align-items: flex-start; min-width: 0; }
.sr-mgr .sr-td:first-child { border-top: 0; }
.sr-mgr .sr-td h3 { font-size: 14px; line-height: 1.3; }
.sr-mgr .sr-td-ic {
  width: 28px; height: 28px; border-radius: 8px; flex: 0 0 28px; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12.5px; background: var(--surface-3); color: var(--text-2);
}
.sr-mgr .sr-td-ic.k-followup_unsent, .sr-mgr .sr-td-ic.k-reply, .sr-mgr .sr-td-ic.k-package_renew { background: var(--accent-soft); color: var(--accent-deep); }
.sr-mgr .sr-td-ic.k-followup_held, .sr-mgr .sr-td-ic.k-call_soon { background: var(--danger-soft); color: var(--danger); }
.sr-mgr .sr-td-ic.k-deal_no_next_step, .sr-mgr .sr-td-ic.k-decide { background: var(--warn-soft); color: var(--warn); }
.sr-mgr .sr-td-ic.k-next_step_due { background: var(--good-soft); color: var(--good); }

/* ── Team now: the Dialer (playground-dialer-v0.1.html sections 4 and 5, round 8b) ──
   The line (today's queue, the switch and the settings beside it) and the welcome call's words as settings.
   The figure tiles are the area's .sr-stat (css/sales-reps.css). */
.sr-mgr .sr-dial-headr { gap: 12px; }
.sr-dial-now { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--good); white-space: nowrap; }
.sr-dial-now i { width: 8px; height: 8px; border-radius: 50%; background: var(--good); animation: sr-dial-blink 1.6s ease-in-out infinite; }
@keyframes sr-dial-blink { 50% { opacity: .35; } }
.sr-dial-funnel { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
/* Why the Dialer is not ringing (GET /dialer/stats health): a plain warning, and nothing at all while it is fine. */
.sr-dial-warn { margin: 0; font-size: 13px; font-weight: 600; color: var(--warn); background: var(--warn-soft); border-radius: 10px; padding: 10px 12px; }
.sr-dial-funnel .sr-stat b { font-size: 20px; }
.sr-dial-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.sr-dial-set { border: 1px solid var(--border-soft); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; background: var(--surface-2); min-width: 0; }
.sr-dial-set span { font-size: 12px; color: var(--text-3); }
.sr-dial-set b { font-size: 14px; }
.sr-mgr .sr-dial-set button.toggle { margin-top: 0; align-self: center; }
.sr-mgr .sr-dial-set .toggle.on { background: var(--good); }
.sr-mgr .sr-err:empty { display: none; }
/* The words: the playground's .say rows, a quote you can change in place. */
.sr-says { display: flex; flex-direction: column; gap: 12px; }
.sr-say { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: start; border-bottom: 1px solid var(--border-soft); padding-bottom: 12px; }
.sr-say:last-child { border-bottom: 0; padding-bottom: 0; }
.sr-say .when { font-size: 12.5px; color: var(--text-3); font-weight: 600; }
.sr-say q { display: block; font-size: 15px; line-height: 1.55; quotes: none; color: var(--text); }
.sr-say .why { font-size: 12px; color: var(--text-3); margin-top: 4px; }
.sr-mgr .sr-say-acts { gap: 16px; margin-top: 2px; }
.sr-say-edit .textarea { width: 100%; min-height: 84px; font-size: 14.5px; }
.sr-ph { font-family: "JetBrains Mono", monospace; font-size: .8em; background: var(--accent-softer); color: var(--accent-deep); border-radius: 5px; padding: 1px 4px; }
@container sr-area (max-width: 980px) {
  .sr-dial-funnel { grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* eight as two rows of four */
}
@container sr-area (max-width: 620px) {
  .sr-dial-funnel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sr-say { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (prefers-reduced-motion: reduce) { .sr-dial-now i { animation: none; } }

/* Pipeline: a stage row with deals opens them (Alex, 3 Nov: "I can't easily see who those bookings are"). */
.sr-mgr tr.sr-stage-row { cursor: pointer; }
.sr-mgr tr.sr-stage-row:hover td, .sr-mgr tr.sr-stage-row:focus-visible td { background: var(--surface-2); }
.sr-mgr tr.sr-stage-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sr-mgr .sr-seewho { margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--accent-deep); }
/* Shifts: the cover card's week arrows. */
.sr-mgr .sr-weeknav { display: inline-flex; align-items: center; gap: 4px; margin-right: 12px; }