/* HTE Service Reports - the program's own sheet, loaded after common.css.
   The web page has no window chrome: no traffic lights, the title bar is the page's top bar.
   Touch devices get larger targets (the tablet the customer signs on). */

html, body { height: 100%; }
body { -webkit-user-select: text; user-select: text; }
.toolbar { padding-top: env(safe-area-inset-top, 0px); height: calc(52px + env(safe-area-inset-top, 0px)); }
.win-name { color: var(--text); font-weight: 600; }
.grow { flex: 1; min-width: 0; }
.lc { text-transform: none; letter-spacing: 0; font-weight: 400; }
[hidden] { display: none !important; }

/* --- the pieces every program's app.css carries --- */
.seg { display: inline-flex; background: var(--sunken); border: 0.5px solid var(--border); border-radius: var(--radius-md); padding: 2px; gap: 2px; }
.seg button { font: inherit; font-size: 12.5px; border: 0; background: transparent; color: var(--text-secondary); padding: 5px 11px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--elevated); color: var(--text); box-shadow: var(--shadow-sm); font-weight: 500; }
.segn { display: inline-block; margin-left: 4px; font-size: 11px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.seg button.on .segn { color: var(--accent); font-weight: 600; }
.search { position: relative; display: flex; align-items: center; }
.search input { font: inherit; width: 260px; padding: 7px 11px 7px 30px; border-radius: var(--radius-md); border: 0.5px solid var(--border-strong); background-color: var(--content); color: var(--text); }
.search.wide input { width: 100%; }
.search input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.search input::placeholder { color: var(--text-tertiary); }
.inp { font: inherit; font-size: 13px; padding: 6px 9px; border-radius: var(--radius-sm); border: 0.5px solid var(--border-strong); background: var(--content); color: var(--text); width: 100%; min-width: 0; }
.inp:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.inp.bad { outline: 2px solid var(--warn); outline-offset: -1px; }
textarea.inp { resize: vertical; line-height: 1.45; }
select.rowselect { font: inherit; font-size: 12px; padding: 3px 6px; border-radius: var(--radius-sm); border: 0.5px solid var(--border-strong); background: var(--elevated); color: var(--text); width: 100%; }
.hint { color: var(--text-tertiary); font-size: 12px; }
.linkbtn { color: var(--accent); background: none; border: 0; font: inherit; font-size: 12.5px; padding: 0; cursor: pointer; }
.linkbtn:hover { text-decoration: underline; }
.btn { cursor: pointer; }
.btn.link { border-color: transparent; background: transparent; box-shadow: none; color: var(--text-secondary); }
.btn.link:hover:not(:disabled) { background: var(--row-hover); color: var(--text); }
a.btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.empty.slim { padding: 14px; text-align: center; }

/* --- title bar: the Procal chip and who is signed in --- */
.userchip { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px 0 3px; border-radius: 999px; border: 0.5px solid var(--border); background: var(--elevated); font: inherit; font-size: 12px; color: var(--text); cursor: pointer; white-space: nowrap; }
.userchip i { width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: 600 10.5px/22px inherit; font-style: normal; text-align: center; }
.userchip:hover { background: var(--row-hover); }

/* --- cards as steps --- */
.card { padding: 12px 14px; gap: 10px; }
.cardhead h2 { display: flex; align-items: center; gap: 8px; }
.stepn { width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--accent-text); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.stepn.done { background: var(--ok); color: #fff; }

/* --- New CSR --- */
.ncsr { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.formcol { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.custsel { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--radius-md); background: var(--selected); border: 0.5px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.custsel .nm { font-weight: 600; font-size: 14px; }
.custsel .sub { color: var(--text-secondary); font-size: 12px; }
.picklist { margin-top: 6px; border: 0.5px solid var(--border-strong); border-radius: var(--radius-md); background: var(--elevated); max-height: 280px; overflow-y: auto; box-shadow: var(--shadow-sm); }
.picklist button { display: flex; width: 100%; align-items: baseline; gap: 10px; text-align: left; border: 0; background: transparent; font: inherit; color: var(--text); padding: 8px 12px; cursor: pointer; border-bottom: 0.5px solid var(--divider); }
.picklist button:last-child { border-bottom: 0; }
.picklist button:hover, .picklist button.hot { background: var(--selected); }
.picklist .sub { color: var(--text-secondary); font-size: 12px; }
.picklist .id { margin-left: auto; color: var(--text-tertiary); font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 11.5px; }
.picklist .none { padding: 10px 12px; color: var(--text-tertiary); }
.recent { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--text-tertiary); margin-top: 8px; }
.recent:empty { display: none; }
.chipbtn { font: inherit; font-size: 12px; border: 0.5px solid var(--border-strong); background: var(--elevated); color: var(--text); border-radius: 999px; padding: 3px 11px; cursor: pointer; }
.chipbtn:hover { background: var(--selected); }
.inrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.inrow.two-one { grid-template-columns: 180px minmax(0, 1fr); }
.fld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fld > label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-tertiary); }
.money { position: relative; }
.money::before { content: "$"; position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); }
.money .inp { padding-left: 20px; font-variant-numeric: tabular-nums; font-weight: 600; }
.instbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.instbar .spacer { margin-left: auto; }
.instwrap { max-height: 46vh; border-radius: var(--radius-md); }
.instwrap tbody td { height: 40px; }
.instwrap th.ck, .instwrap td.ck { width: 40px; text-align: center; }
.instwrap tbody tr { cursor: pointer; }
.instwrap tr.added td { font-style: italic; }
.due { font-variant-numeric: tabular-nums; }
.due.late { color: var(--amber); font-weight: 600; }
.addrow { text-align: left; padding: 2px 0 0; }
.preview { position: sticky; top: 0; display: flex; flex-direction: column; gap: 8px; }
.preview .ph { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); }
.preview .ph .spacer { margin-left: auto; }

