/* Salesrep Appointment Compliance — scoped to .sac-* so nothing here can reach another module. Every colour comes from the hub's own variables in styles.css; this file adds no palette of its own. Split out of salesrep_appointment_compliance.js on 2026-08-24 to keep that file under the ~700-line cap. */ /* the control bar — date picker and the one button that reads LP */ .sac-bar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:16px 24px; border-bottom:1px solid var(--border); background:var(--bg-soft); } .sac-bar label { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); } .sac-date { font:inherit; font-size:14px; font-weight:600; color:var(--text-1); background:var(--card); border:1px solid var(--border); border-radius:9px; padding:8px 12px; cursor:pointer; } .sac-date:focus { outline:2px solid var(--accent); outline-offset:1px; } .sac-stamp { margin-left:auto; text-align:right; font-size:12px; color:var(--text-3); line-height:1.5; white-space:nowrap; } .sac-stamp b { color:var(--text-2); font-weight:600; } .sac-stamp.stale b { color:var(--amber); } /* rep list */ .sac-row { display:flex; align-items:center; gap:11px; padding:11px 16px; border-bottom:1px solid var(--border); cursor:pointer; transition:background .12s; } .sac-row:last-child { border-bottom:none; } .sac-row:hover { background:var(--bg-soft); } .sac-row.picked { background:rgba(59,158,218,.06); } .sac-row input[type=checkbox] { width:16px; height:16px; flex:none; cursor:pointer; accent-color:var(--blue); } .sac-row input[type=checkbox]:disabled { cursor:not-allowed; opacity:.3; } .sac-who { flex:1; min-width:0; } .sac-who .nm { font-size:13.5px; font-weight:700; color:var(--text-1); } .sac-who .sub { font-size:11.5px; color:var(--text-2); margin-top:1px; line-height:1.45; } /* Just the number. The card it sits in already says what is being counted. */ .sac-tag { font-size:12px; font-weight:800; padding:2px 0; border-radius:6px; white-space:nowrap; flex:none; width:30px; text-align:center; font-variant-numeric:tabular-nums; } .sac-tag.ready { background:var(--green-soft); color:var(--green); } .sac-tag.held { background:rgba(239,68,68,.1); color:var(--red); } /* Nothing to hold. A middot rather than a red 0 — the slot keeps its width so the rows still line up, and it stops reading as a fault. */ .sac-tag.zero { background:transparent; color:var(--text-3); font-weight:600; } /* Already with the rep. Blue, not green: green is "ready to go out", and these have gone. Deliberately quieter than a live row — it is there to be read, not acted on. */ .sac-tag.done { background:rgba(59,158,218,.12); color:var(--blue); } .sac-row.done { background:linear-gradient(90deg,rgba(59,158,218,.05),transparent); } .sac-row.done:hover { background:linear-gradient(90deg,rgba(59,158,218,.09),transparent); } /* Sits exactly where the tick box would, so the rows still line up. */ .sac-check-done { width:16px; height:16px; flex:none; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color:var(--blue); opacity:.65; cursor:default; } .sac-done { color:var(--blue); font-weight:700; opacity:.85; } .sac-open { font-size:14px; color:var(--text-3); flex:none; } /* sidebar action groups */ .sac-group { padding:16px 20px; border-bottom:1px solid var(--border); } .sac-group:last-child { border-bottom:none; } .sac-group h4 { margin:0 0 3px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); } .sac-btn { width:100%; border-radius:9px; padding:10px 14px; font-size:13px; font-weight:700; cursor:pointer; transition:all .15s; border:1px solid var(--border); background:var(--card); color:var(--text-1); margin-bottom:8px; } /* :not(.go) matters. Without it this rule replaced the primary button's gradient with a pale background while its text stayed white — so hovering "Issue N appointments" made the label disappear. */ .sac-btn:hover:not(:disabled):not(.go) { background:var(--bg-soft); border-color:var(--accent); } .sac-btn:disabled:not(.go) { opacity:.4; cursor:not-allowed; } .sac-btn:last-child { margin-bottom:0; } .sac-btn.go { background:linear-gradient(135deg,#1e5799,#3b9eda); color:#fff; border:none; padding:12px 14px; font-size:14px; box-shadow:0 3px 12px rgba(30,87,153,.28); } .sac-btn.go:hover:not(:disabled) { background:linear-gradient(135deg,#2467b4,#4bb0ea); color:#fff; transform:translateY(-1px); box-shadow:0 6px 18px rgba(30,87,153,.38); } /* Readable when it is off, rather than white-on-pale. Opacity is deliberately not used here: it is what made the disabled state unreadable. */ .sac-btn.go:disabled { background:#e2e8f0; box-shadow:none; transform:none; color:#64748b; cursor:not-allowed; opacity:1; } .sac-btn.bar { width:auto; margin:0; padding:8px 16px; } .sac-mini { display:flex; gap:8px; } .sac-mini .sac-btn { margin-bottom:8px; font-size:12px; padding:7px 10px; } .sac-msg { font-size:12px; line-height:1.6; border-radius:9px; padding:10px 12px; margin-top:10px; white-space:pre-wrap; } .sac-msg.info { background:rgba(59,158,218,.08); color:var(--text-1); border:1px solid rgba(59,158,218,.25); } .sac-msg.warn { background:rgba(245,158,11,.09); color:#78350f; border:1px solid rgba(245,158,11,.3); } .sac-msg.bad { background:rgba(239,68,68,.07); color:#7f1d1d; border:1px solid rgba(239,68,68,.25); } /* modal */ .sac-mask { position:fixed; inset:0; background:rgba(15,32,64,.45); z-index:900; display:flex; align-items:center; justify-content:center; padding:24px; backdrop-filter:blur(2px); } .sac-modal { background:var(--card); border-radius:16px; width:100%; max-width:640px; max-height:82vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 24px 60px rgba(11,31,58,.3); } .sac-modal-head { padding:20px 24px 16px; border-bottom:1px solid var(--border); display:flex; align-items:flex-start; gap:14px; } .sac-modal-head .t { flex:1; min-width:0; } .sac-modal-head h3 { margin:0; font-size:18px; font-weight:800; color:var(--text-1); } .sac-modal-head p { margin:4px 0 0; font-size:13px; color:var(--text-2); line-height:1.5; } .sac-x { border:none; background:var(--bg-soft); color:var(--text-2); width:30px; height:30px; border-radius:8px; cursor:pointer; font-size:16px; line-height:1; flex:none; } .sac-x:hover { background:var(--border); } .sac-modal-body { overflow-y:auto; padding:6px 24px 22px; } .sac-day { font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--text-3); margin:18px 0 2px; } .sac-day.today { color:var(--accent); } .sac-appt { display:flex; align-items:baseline; gap:12px; padding:8px 0; border-bottom:1px solid var(--border); font-size:13.5px; } .sac-appt:last-child { border-bottom:none; } /* The day being issued has no time yet — LP's queue carries a date only. */ .sac-appt.notime .c { padding-left:2px; } .sac-appt .t { width:70px; flex:none; color:var(--text-2); font-variant-numeric:tabular-nums; } .sac-appt .c { flex:1; min-width:0; color:var(--text-1); font-weight:600; } .sac-appt .c small { display:block; font-weight:400; color:var(--text-3); font-size:12px; } .sac-code { font-size:11px; font-weight:700; padding:3px 9px; border-radius:6px; white-space:nowrap; flex:none; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; } .sac-code.missing { background:rgba(239,68,68,.1); color:var(--red); } .sac-code.recorded { background:var(--green-soft); color:var(--green); } .sac-code.upcoming { background:#f8fafc; color:var(--text-3); border:1px dashed var(--border); } .sac-code.office { background:#f1f5f9; color:var(--text-2); } /* Over, but never handed to the rep — an office miss, not theirs. */ .sac-code.unissued { background:rgba(245,158,11,.10); color:#92400e; border:1px dashed rgba(245,158,11,.45); } .sac-code.unknown { background:rgba(245,158,11,.12); color:var(--amber); } .sac-alert { border-left:3px solid var(--red); background:rgba(239,68,68,.05); border-radius:0 12px 12px 0; padding:13px 18px; } .sac-alert.warn { border-left-color:var(--amber); background:rgba(245,158,11,.06); } .sac-alert.calm { border-left-color:var(--accent); background:rgba(59,158,218,.06); } .sac-alert b { display:block; margin-bottom:4px; font-size:13px; color:var(--text-1); } .sac-alert p { margin:0; font-size:12.5px; color:var(--text-2); line-height:1.6; } .sac-blank { padding:34px 24px; color:var(--text-3); font-size:13px; line-height:1.7; } /* ── Rep email dialog ─────────────────────────────────────────────────────── */ .sac-mailrow { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:12px; align-items:center; padding:9px 0; border-bottom:1px solid var(--border); } .sac-mailrow:last-child { border-bottom:none; } .sac-mailrow label { font-size:13.5px; font-weight:600; color:var(--text-1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sac-mailrow input { font:inherit; font-size:13px; color:var(--text-1); width:100%; background:var(--card); border:1px solid var(--border); border-radius:8px; padding:7px 10px; } .sac-mailrow input:focus { outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); } .sac-mailrow input.missing { background:#fffbeb; border-color:#fcd34d; } .sac-mailrow input::placeholder { color:var(--text-3); } .sac-modal-foot { display:flex; align-items:center; gap:10px; padding:14px 24px; border-top:1px solid var(--border); background:var(--bg-soft); } .sac-modal-foot #sacRosterMsg { flex:1; font-size:12px; color:var(--red); } .sac-modal-foot .sac-btn { width:auto; margin:0; } /* the one line of explanation that stays on screen */ .sac-note { margin:12px 0 0; font-size:11.5px; line-height:1.55; color:var(--text-3); } .sac-note b { color:var(--text-2); } /* Reps on the roster with nothing in the window — one line, not N rows */ /* where a rep's address came from */ .sac-src { display:block; font-size:10.5px; font-weight:600; letter-spacing:.03em; color:var(--text-3); margin-top:2px; } .sac-src.own { color:var(--accent); } .sac-src.missing { color:var(--amber); } /* ── Reminder preview ─────────────────────────────────────────────────────── */ .sac-mailmeta { border:1px solid var(--border); border-radius:10px; overflow:hidden; margin-top:14px; } .sac-mailmeta > div { display:flex; gap:12px; padding:8px 12px; font-size:12.5px; color:var(--text-1); border-bottom:1px solid var(--border); word-break:break-word; } .sac-mailmeta > div:last-child { border-bottom:none; } .sac-mailmeta span { width:56px; flex:none; color:var(--text-3); font-weight:600; font-size:11px; letter-spacing:.04em; text-transform:uppercase; padding-top:2px; } .sac-mailframe { width:100%; height:460px; border:1px solid var(--border); border-radius:10px; margin-top:14px; background:#fff; display:block; } .sac-testrow { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:16px; padding-top:14px; border-top:1px solid var(--border); } .sac-testrow label { font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-3); } .sac-testrow input { flex:1; min-width:180px; font:inherit; font-size:13px; color:var(--text-1); background:var(--card); border:1px solid var(--border); border-radius:8px; padding:8px 10px; } .sac-testrow input:focus { outline:2px solid var(--accent); outline-offset:1px; } /* ── The two lanes, side by side ────────────────────────────────────────────── Two cards, not two stacked sections: the workflow is a choice between two piles, and putting them beside each other is what makes it read as one. Each card owns its ticks and its buttons, so a tick can only mean that card's action. The definitions live in the panel on the right, which is what keeps the cards down to a heading, a count and the names. */ .sac-main { display:flex; flex-direction:column; gap:16px; min-width:0; } .sac-lanes { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:stretch; } .sac-lane { display:flex; flex-direction:column; min-width:0; background:var(--card); border:1px solid var(--border); border-radius:16px; overflow:hidden; } .sac-lane.behind { border-color:rgba(239,68,68,.28); } .sac-lane-head { display:flex; align-items:center; gap:10px; padding:14px 16px 12px; border-bottom:1px solid var(--border); } .sac-lane-head h4 { margin:0; flex:1; min-width:0; font-size:14px; font-weight:800; color:var(--text-1); letter-spacing:-.01em; } .sac-lane.behind .sac-lane-head h4 { color:var(--red); } .sac-count { font-size:11px; font-weight:700; color:var(--text-3); white-space:nowrap; font-variant-numeric:tabular-nums; } .sac-link { background:none; border:none; padding:0; cursor:pointer; font:inherit; font-size:11px; font-weight:700; color:var(--accent); } .sac-link:hover { text-decoration:underline; } .sac-list { flex:1; } /* Buttons pinned to the foot, so the two cards line up whatever their length. */ .sac-act { display:flex; gap:8px; padding:12px 16px; border-top:1px solid var(--border); background:var(--bg-soft); } .sac-act .sac-btn { flex:1; width:auto; margin-bottom:0; padding:10px 8px; font-size:12.5px; } .sac-lane .sac-msg { margin:0 16px 14px; } .sac-blank.sm { flex:1; padding:26px 16px; font-size:12.5px; } /* The arithmetic, spelled out: every booked appointment and why it is or is not ours to issue. These numbers add to the total on purpose. */ .sac-recon { padding:12px 18px; border:1px solid var(--border); border-radius:12px; background:var(--bg-soft); font-size:11.5px; line-height:1.7; color:var(--text-3); font-variant-numeric:tabular-nums; } .sac-recon b { color:var(--text-2); font-weight:700; } .sac-more { color:var(--text-3); font-weight:600; } /* The day being issued, at the top of the rep dialog — what the number on the board row is actually counting. */ .sac-day.held { color:var(--red); } .sac-day.ready { color:var(--green); } /* One column below the point where two lanes stop being readable. */ @media (max-width:1180px) { .sac-lanes { grid-template-columns:1fr; } } /* ── The automatic check ────────────────────────────────────────────────────── Additions only — nothing above is modified, so the board looks exactly as it did. Palette comes from the hub's own variables, same as everything else. */ /* "✓ Email Sent" on a Cleared for Issue row. Green because it is a completed fact, and small because the row's own name and count come first. */ .sac-sent { display:inline-block; margin-top:3px; font-size:10.5px; font-weight:800; letter-spacing:.02em; padding:2px 7px; border-radius:999px; background:var(--green-soft); color:var(--green); border:1px solid rgba(16,185,129,.22); cursor:help; } .sac-freq { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:10px; font-size:12px; color:var(--text-2); } .sac-freq label { font-weight:600; } .sac-num { width:56px; padding:5px 7px; font-size:12px; font-weight:700; text-align:center; color:var(--text-1); background:var(--card); border:1px solid var(--border); border-radius:7px; } .sac-num:focus { outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); } /* The window gets its own row rather than trailing the frequency. Left to wrap on its own it orphaned "between"; held together it overflowed the 320px rail. */ .sac-card .sac-freq + .sac-freq { margin-top:6px; } /* Fixed width, and no picker icon. The sidebar row is 248px: two native time boxes at their default 107px leave 34px, which is not enough for a label — and a range with no label is two numbers nobody can read. */ .sac-time { width:84px; padding:5px 7px; font-size:12px; font-weight:700; color:var(--text-1); background:var(--card); text-align:center; border:1px solid var(--border); border-radius:7px; transition:border-color .15s ease; } .sac-time:hover { border-color:var(--accent); } .sac-time:focus { outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); } .sac-time::-webkit-calendar-picker-indicator { display:none; } .sac-pick { padding:5px 26px 5px 9px; font-size:12px; font-weight:700; color:var(--text-1); background:var(--card); border:1px solid var(--border); border-radius:7px; appearance:none; cursor:pointer; background-image:linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%); background-position:calc(100% - 14px) 52%, calc(100% - 9px) 52%; background-size:5px 5px, 5px 5px; background-repeat:no-repeat; transition:border-color .15s ease, box-shadow .15s ease; } .sac-pick:hover { border-color:var(--accent); } .sac-pick:focus { outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); } .sac-mon-state { padding-top:10px; border-top:1px solid var(--border); } .sac-bad { color:var(--red); } /* ── The automatic-check panel ──────────────────────────────────────────────── The Hub's own idiom: a bluish glass card, accent gradients, soft shadow. Every colour is a variable from styles.css — this file still adds no palette. */ /* The timer. Its own card, because it is the one control that decides whether anything happens on its own at all. */ .sac-card { margin-top:10px; padding:13px 14px 11px; border-radius:14px; border:1px solid rgba(59,158,218,.24); background:linear-gradient(135deg, rgba(59,158,218,.11), rgba(99,102,241,.07)); box-shadow:0 2px 10px rgba(15,23,42,.04); transition:border-color .18s, box-shadow .18s, background .18s; } .sac-card.live { border-color:rgba(59,158,218,.42); background:linear-gradient(135deg, rgba(59,158,218,.13), rgba(99,102,241,.08)); box-shadow:0 4px 18px rgba(30,87,153,.13); } .sac-card .sac-note { margin-top:9px; } /* What a check does. Indented under the timer, so the nesting says "these are the steps" and no sentence has to. */ .sac-sub { margin:12px 0 4px; padding:2px 0 2px 13px; border-left:2px solid rgba(59,158,218,.24); } .sac-subhead { font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--text-3); margin-bottom:2px; } /* A pill switch. The tick boxes in the rep list mean "issue this one"; a switch means "leave this running". Different shape, different meaning. */ .sac-tog { display:flex; align-items:flex-start; gap:9px; margin-top:9px; cursor:pointer; user-select:none; } .sac-tog input { position:absolute; opacity:0; width:0; height:0; } .sac-tog .knob { flex:none; position:relative; width:32px; height:18px; margin-top:1px; border-radius:999px; background:#cbd5e1; transition:background .18s; box-shadow:inset 0 1px 2px rgba(15,23,42,.14); } .sac-tog .knob::after { content:''; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(15,23,42,.3); transition:transform .18s; } .sac-tog input:checked + .knob { background:linear-gradient(135deg,var(--blue),var(--accent)); } .sac-tog input:checked + .knob::after { transform:translateX(14px); } .sac-tog input:focus-visible + .knob { outline:2px solid var(--accent); outline-offset:2px; } .sac-tog:hover .knob { box-shadow:inset 0 1px 2px rgba(15,23,42,.14), 0 0 0 3px rgba(59,158,218,.11); } .sac-tog .txt { font-size:12.5px; font-weight:600; color:var(--text-1); line-height:1.35; } .sac-tog .txt i { display:block; margin-top:2px; font-style:normal; font-size:11px; font-weight:500; color:var(--text-3); line-height:1.5; } /* The one setting that can be asked for and not delivered. */ .sac-warnline { margin:8px 0 0; font-size:11.5px; line-height:1.5; color:#7f1d1d; background:rgba(239,68,68,.07); border-radius:8px; padding:7px 9px; } /* The board's two verdicts, explained with the same two tags the rows use — the colour does the work four sentences used to. */ .sac-legend { margin-top:9px; display:flex; flex-direction:column; gap:8px; } .sac-legend > div { display:flex; align-items:flex-start; gap:9px; font-size:11.5px; line-height:1.55; color:var(--text-3); } .sac-legend b { color:var(--text-1); font-weight:700; } .sac-legend .sac-tag { margin-top:1px; } /* Each sidebar heading gets the hub's accent bar, so the rail reads as one designed column rather than four grey labels. */ .sac-group h4 { display:flex; align-items:center; gap:7px; } .sac-group h4::before { content:''; flex:none; width:3px; height:11px; border-radius:2px; background:linear-gradient(180deg, var(--blue), var(--accent)); } /* ── Earlier evenings ───────────────────────────────────────────────────────── A list of nights, and a dialog for one of them. `last_board` is overwritten by every check, so without this the previous evening is simply gone. */ .sac-hist { display:flex; flex-direction:column; gap:5px; margin-top:9px; } .sac-histrow { display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:8px 10px; border-radius:10px; cursor:pointer; border:1px solid var(--border); background:var(--card); transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; } .sac-histrow:hover { border-color:var(--accent); background:rgba(59,158,218,.06); box-shadow:0 2px 10px rgba(30,87,153,.09); } .sac-histrow .d { flex:none; font-size:12px; font-weight:800; color:var(--text-1); } .sac-histrow .s { flex:1; min-width:0; font-size:11px; color:var(--text-3); line-height:1.45; } .sac-histrow .s b { color:var(--text-2); } .sac-histrow .c { flex:none; font-size:13px; color:var(--text-3); } .sac-histlane { margin-top:16px; } .sac-histrep { display:flex; align-items:baseline; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); font-size:13px; } .sac-histrep:last-child { border-bottom:none; } /* The rep who actually owed a result that evening — the reason for the panel. */ .sac-histrep.owed { background:rgba(239,68,68,.04); border-radius:8px; padding-left:8px; padding-right:8px; } .sac-histrep .n { flex:none; min-width:150px; font-weight:700; color:var(--text-1); } .sac-histrep .w { flex:1; min-width:0; color:var(--text-2); font-size:12px; } .sac-none { flex:none; font-size:11px; font-weight:600; color:var(--text-3); } /* ── Tonight's checks ───────────────────────────────────────────────────────── Every check of the evening as a row: time, a mark, what it did. The mark is the only colour, so a missed or failed check stands out in a column of ✓. */ .sac-seg { display:flex; gap:3px; margin:9px 0 0; padding:3px; border-radius:10px; background:var(--bg-soft); border:1px solid var(--border); } .sac-seg button { flex:1; border:none; background:transparent; border-radius:7px; padding:5px 8px; font-size:11.5px; font-weight:700; color:var(--text-3); cursor:pointer; transition:background .15s ease, color .15s ease, box-shadow .15s ease; } .sac-seg button:hover:not(.on) { color:var(--text-1); } .sac-seg button.on { background:var(--card); color:var(--text-1); box-shadow:0 1px 6px rgba(30,87,153,.14); } .sac-tl-day { margin-top:9px; } .sac-tl { list-style:none; margin:6px 0 0; padding:0; } .sac-tl li { display:grid; grid-template-columns:58px 14px 1fr; gap:6px; align-items:baseline; padding:5px 0; font-size:11.5px; line-height:1.45; border-bottom:1px dashed var(--border); } .sac-tl li:last-child { border-bottom:none; } .sac-tl .t { color:var(--text-2); font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; } .sac-tl .i { text-align:center; font-weight:800; } .sac-tl .x { color:var(--text-2); min-width:0; } .sac-tl .ok .i, .sac-tl .sent .i { color:#16a34a; } .sac-tl .signin .i, .sac-tl .catchup .i { color:var(--accent); } .sac-tl .failed .i { color:#dc2626; } .sac-tl .failed .x { color:#991b1b; } .sac-tl .missed .i, .sac-tl .waiting .i { color:#d97706; } .sac-tl .missed .x { color:#92400e; } .sac-tl .upcoming .t, .sac-tl .upcoming .x, .sac-tl .off .x { color:var(--text-3); } .sac-tl-head { margin:12px 0 0; font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--text-3); } /* ── LeadPerfection sign-in dialog ─────────────────────────────────────────── */ /* Narrower than the rep preview on purpose: two fields read as a form, and a 640px box around them reads as a page that lost its content. */ .sac-modal.narrow { max-width:420px; } .sac-signin { margin:12px 0 4px; } .sac-signin label { display:block; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-3); margin:0 0 4px; } .sac-signin input { font:inherit; font-size:13.5px; color:var(--text-1); width:100%; padding:9px 11px; border:1px solid var(--border); border-radius:9px; background:var(--bg-soft); margin-bottom:12px; } .sac-signin input:focus { outline:2px solid var(--accent); outline-offset:1px; background:var(--card); } /* Both buttons need width:auto — .sac-btn is width:100% by default, which in a flex row squeezes "Sign in" onto two lines behind a full-width Cancel. */ .sac-signin .sac-mini { display:flex; gap:8px; margin-bottom:4px; } .sac-signin .sac-mini .sac-btn { margin-bottom:0; width:auto; flex:1; } .sac-signin .sac-mini .sac-btn.go { flex:2; } /* ── Rep tabs in the reminder preview ─────────────────────────────────────── */ /* These had no styling at all until 2026-09-01 and rendered as raw browser buttons inside an otherwise finished dialog. They scroll sideways rather than wrap: eleven reps on two lines would push the email itself off the screen. */ /* `flex:none` on the strip: it is a flex child of a modal capped at 82vh, so without it a long email squashes the tabs and clips them. */ .sac-mailtabs { display:flex; align-items:center; gap:6px; padding:12px 24px; flex:none; overflow-x:auto; overflow-y:hidden; border-bottom:1px solid var(--border); background:var(--bg-soft); } .sac-mailtabs::-webkit-scrollbar { height:0; } /* An explicit line-height and min-height, so a name with a descender — "Garvey, James" — cannot be clipped by whatever line-height the page happens to inherit here. It was cut off in the real modal and not in isolation, which is what an inherited value does. */ .sac-tab { flex:none; border:1px solid var(--border); background:var(--card); color:var(--text-2); font:inherit; font-size:12.5px; font-weight:600; line-height:1.5; min-height:30px; padding:5px 13px; border-radius:999px; cursor:pointer; white-space:nowrap; transition:background .15s, border-color .15s, color .15s; } .sac-tab:hover:not(.on) { border-color:var(--accent); color:var(--text-1); } .sac-tab.on { background:linear-gradient(135deg,#1e5799,#3b9eda); border-color:transparent; color:#fff; box-shadow:0 2px 8px rgba(30,87,153,.28); } /* ── Which day is being closed out, versus which is being issued ──────────── */ /* Two dates on a screen with no labels look like a mistake. They are one day apart and they do NOT both move at midnight — at 8 AM the board is still finishing yesterday, which is the whole reason this line exists. */ /* 24px to match .sac-bar. `.run-panel` has no padding of its own, so a margin here would sit this line to the left of everything above it. */ .sac-cycle { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:11px 24px; font-size:12px; color:var(--text-3); } .sac-cycle:empty { display:none; } .sac-cycle b { color:var(--text-1); font-weight:700; } .sac-cycle .c { color:var(--text-2); } .sac-cycle .s { color:var(--text-3); font-weight:700; } /* ── Midnight report ──────────────────────────────────────────────────────── The one free-text field in this module. Full width of the 320px rail rather than the fixed 84px of the time boxes — an address is long and truncating it would hide which mailbox the nightly report actually goes to. */ .sac-field { margin-top:10px; } .sac-field label { display:block; margin-bottom:4px; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-2); } .sac-text { width:100%; box-sizing:border-box; padding:6px 9px; font-size:12px; color:var(--text-1); background:var(--card); border:1px solid var(--border); border-radius:7px; transition:border-color .15s ease; } .sac-text:hover { border-color:var(--accent); } .sac-text:focus { outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); } .sac-hint { display:block; margin-top:4px; font-size:11px; color:var(--text-2); } /* A switch that cannot be turned on yet. Greyed rather than hidden, so the thing you have to do first is visible beside the thing you wanted to do. */ .sac-tog.off-limits { opacity:.5; cursor:not-allowed; } .sac-tog.off-limits input { cursor:not-allowed; }