/* ==========================================================================
   Big Pig presenter — rep tools (Today screen, track sub-items, send to Jobber)
   Rep-only surfaces. Same night palette as the pitch, denser and more utilitarian.
   ========================================================================== */
.rep-chip {
  display:inline-flex; align-items:center; gap:.5em; margin-left:14px;
  font:inherit; font-weight:600; font-size:clamp(.74rem,1.7vh,.9rem); letter-spacing:.06em;
  color:#fff; background:rgba(255,255,255,.1); border:1.5px solid rgba(255,255,255,.22);
  border-radius:var(--radius-pill); padding:.45em 1em; cursor:pointer; max-width:40vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rep-chip i { width:.55em; height:.55em; border-radius:50%; background:var(--bb-yellow); flex:0 0 auto; }
.rep-chip.is-pinned i { background:#3DD56D; }
.rep-chip b { font-weight:800; }
.home-head-right { display:flex; align-items:center; }

/* ---------- full-screen rep surfaces ---------- */
.rep-screen {
  position:fixed; inset:0; z-index:60; display:flex; flex-direction:column;
  background:var(--bb-night); color:#fff;
  padding:max(18px, env(safe-area-inset-top)) clamp(20px,4vw,48px) max(16px, env(safe-area-inset-bottom));
}
.rs-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding-bottom:clamp(10px,2vh,18px); border-bottom:1px solid rgba(255,255,255,.12); }
.rs-head .kicker { color:var(--bb-yellow); }
.rs-head .display-sm { font-size:clamp(1.6rem,4.6vh,2.6rem); }
.rs-sub { margin-top:.3em; font-weight:300; opacity:.7; font-size:clamp(.82rem,1.9vh,1rem); }
.rs-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.rs-body { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:clamp(10px,2vh,18px) 0; }
.rs-foot { display:flex; gap:10px; flex-wrap:wrap; padding-top:clamp(10px,2vh,16px); border-top:1px solid rgba(255,255,255,.12); }
.rs-btn {
  font:inherit; font-weight:700; font-size:clamp(.82rem,1.9vh,1rem); color:var(--bb-plum);
  background:var(--bb-yellow); border:1.5px solid var(--bb-yellow); border-radius:var(--radius-pill);
  padding:.65em 1.4em; cursor:pointer; white-space:nowrap;
}
.rs-btn.ghost { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.25); color:#fff; }
.rs-btn.pink { background:var(--grad-sunrise); border-color:transparent; color:#fff; }
.rs-btn:disabled { opacity:.4; cursor:default; }
.rs-btn.sm { padding:.45em 1em; font-size:clamp(.74rem,1.7vh,.88rem); }
.rs-note { font-weight:300; opacity:.65; font-size:clamp(.8rem,1.8vh,.95rem); line-height:1.45; }
.rs-warn { color:var(--bb-yellow); font-weight:600; }
.rs-err { color:#FF8A8A; font-weight:600; }
.rs-ok { color:#3DD56D; font-weight:600; }

/* ---------- Today screen ---------- */
.appt-group { font-weight:700; font-size:.78em; letter-spacing:.14em; text-transform:uppercase; opacity:.6; margin:clamp(10px,2vh,18px) 0 8px; }
.appt-list { display:flex; flex-direction:column; }
.appt-card {
  display:grid; grid-template-columns:7.2em 1fr auto; gap:14px; align-items:center;
  width:100%; text-align:left; font:inherit; color:#fff; background:rgba(255,255,255,.05);
  border:1.5px solid rgba(255,255,255,.12); border-radius:var(--radius-lg); padding:clamp(12px,2vh,18px) clamp(14px,2vw,22px); margin-bottom:10px; cursor:pointer;
}
.appt-card:active { background:rgba(255,255,255,.1); }
.appt-card.is-done { opacity:.55; }
.appt-time { font-weight:800; font-size:clamp(1.05rem,2.6vh,1.35rem); }
.appt-time small { display:block; font-weight:300; font-size:.7em; opacity:.6; }
.appt-who { min-width:0; }
.appt-who b { display:block; font-weight:700; font-size:clamp(1rem,2.4vh,1.25rem); }
.appt-who span { display:block; font-weight:300; opacity:.75; font-size:clamp(.82rem,1.9vh,.98rem); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.appt-meta { text-align:right; font-weight:300; font-size:clamp(.74rem,1.7vh,.88rem); opacity:.65; }
.appt-meta b { display:block; font-weight:700; opacity:1; }
.appt-empty { padding:clamp(20px,4vh,40px) 0; text-align:center; opacity:.6; font-weight:300; }

/* ---------- modals (rep pick, new customer, queue) ---------- */
.rs-modal {
  position:fixed; inset:0; z-index:70; display:flex; align-items:center; justify-content:center;
  background:rgba(28,7,25,.78); padding:20px;
}
.rs-card {
  width:min(100%, 640px); max-height:90vh; overflow-y:auto; background:var(--bb-plum); color:#fff;
  border:1.5px solid rgba(255,255,255,.14); border-radius:var(--radius-xl); padding:clamp(18px,3vh,28px) clamp(18px,3vw,30px);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.8);
}
.rs-card h3 { font-weight:800; font-size:clamp(1.2rem,3vh,1.6rem); margin-bottom:.3em; }
.rs-card .rs-note { margin-bottom:1em; }
.rs-list { display:flex; flex-direction:column; gap:8px; }
.rs-list button { font:inherit; text-align:left; color:#fff; background:rgba(255,255,255,.07); border:1.5px solid rgba(255,255,255,.14); border-radius:var(--radius-md); padding:.8em 1em; cursor:pointer; }
.rs-list button small { display:block; opacity:.6; font-weight:300; }
.rs-form { display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; }
.rs-form label { display:flex; flex-direction:column; gap:4px; font-weight:600; font-size:.78em; letter-spacing:.08em; text-transform:uppercase; opacity:.85; }
.rs-form label.wide { grid-column:1 / -1; }
.rs-form input, .rs-form select, .sf-field input, .sf-field select, .sf-field textarea, .rt-row select, .rt-row input, .rt-house select {
  font:inherit; font-weight:500; font-size:1rem; color:#fff; background:rgba(0,0,0,.3); border:1.5px solid rgba(255,255,255,.18);
  border-radius:var(--radius-sm); padding:.6em .8em; outline:none; width:100%; min-width:0;
}
.rs-form input:focus, .sf-field input:focus, .sf-field textarea:focus, .rt-row select:focus, .rt-row input:focus { border-color:var(--bb-pink); }
select option { color:#000; }
.rs-card .rs-actions { margin-top:16px; }

/* ---------- queue ---------- */
.q-row { display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center; padding:.7em 0; border-top:1px solid rgba(255,255,255,.1); }
.q-row b { font-weight:700; }
.q-row small { display:block; opacity:.6; font-weight:300; }
.q-badge { font-weight:800; font-size:.72em; letter-spacing:.1em; text-transform:uppercase; padding:.35em .8em; border-radius:var(--radius-pill); background:rgba(255,255,255,.12); }
.q-badge.queued { background:rgba(253,183,26,.2); color:var(--bb-yellow); }
.q-badge.sending { background:rgba(242,105,36,.25); color:#FFB27A; }
.q-badge.sent { background:rgba(61,213,109,.2); color:#3DD56D; }
.q-badge.failed { background:rgba(255,77,77,.22); color:#FF8A8A; }
.q-badge.draft { opacity:.7; }

/* ---------- rep panel: track & colour ---------- */
.rt-house { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin:.4em 0 .8em; }
.rt-house label { display:flex; flex-direction:column; gap:4px; font-weight:600; font-size:.72em; letter-spacing:.1em; text-transform:uppercase; opacity:.8; }
.rt-side { border-top:1px solid rgba(255,255,255,.08); padding:.6em 0; }
.rt-side-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.rt-side-head b { font-weight:700; font-size:clamp(.92rem,2.1vh,1.1rem); }
.rt-side-head small { font-weight:300; opacity:.65; margin-left:.5em; }
.rt-side-actions { display:inline-flex; gap:6px; }
.rt-cam, .rt-mini {
  font:inherit; font-weight:700; font-size:.78em; color:#fff; background:rgba(255,255,255,.1); border:1.5px solid rgba(255,255,255,.22);
  border-radius:var(--radius-pill); padding:.4em .9em; cursor:pointer; white-space:nowrap;
}
.rt-cam.has { border-color:#3DD56D; }
.rt-row { display:grid; grid-template-columns:1fr 5.5em auto; gap:8px; align-items:center; margin-top:6px; }
.rt-row input { text-align:right; }
.rt-sum { font-size:.8em; margin-top:4px; opacity:.75; }
.rt-sum.bad { color:var(--bb-yellow); opacity:1; font-weight:700; }
.rp-sendsec .rs-btn { width:100%; justify-content:center; display:inline-flex; font-size:clamp(.95rem,2.2vh,1.15rem); padding:.8em 1.2em; }
.rp-status { margin-top:.6em; font-size:.88em; opacity:.8; }

/* ---------- send flow ---------- */
.sf-steps { display:flex; gap:6px; align-items:center; }
.sf-step { display:inline-flex; align-items:center; gap:.5em; font-weight:700; font-size:clamp(.72rem,1.6vh,.86rem); letter-spacing:.08em; text-transform:uppercase; opacity:.45; padding:.4em .9em; border-radius:var(--radius-pill); border:1.5px solid transparent; }
.sf-step i { width:1.5em; height:1.5em; border-radius:50%; display:inline-grid; place-items:center; background:rgba(255,255,255,.14); font-style:normal; font-size:.9em; }
.sf-step.is-active { opacity:1; border-color:rgba(255,255,255,.3); }
.sf-step.is-done { opacity:.8; } .sf-step.is-done i { background:#3DD56D; color:var(--bb-plum); }
.sf-pane { display:none; } .sf-pane.is-on { display:block; }
.sf-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,2.4vh,22px) clamp(16px,3vw,36px); }
.sf-field { display:flex; flex-direction:column; gap:8px; }
.sf-field.wide { grid-column:1 / -1; }
.sf-field > span { font-weight:700; font-size:.76em; letter-spacing:.12em; text-transform:uppercase; opacity:.8; }
.sf-field > span em { font-style:normal; color:var(--bb-yellow); }
.sf-chips { display:flex; flex-wrap:wrap; gap:8px; }
.sf-field textarea { min-height:5.5em; resize:vertical; }
.sf-foot { display:flex; justify-content:space-between; align-items:center; gap:10px; padding-top:clamp(10px,2vh,16px); border-top:1px solid rgba(255,255,255,.12); }
.sf-foot .right { display:flex; gap:10px; align-items:center; }
.ph-bar { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.ph-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
.ph-item { position:relative; aspect-ratio:4/3; border-radius:var(--radius-md); overflow:hidden; background:rgba(255,255,255,.06); }
.ph-item img { width:100%; height:100%; object-fit:cover; }
.ph-item span { position:absolute; left:8px; bottom:8px; font-weight:700; font-size:.78em; background:rgba(0,0,0,.6); padding:.25em .6em; border-radius:var(--radius-pill); }
.ph-item button { position:absolute; top:6px; right:6px; width:28px; height:28px; border-radius:50%; border:0; background:rgba(0,0,0,.65); color:#fff; font:inherit; font-weight:800; cursor:pointer; }
.ph-item.is-up::after { content:"↑ uploaded"; position:absolute; top:8px; left:8px; font-size:.7em; font-weight:700; color:#3DD56D; background:rgba(0,0,0,.6); padding:.2em .5em; border-radius:var(--radius-pill); }
.ck-list { display:flex; flex-direction:column; }
.ck-item { display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; padding:.8em 0; border-top:1px solid rgba(255,255,255,.1); cursor:pointer; }
.ck-item:first-child { border-top:0; }
.ck-box { width:30px; height:30px; border-radius:8px; border:2px solid rgba(255,255,255,.35); display:grid; place-items:center; font-weight:800; color:var(--bb-plum); margin-top:2px; }
.ck-item.is-on .ck-box { background:#3DD56D; border-color:#3DD56D; }
.ck-item.is-auto .ck-box { background:rgba(255,255,255,.18); border-color:transparent; color:#fff; }
.ck-item.is-block .ck-box { border-color:#FF8A8A; }
.ck-item b { font-weight:700; font-size:clamp(.95rem,2.2vh,1.15rem); }
.ck-item small { display:block; font-weight:300; opacity:.75; margin-top:.2em; line-height:1.4; }
.ck-dead { margin-top:clamp(12px,2.4vh,20px); padding:12px 16px; border-radius:var(--radius-md); background:rgba(255,255,255,.06); font-weight:300; font-size:.9em; line-height:1.5; }
.ck-dead b { font-weight:700; }
.sum-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(14px,3vw,36px); }
.sum-box { background:rgba(255,255,255,.05); border:1.5px solid rgba(255,255,255,.12); border-radius:var(--radius-lg); padding:clamp(12px,2vh,20px) clamp(14px,2vw,22px); }
.sum-box h4 { font-weight:700; font-size:.76em; letter-spacing:.12em; text-transform:uppercase; opacity:.7; margin-bottom:.6em; }
.sum-line { display:flex; justify-content:space-between; gap:12px; padding:.35em 0; font-size:clamp(.88rem,2vh,1.02rem); }
.sum-line span { min-width:0; }
.sum-line small { display:block; opacity:.6; font-weight:300; }
.sum-line b { font-weight:700; white-space:nowrap; }
.sum-line.total { border-top:1.5px solid rgba(255,255,255,.18); margin-top:.4em; padding-top:.6em; font-size:1.1em; }
.sum-disc { margin-top:.6em; padding:10px 14px; border-radius:var(--radius-md); background:rgba(239,42,193,.18); border:1.5px solid var(--bb-pink); }
.sum-disc b { color:var(--bb-bubblegum); }
.sum-issues { margin-top:14px; padding:12px 16px; border-radius:var(--radius-md); background:rgba(255,77,77,.14); border:1.5px solid rgba(255,138,138,.5); }
.sum-issues li { margin-left:1.2em; line-height:1.5; }
.sum-result { margin-top:14px; padding:14px 16px; border-radius:var(--radius-md); background:rgba(61,213,109,.12); border:1.5px solid rgba(61,213,109,.5); line-height:1.5; }
.sum-result a { color:#fff; font-weight:800; }
.sum-result.pending { background:rgba(253,183,26,.12); border-color:rgba(253,183,26,.5); }
.sum-result.bad { background:rgba(255,77,77,.14); border-color:rgba(255,138,138,.5); }

/* ---------- toasts ---------- */
.toasts { position:fixed; left:50%; bottom:max(20px, env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:90; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast { background:var(--bb-plum); color:#fff; border:1.5px solid rgba(255,255,255,.2); border-radius:var(--radius-pill); padding:.7em 1.3em; font-weight:600; box-shadow:0 10px 30px -8px rgba(0,0,0,.7); animation:toastin .25s var(--ease-out); }
.toast.ok { border-color:#3DD56D; } .toast.bad { border-color:#FF8A8A; }
@keyframes toastin { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

@media (orientation:portrait) {
  .sf-grid, .sum-grid, .rs-form { grid-template-columns:1fr; }
  .rt-house { grid-template-columns:1fr; }
  .appt-card { grid-template-columns:5.6em 1fr; }
  .appt-meta { grid-column:2; text-align:left; }
}