/* --- CSRs and Customers --- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.detail { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 0; }
.detail .nm { font-size: 15px; font-weight: 700; }
.kv { display: grid; grid-template-columns: 96px 1fr; gap: 4px 10px; font-size: 12.5px; margin: 0; }
.kv dt { color: var(--text-secondary); }
.kv dd { margin: 0; color: var(--text); }
.people { display: flex; flex-direction: column; gap: 6px; }
.person { display: flex; flex-direction: column; font-size: 12.5px; padding: 6px 8px; border-radius: 6px; background: var(--sunken); }
.person span { color: var(--text-secondary); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }
.dl-lbl { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-tertiary); }
td.acts { text-align: right; }
td.acts .linkbtn { margin-left: 12px; }
td.acts .linkbtn:first-child { margin-left: 0; }
tbody tr.click { cursor: pointer; }
tbody tr.on { background: var(--selected); }
.due.some { color: var(--text); }

/* --- the sign dialog --- */
.modal.dlg .dl-card { font: inherit; text-align: left; cursor: pointer; background: var(--content); color: var(--text); border: 0.5px solid var(--border-strong); }
.modal.dlg .dl-card .ic { width: 28px; height: 28px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--sunken); color: var(--text-secondary); }
.modal.dlg .dl-card.on .ic { background: var(--accent); color: var(--accent-text); }
.modal.dlg .dl-card .ic svg { width: 16px; height: 16px; }
.modal.dlg .order { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; white-space: nowrap; font-size: 12px; color: var(--text-secondary); background: var(--sunken); border-radius: 8px; padding: 8px 10px; }
.modal.dlg .order b { color: var(--text); }
.modal.dlg .order i { font-style: normal; color: var(--text-tertiary); }
.modal.dlg .pair { display: grid; grid-template-columns: 1fr 1.2fr; gap: 10px; }
.modal.dlg .signerpick { display: flex; flex-wrap: wrap; gap: 6px; }

/* --- after a signature: a full-screen step --- */
.handover { position: fixed; inset: 0; z-index: 90; background: var(--window); display: flex; align-items: center; justify-content: center; padding: 24px; }
.handover-card { max-width: 520px; text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.handover-card h2 { font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.handover-card p { color: var(--text-secondary); font-size: 15px; line-height: 1.5; }
.ho-icon { width: 64px; height: 64px; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); }
.ho-icon.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.ho-icon svg { width: 32px; height: 32px; }
.ho-acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.ho-acts .btn { font-size: 15px; padding: 10px 20px; }

/* --- sign-in page --- */
body.signin { display: flex; align-items: center; justify-content: center; background: var(--window); overflow: auto; }
.signin-card { background: var(--elevated); border: 0.5px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-sm); padding: 28px 30px; width: min(420px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 12px; align-items: stretch; text-align: center; }
.signin-logo { height: 56px; width: auto; align-self: center; border-radius: 6px; background: #fff; padding: 2px 6px; }
.signin-card h1 { font-size: 20px; }
.signin-card p { color: var(--text-secondary); }
.signin-note { color: var(--warn) !important; }
.signin-go { padding: 10px 16px; font-size: 14px; }
.signin-list { display: flex; flex-direction: column; gap: 8px; }
.signin-list .btn { display: flex; flex-direction: column; align-items: flex-start; padding: 9px 12px; }
.signin-list .btn span { font-size: 11.5px; color: var(--text-tertiary); }

/* --- the CSR page, drawn for the preview (the PDF is csrpdf.py; this follows it) --- */
.sheet { aspect-ratio: 8.5 / 11; width: 100%; background: #fff; border: 0.5px solid var(--border); border-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 4px 14px rgba(0,0,0,.10); container-type: inline-size; overflow: hidden; }
.pg { --u: calc(100cqw / 612); --b: #1f6fb8; --bd: #15508a; --red: #b3261e; --ink: #1b2430; --mu: #66707c; --ln: #cfd6de;
  position: relative; height: 100%; color: var(--ink); font-family: Helvetica, Arial, sans-serif; font-size: calc(var(--u) * 9); line-height: 1.3; }
.pg * { box-sizing: border-box; }
.pg .ab { position: absolute; }
.pg .logo { left: calc(var(--u) * 36); top: calc(var(--u) * 34); height: calc(var(--u) * 50); }
.pg .addr { left: calc(var(--u) * 36); top: calc(var(--u) * 89); font-size: calc(var(--u) * 6.6); color: var(--mu); }
.pg .tbox { right: calc(var(--u) * 36); top: calc(var(--u) * 34); width: calc(var(--u) * 212); height: calc(var(--u) * 50); border: calc(var(--u) * 1.2) solid var(--b); border-radius: calc(var(--u) * 6); text-align: center; padding-top: calc(var(--u) * 6); }
.pg .tbox .t { font-weight: 700; font-size: calc(var(--u) * 11.5); color: var(--bd); }
.pg .tbox .n { font-weight: 700; font-size: calc(var(--u) * 18); color: var(--red); margin-top: calc(var(--u) * 2); }
.pg .box { left: calc(var(--u) * 36); width: calc(var(--u) * 540); border: calc(var(--u) * .9) solid var(--b); }
.pg .band { background: var(--b); color: #fff; font-weight: 700; font-size: calc(var(--u) * 7.4); text-transform: uppercase; height: calc(var(--u) * 14); line-height: calc(var(--u) * 14); padding-left: calc(var(--u) * 7); }
.pg .two { display: grid; grid-template-columns: 1.55fr 1fr; }
.pg .two > div + div { border-left: calc(var(--u) * .9) solid var(--b); }
.pg .row { display: grid; grid-template-columns: calc(var(--u) * 78) 1fr; align-items: center; height: calc(var(--u) * 16); padding-left: calc(var(--u) * 7); border-bottom: calc(var(--u) * .5) solid var(--ln); white-space: nowrap; overflow: hidden; }
.pg .row:last-child { border-bottom: 0; }
.pg .two > div + div .row { grid-template-columns: calc(var(--u) * 65) 1fr; }
.pg .lbl { font-size: calc(var(--u) * 6.4); font-weight: 700; color: var(--mu); text-transform: uppercase; }
.pg .val { font-size: calc(var(--u) * 9.2); overflow: hidden; text-overflow: ellipsis; }
.pg .work { padding: calc(var(--u) * 6) calc(var(--u) * 7) calc(var(--u) * 6); }
.pg table { width: 100%; border-collapse: collapse; font-size: calc(var(--u) * 8.2); margin-top: calc(var(--u) * 8); table-layout: fixed; }
.pg th { text-align: left; font-size: calc(var(--u) * 6.4); font-weight: 700; color: var(--mu); text-transform: uppercase; border-bottom: calc(var(--u) * .9) solid var(--ink); padding: 0 0 calc(var(--u) * 3); letter-spacing: 0; background: none; position: static; height: auto; }
.pg td { padding: calc(var(--u) * 3.5) 0; border-bottom: calc(var(--u) * .5) solid var(--ln); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: auto; max-width: none; color: var(--ink); }
.pg tbody tr:hover { background: none; }
.pg td b { font-weight: 700; }
.pg .more { color: var(--mu); font-size: calc(var(--u) * 7.4); padding-top: calc(var(--u) * 3); }
.pg .rem { margin-top: calc(var(--u) * 8); }
.pg .rem .txt { font-size: calc(var(--u) * 9); white-space: pre-wrap; overflow: hidden; max-height: calc(var(--u) * 60); }
.pg .bottom { top: calc(var(--u) * 606); height: calc(var(--u) * 150); }
.pg .signs { display: grid; grid-template-columns: 1fr 1fr; height: calc(var(--u) * 120); border-bottom: calc(var(--u) * .9) solid var(--b); }
.pg .signs > div { padding: calc(var(--u) * 6) calc(var(--u) * 7); position: relative; }
.pg .signs > div + div { border-left: calc(var(--u) * .9) solid var(--b); }
.pg .ack { font-size: calc(var(--u) * 6.8); color: var(--mu); }
.pg .sl { position: absolute; left: calc(var(--u) * 7); right: calc(var(--u) * 7); top: calc(var(--u) * 72); border-top: calc(var(--u) * .7) solid var(--ink); font-size: calc(var(--u) * 6.2); color: var(--mu); padding-top: calc(var(--u) * 2); }
.pg .dl { position: absolute; top: calc(var(--u) * 113); border-top: calc(var(--u) * .7) solid var(--ink); }
.pg .dlab { position: absolute; top: calc(var(--u) * 87); }
.pg .cost { display: flex; justify-content: space-between; align-items: center; height: calc(var(--u) * 30); padding: 0 calc(var(--u) * 9); }
.pg .cost .amt { font-weight: 700; font-size: calc(var(--u) * 15); margin-left: calc(var(--u) * 10); }
.pg .foot { left: calc(var(--u) * 36); right: calc(var(--u) * 36); top: calc(var(--u) * 764); border-top: calc(var(--u) * .5) solid var(--ln); padding-top: calc(var(--u) * 3); display: flex; justify-content: space-between; font-size: calc(var(--u) * 5.8); color: var(--mu); }

/* --- narrow screens and tablets --- */
@media (max-width: 1100px) {
  .ncsr { grid-template-columns: minmax(0, 1fr); }
  .preview { position: static; max-width: 420px; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .detail { position: static; }
}
@media (max-width: 760px) {
  .inrow, .inrow.two-one { grid-template-columns: minmax(0, 1fr); }
  .toolbar { gap: 8px; }
  .win-title { display: none; }
  .toolbar-right .sagechip .swhen, .userchip span { display: none; }
  .search input { width: 180px; }
  .content { padding-inline: 12px; }
}
@media (pointer: coarse) {
  .btn { min-height: 40px; }
  .seg button { padding: 8px 13px; }
  .inp, .search input { font-size: 16px; padding-block: 9px; }
  .instwrap tbody td { height: 50px; }
  .check { width: 22px !important; height: 22px !important; }
  select.rowselect { font-size: 15px; padding: 6px 8px; }
  .toolbar .tab { padding: 7px 12px; }
}