/* ── Themes ──────────────────────────────────────────────────────── */
:root {
  --bg:            #071126;
  --bg2:           #081a38;
  --card:          #102447;
  --border:        #254572;
  /* TurnQ brand palette (dark) */
  --blue:          #35a7ff;
  --blue-dark:     #087ff2;
  --blue-solid:    #0869e8;
  --blue-bg:       rgba(22,142,255,0.16);
  --green:         #34d399;
  --green-dark:    #059669;
  --green-bg:      rgba(52,211,153,0.13);
  --orange:        #fbbf24;
  --orange-dark:   #d97706;
  --orange-solid:  #7c3300;
  --orange-bg:     rgba(251,191,36,0.14);
  --red:           #f87171;
  --red-dark:      #dc2626;
  --red-bg:        rgba(248,113,113,0.13);
  --purple:        #c084fc;
  --purple-mid:    #a855f7;
  --purple-dark:   #6b21a8;
  --purple-bg:     rgba(168,85,247,0.11);
  --purple-border: rgba(168,85,247,0.40);
  --yellow:        #fde047;
  --text:          #eef6ff;
  --text-muted:    #82a2c9;
  --text-dim:      #b5c9e2;
  --radius:        12px;
  --radius-sm:     8px;
}

body.light {
  --bg:            #eef6ff;
  --bg2:           #ffffff;
  --card:          #ffffff;
  --border:        #c9daf0;
  --blue:          #087ff2;
  --blue-dark:     #075ac8;
  --blue-solid:    #0869e8;
  --blue-bg:       rgba(8,127,242,0.10);
  --green:         #059669;
  --green-dark:    #047857;
  --green-bg:      rgba(5,150,105,0.10);
  --orange:        #b45309;
  --orange-dark:   #92400e;
  --orange-solid:  #b45309;
  --orange-bg:     rgba(180,83,9,0.12);
  --red:           #dc2626;
  --red-dark:      #b91c1c;
  --red-bg:        rgba(220,38,38,0.10);
  --purple:        #7c3aed;
  --purple-mid:    #7c3aed;
  --purple-dark:   #5b21b6;
  --purple-bg:     rgba(124,58,237,0.10);
  --purple-border: rgba(124,58,237,0.38);
  --text:          #102442;
  --text-muted:    #66809f;
  --text-dim:      #395775;
}

/* ── Colorblind-friendly override (Okabe–Ito) ─────────────────────── */
body.colorblind {
  --blue:          #56b4e9;
  --blue-dark:     #0072b2;
  --blue-solid:    #0072b2;
  --blue-bg:       rgba(86,180,233,0.13);
  --green:         #35c89a;
  --green-dark:    #009e73;
  --green-bg:      rgba(0,158,115,0.14);
  --orange:        #f0b43c;
  --orange-dark:   #e69f00;
  --orange-solid:  #8a5c00;
  --orange-bg:     rgba(230,159,0,0.16);
  --red:           #f47c5e;
  --red-dark:      #d55e00;
  --red-bg:        rgba(213,94,0,0.13);
  --purple:        #e08bc0;
  --purple-mid:    #cc79a7;
  --purple-dark:   #8e4775;
  --purple-bg:     rgba(204,121,167,0.10);
  --purple-border: rgba(204,121,167,0.42);
}
body.colorblind.light {
  --blue:          #0072b2;
  --blue-dark:     #005a8c;
  --blue-solid:    #0072b2;
  --blue-bg:       rgba(0,114,178,0.10);
  --green:         #007a59;
  --green-dark:    #00684c;
  --green-bg:      rgba(0,158,115,0.10);
  --orange:        #825800;
  --orange-dark:   #6f4b00;
  --orange-solid:  #825800;
  --orange-bg:     rgba(230,159,0,0.16);
  --red:           #a43f00;
  --red-dark:      #873400;
  --red-bg:        rgba(213,94,0,0.10);
  --purple:        #8e4775;
  --purple-mid:    #8e4775;
  --purple-dark:   #74375f;
  --purple-bg:     rgba(204,121,167,0.11);
  --purple-border: rgba(142,71,117,0.42);
}

/* ── Reset ───────────────────────────────────────────────────────── */
*  { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  min-height: 100dvh;
  overflow-x: hidden;
  transition: background 0.2s, color 0.2s;
}

/* ── Loading ─────────────────────────────────────────────────────── */
.loading-screen { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100dvh; gap:12px; }
.loading-icon   { font-size:48px; }
.loading-text   { color:var(--text-muted); font-size:16px; }

/* ── Required login gate ─────────────────────────────────────────── */
.login-gate {
  min-height:100dvh; padding:28px 14px;
  display:flex; align-items:flex-start; justify-content:center;
  background:radial-gradient(circle at top, var(--blue-bg), transparent 42%);
}
.login-gate-card { width:100%; max-width:460px; text-align:center; }
.login-brand { width:min(100%, 360px); margin:2px auto 28px; }
.login-brand img { display:block; width:100%; height:auto; }
.login-brand-light { display:none !important; }
body.light .login-brand-dark { display:none; }
body.light .login-brand-light { display:block !important; }
.login-gate > *, .login-gate-card > p { color:var(--text); }
.login-gate-card > p { margin:0 0 20px; color:var(--text-dim); font-size:14px; }
.login-user-list { display:flex; flex-direction:column; gap:9px; text-align:left; }
.login-user {
  width:100%; display:flex; align-items:center; gap:12px;
  padding:11px 13px; color:var(--text); background:var(--card);
  border:1px solid var(--border); border-radius:var(--radius-sm);
  font:inherit; font-weight:650; cursor:pointer;
}
.login-user:active { border-color:var(--blue); transform:scale(.99); }
.login-user > span:nth-child(2) { flex:1; }
.login-empty { padding:18px; border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-muted); text-align:center; }
.login-theme { margin-top:18px; padding:9px 14px; color:var(--text-dim); background:none; border:1px solid var(--border); border-radius:100px; cursor:pointer; }
.product-meta { color:var(--text-muted); font-size:10px; line-height:1.4; letter-spacing:.2px; }
.login-product-meta { margin-top:18px; }
.app-version { color:var(--text-muted); font-size:10px; font-weight:650; vertical-align:middle; white-space:nowrap; }
.app-product-meta { padding:0 12px 88px; text-align:center; }
.admin-product-meta { padding:8px 0 0; text-align:center; }
.secure-login-card { max-width:430px; }
.secure-login-form { display:flex; flex-direction:column; gap:12px; width:100%; margin-top:8px; text-align:left; }
.secure-login-form .btn-submit { width:100%; }
.admin-login-link { width:100%; margin-top:10px; padding:11px; border:1px solid var(--border); border-radius:var(--radius-sm); background:transparent; color:var(--text-dim); font-size:14px; font-weight:650; cursor:pointer; }
.admin-login-link:active { background:var(--border); }
.form-note { margin:0; color:var(--text-dim); font-size:13px; line-height:1.45; }
.modal-footer-inline { display:flex; justify-content:flex-end; gap:8px; }
.modal-footer-inline .btn-cancel, .modal-footer-inline .btn-submit { flex:0 1 180px; }

.secure-migration-card { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px; border:1px solid var(--blue); border-radius:var(--radius-sm); background:var(--blue-bg); }
.secure-migration-card > div { display:flex; flex-direction:column; gap:3px; }
.secure-migration-card strong { font-size:14px; color:var(--text); }
.secure-migration-card small { font-size:12px; color:var(--text-dim); line-height:1.4; }
.secure-migration-card .btn-submit { flex:none; padding:10px 14px; font-size:13px; }
.secure-migration-card.complete { border-color:var(--green); background:var(--green-bg); }

.admin-dashboard { width:min(1200px,92vw); margin:0 auto; padding:26px 0 90px; display:flex; flex-direction:column; gap:18px; }
.admin-dashboard-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.admin-dashboard-head h1 { margin:0 0 4px; font-size:24px; }
.admin-dashboard-head p { margin:0; color:var(--text-muted); font-size:14px; }
.admin-add-toggle { flex:none; padding:11px 16px; }
.admin-form-card, .admin-users-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; }
.admin-form-card h2 { margin:0 0 14px; font-size:18px; }
.admin-user-form { display:grid; grid-template-columns:1fr 1fr 140px 160px; gap:12px; margin-bottom:12px; }
.admin-user-list { display:flex; flex-direction:column; gap:7px; }
.admin-user-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 12px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); }
.admin-user-row.inactive { opacity:.65; }
.admin-user-copy { display:flex; flex-direction:column; gap:3px; min-width:0; }
.admin-user-copy strong { font-size:14px; }
.admin-user-copy small { color:var(--text-muted); font-size:12px; text-transform:capitalize; }
.admin-user-actions { display:flex; align-items:center; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
.admin-section-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.admin-section-heading .section-label { margin:0; }

@media (max-width:760px) {
  .secure-migration-card { align-items:stretch; flex-direction:column; }
  .secure-migration-card .btn-submit { width:100%; }
  .admin-dashboard { width:auto; margin:0; padding:18px 12px 90px; }
  .admin-dashboard-head { align-items:stretch; flex-direction:column; }
  .admin-add-toggle { width:100%; }
  .admin-user-form { grid-template-columns:1fr 1fr; }
  .admin-user-row { align-items:flex-start; flex-direction:column; }
  .admin-user-actions { width:100%; justify-content:flex-start; }
}

@media (max-width:390px) {
  .admin-user-form { grid-template-columns:1fr; }
}
.default-pin-note { padding:10px 12px; border-radius:8px; background:var(--blue-bg); color:var(--text-dim); font-size:13px; }

/* ── Header ──────────────────────────────────────────────────────── */
.header {
  position: sticky; top:0; z-index:100;
  background: linear-gradient(135deg, var(--bg2), #0b326b);
  border-bottom: 1px solid var(--border);
  padding: 8px 12px;
  display: flex; align-items: center; justify-content: space-between;
}
body.light .header { background:linear-gradient(135deg,#ffffff,#e7f3ff); }
.header-left  { display:flex; align-items:center; gap:8px; }
.header-brand-text { display:flex; flex-direction:column; align-items:flex-start; line-height:1.05; }
.header-title { font-size:17px; font-weight:700; letter-spacing:-0.3px; }
.sync-status { display:inline-flex; align-items:center; gap:4px; margin-top:3px; font-size:10px; font-weight:700; color:var(--text-muted); }
.sync-dot { width:6px; height:6px; border-radius:50%; background:var(--text-muted); }
.sync-status.live { color:var(--green); }
.sync-status.live .sync-dot { background:var(--green); }
.sync-status.saving, .sync-status.connecting, .sync-status.reconnecting { color:var(--blue); }
.sync-status.saving .sync-dot, .sync-status.connecting .sync-dot, .sync-status.reconnecting .sync-dot { background:var(--blue); animation:sync-pulse 1s infinite alternate; }
.sync-status.offline, .sync-status.error { color:var(--red); }
.sync-status.offline .sync-dot, .sync-status.error .sync-dot { background:var(--red); }
@keyframes sync-pulse { from { opacity:.35; } to { opacity:1; } }

.header-actions { display:flex; align-items:center; gap:6px; }

/* user pill in header */
.user-pill {
  display: flex; align-items:center; gap:6px;
  background: var(--card); border:1px solid var(--border);
  border-radius: 100px; padding: 4px 10px 4px 4px;
  color:var(--text); cursor: pointer; font-size:13px; font-weight:600;
}
.user-pill:active { opacity:.8; }
.user-pill .av-sm { width:24px; height:24px; font-size:10px; }

.btn-theme {
  background: var(--card); border:1px solid var(--border);
  color: var(--text-muted); border-radius:8px;
  padding:6px 10px; font-size:16px; cursor:pointer; line-height:1;
}
.btn-theme:active { opacity:.8; }

.btn-undo {
  background: var(--border); color:var(--text-dim);
  border:none; border-radius:var(--radius-sm);
  padding:6px 10px; font-size:13px; cursor:pointer;
}
.btn-undo:active { opacity:.7; }

.btn-manager {
  background:var(--card); border:1px solid var(--border);
  color:var(--text); border-radius:var(--radius-sm);
  padding:6px 12px; font-size:14px; cursor:pointer; font-weight:500;
}
.btn-manager.active { background:var(--blue-solid); border-color:var(--blue); color:#fff; }
.btn-manager:active { opacity:.8; }

/* ── Content ─────────────────────────────────────────────────────── */
.content {
  padding: 12px 12px 80px;
  display: flex; flex-direction:column; gap:12px;
  max-width: 600px; margin:0 auto;
}

/* ── Next Up ─────────────────────────────────────────────────────── */
.next-up-card {
  background:linear-gradient(135deg,#0f1b3d 0%,#1e3a8a 100%);
  border:1px solid var(--blue);
  border-radius:var(--radius);
  padding:11px 12px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
body.light .next-up-card {
  background:linear-gradient(135deg,#f0f9fd 0%,#c9e9f7 100%);
}
.next-up-card.empty { background:var(--card); border-color:var(--border); opacity:.7; min-height:58px; }
.next-up-copy { min-width:0; display:flex; flex-direction:column; gap:4px; }
.next-up-person { min-width:0; display:flex; align-items:center; gap:8px; }
.next-up-label { font-size:11px; font-weight:700; letter-spacing:2px; color:var(--blue); text-transform:uppercase; }
.next-up-name  { min-width:0; font-size:21px; font-weight:800; letter-spacing:-0.3px; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.next-up-name.empty-name { font-size:17px; color:var(--text-muted); }
body.light .next-up-name { color:#003b5c; }

.next-up-status {
  font-size:11px; padding:3px 8px; border-radius:20px;
  background:rgba(52,211,153,0.15); border:1px solid rgba(52,211,153,0.35);
  align-self:flex-start;
}

.btn-take-up {
  flex:0 0 auto; background:var(--blue-solid); color:#fff;
  border:none; border-radius:100px;
  padding:10px 18px; font-size:14px; font-weight:700; cursor:pointer;
}
.btn-take-up:active { background:var(--blue-dark); }

/* ── Sections ────────────────────────────────────────────────────── */
.section { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.section.purple-section { border-color:var(--purple-border); }

.section-header {
  padding:9px 14px;
  font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--text-muted); border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:8px;
}
.section.purple-section .section-header { color:var(--purple-mid); border-bottom-color:var(--purple-border); }

.badge {
  background:var(--border); color:var(--text-dim);
  border-radius:100px; padding:1px 7px; font-size:11px; font-weight:700;
}
.empty-state { padding:20px; text-align:center; color:var(--text-muted); font-size:14px; }

/* ── Avatar ──────────────────────────────────────────────────────── */
.avatar {
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:700; color:#fff;
  flex-shrink:0; user-select:none; letter-spacing:-0.5px;
}
.avatar.emoji { background:var(--border); font-size:20px; }
.av-sm { width:28px; height:28px; font-size:11px; }

/* ── Status Chip ─────────────────────────────────────────────────── */
.status-chip {
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:600; cursor:pointer;
  border-radius:100px; padding:2px 8px 2px 5px;
  border:none; background:none; color:inherit; line-height:1.4;
  transition:background 0.15s;
}
.status-chip:active { opacity:.7; }
.status-dot {
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
}
.status-chip.available .status-dot { background:var(--green); }
.status-chip.available             { color:var(--green); }
.status-chip.busy     .status-dot  { background:var(--red); }
.status-chip.busy                  { color:var(--red); }
.status-chip.active-up .status-dot { background:var(--purple); }
.status-chip.active-up             { color:var(--purple); }
.next-up-status-row {
  display:flex; align-items:center; gap:8px; margin-top:5px;
  flex-wrap:wrap;
}
.next-up-status {
  min-height:28px; padding:4px 10px 4px 8px; cursor:default;
  border:1px solid color-mix(in srgb, var(--green) 65%, transparent);
  background:color-mix(in srgb, var(--green) 10%, transparent);
  font-size:12px; font-weight:700;
}
.btn-change-status {
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:5px;
  background:var(--blue-solid); color:#fff;
  border:none; border-radius:100px;
  padding:10px 18px; font-size:14px; font-weight:700; cursor:pointer;
}
.change-status-icon { display:none; }
.mobile-change-label { display:none; }
.btn-change-status:active { background:var(--blue-dark); }
.btn-change-status:focus-visible { outline:2px solid var(--blue-solid); outline-offset:2px; }
@media (max-width:767px) {
  .btn-change-status {
    padding:8px 14px; font-size:13px;
  }
  .change-status-label { display:none; }
  .mobile-change-label { display:inline; }
  .waiting-available { display:none; }
  .waiting-change-status {
    flex-shrink:0; width:auto; min-width:0; min-height:28px;
    padding:7px 13px;
  }
}

/* ── Rep Cards ───────────────────────────────────────────────────── */
.rep-card {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  border-bottom:1px solid var(--border); min-height:60px;
}
.rep-card:last-child { border-bottom:none; }
.rep-card.is-next     { background:var(--blue-bg); }
.rep-card.is-phone    { background:var(--orange-bg); border-left:3px solid var(--orange); }
body.light .rep-card.is-phone { background:var(--blue-bg); border-left-color:var(--blue); }
body.light .rep-card.is-phone .phone-badge { color:var(--blue-dark); }
.rep-card.with-cust   { background:var(--purple-bg); }
.rep-card.off-floor   { opacity:.7; }

.reorder-arrows { display:flex; flex-direction:column; gap:0; flex-shrink:0; }
.btn-arrow {
  background:none; border:none; color:var(--text-muted);
  font-size:14px; padding:8px 10px; cursor:pointer; line-height:1; border-radius:6px;
  min-width:36px; min-height:30px;
  display:flex; align-items:center; justify-content:center;
}
.btn-arrow:disabled      { opacity:.2; cursor:default; }
.btn-arrow:not(:disabled):active { background:var(--border); }

.rep-info  { flex:1; display:flex; flex-direction:column; gap:3px; min-width:0; }
.rep-name  { font-size:16px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rep-name-row { display:flex; align-items:center; gap:8px; min-width:0; }
.rep-name-row .rep-name { min-width:0; }
.queue-position {
  flex:0 0 auto;
  min-width:27px; height:25px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 7px;
  border-radius:8px;
  background:var(--blue-solid);
  color:#fff;
  border:1px solid rgba(255,255,255,.32);
  font-size:13px; font-weight:800;
  line-height:1;
  font-variant-numeric:tabular-nums;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.phone-badge { font-size:11px; color:var(--orange); font-weight:700; }

.phone-assignment-alert {
  position:fixed; top:72px; left:50%; z-index:300;
  width:calc(100% - 24px); max-width:560px;
  display:flex; align-items:center; gap:11px;
  padding:13px 15px; border-radius:12px;
  background:var(--orange-solid); color:#fff;
  border:1px solid var(--orange);
  box-shadow:0 8px 28px rgba(0,0,0,.35);
  transform:translate(-50%,-18px); opacity:0;
  transition:transform .22s ease, opacity .22s ease;
  pointer-events:none;
}
.phone-assignment-alert.show { transform:translate(-50%,0); opacity:1; }
.phone-assignment-alert > span { font-size:25px; }
.phone-assignment-alert strong { font-size:14px; }
.phone-assignment-alert small { font-size:12px; opacity:.9; }

.timer-row { display:flex; align-items:center; gap:6px; }
.timer {
  font-size:14px; font-weight:700; color:var(--purple);
  font-variant-numeric:tabular-nums; letter-spacing:0.5px;
}
.off-floor-label { font-size:12px; color:var(--red); font-weight:600; }
.restroom-timer { font-variant-numeric:tabular-nums; }
.restroom-timer.overdue { color:var(--orange); font-weight:800; }
.restroom-warning-list { display:flex; flex-direction:column; gap:8px; }
.restroom-warning {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 13px; border:1px solid var(--orange);
  border-radius:var(--radius); background:var(--orange-bg);
}
.restroom-warning > div { min-width:0; display:flex; flex-direction:column; gap:3px; }
.restroom-warning strong { color:var(--orange); font-size:13px; }
.restroom-warning span { color:var(--text-dim); font-size:12px; font-variant-numeric:tabular-nums; }
.restroom-ack { flex:0 0 auto; border-color:var(--orange); color:var(--orange); }
.manager-icon-wrap { position:relative; display:inline-flex; }
.manager-warning-count {
  position:absolute; top:-7px; right:-10px;
  min-width:17px; height:17px; padding:0 4px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:100px; background:var(--orange-solid); color:#fff;
  border:2px solid var(--card); font-size:10px; font-weight:800; line-height:1;
}
@media (max-width:480px) {
  .restroom-warning { align-items:flex-start; flex-direction:column; }
  .restroom-ack { align-self:flex-end; }
}

.rep-actions { display:flex; gap:6px; flex-shrink:0; align-items:center; }

/* action buttons */
.btn-return {
  background:none; border:1px solid var(--border);
  color:var(--text-muted); border-radius:var(--radius-sm);
  padding:5px 9px; font-size:13px; cursor:pointer; white-space:nowrap;
}
.btn-return:active { background:var(--border); }

.btn-end-of-line {
  background:none; border:1px solid var(--orange);
  color:var(--orange); border-radius:var(--radius-sm);
  padding:5px 9px; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap;
}
.btn-end-of-line:active { background:var(--orange-bg); }

.btn-closeout {
  background:var(--purple-dark); border:1px solid var(--purple-mid);
  color:#fff; border-radius:var(--radius-sm);
  padding:7px 12px; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap;
}
.btn-closeout:active { opacity:.8; }

.btn-restore {
  background:none; border:1px solid var(--blue); color:var(--blue);
  border-radius:var(--radius-sm); padding:5px 12px; font-size:13px; font-weight:600; cursor:pointer;
}
.btn-restore:active { background:var(--blue-bg); }

.phone-call-actions { display:flex; flex-direction:column; gap:6px; align-items:flex-end; flex-shrink:0; }
.btn-phone-sale {
  background:var(--green-dark); color:#fff; border:none;
  border-radius:var(--radius-sm); padding:5px 12px; font-size:13px; font-weight:600; cursor:pointer;
}
.btn-phone-sale:active { opacity:.8; }

/* ── Modal ───────────────────────────────────────────────────────── */
.modal-overlay   { position:fixed; inset:0; background:rgba(0,0,0,0.65); z-index:200; }
.modal-container {
  position:fixed; bottom:0; left:0; right:0; z-index:201;
  display:flex; justify-content:center;
}
.modal-container.modal-top {
  top:0; bottom:auto;
  align-items:flex-start;
  padding:max(14px, env(safe-area-inset-top)) 12px 12px;
}
.modal-container.modal-top .modal {
  max-width:460px;
  max-height:calc(100dvh - max(28px, env(safe-area-inset-top)));
  border-radius:var(--radius);
  box-shadow:0 12px 38px rgba(0,0,0,.38);
}
.modal-container.modal-center {
  top:0; bottom:auto;
  align-items:center;
  padding:12px;
}
.modal-container.modal-center .modal {
  max-width:460px;
  max-height:calc(100dvh - 24px);
  border-radius:var(--radius);
  box-shadow:0 12px 38px rgba(0,0,0,.38);
}
.modal-overlay.hidden, .modal-container.hidden { display:none; }

.modal {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius) var(--radius) 0 0;
  width:100%; max-width:600px; max-height:92dvh;
  overflow-y:auto; display:flex; flex-direction:column;
}
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:15px 16px 12px; border-bottom:1px solid var(--border);
  position:sticky; top:0; background:var(--card); z-index:1;
}
.modal-header h2 { font-size:18px; font-weight:700; }
.btn-close {
  background:var(--border); border:none; color:var(--text-dim);
  border-radius:100px; width:28px; height:28px; font-size:14px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.modal-body   { padding:16px; display:flex; flex-direction:column; gap:14px; }
.modal-footer {
  padding:12px 16px; display:flex; gap:10px;
  border-top:1px solid var(--border);
  position:sticky; bottom:0; background:var(--card);
}

.manager-inline-wrap { display:flex; flex-direction:column; height:100%; }
.manager-inline-header { padding:16px 20px 0; }
.manager-inline-header h2 { font-size:20px; font-weight:700; }
.manager-inline-wrap > #manager-inline-content { flex:1; overflow-y:auto; }
.bottom-btn.manager-btn-open { color:var(--blue); }

@media (min-width:768px) {
  .modal.manager-panel {
    width:80vw;
    max-width:1200px;
  }
}

/* ── Forms ───────────────────────────────────────────────────────── */
label {
  display:block; font-size:12px; font-weight:600;
  color:var(--text-muted); margin-bottom:6px;
  text-transform:uppercase; letter-spacing:0.8px;
}
input[type="text"], input[type="number"], input[type="password"], input[type="tel"], input[type="email"], input[type="date"], input[type="search"], textarea, select {
  width:100%; background:var(--bg); border:1px solid var(--border);
  border-radius:var(--radius-sm); color:var(--text);
  padding:10px 12px; font-size:16px; font-family:inherit;
  outline:none; -webkit-appearance:none;
}
input:focus, textarea:focus, select:focus { border-color:var(--blue); }
textarea { resize:none; min-height:60px; }
select   { cursor:pointer; }

.section-label {
  font-size:12px; font-weight:700; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:1px; margin-bottom:6px;
}
.error  { color:var(--red); font-size:13px; margin-top:6px; }
.hidden { display:none !important; }

/* ── Outcome Toggle ──────────────────────────────────────────────── */
.outcome-toggle { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.outcome-btn {
  background:var(--bg); border:2px solid var(--border);
  color:var(--text-dim); border-radius:var(--radius-sm);
  padding:12px; font-size:15px; font-weight:600; cursor:pointer;
}
.outcome-btn.active          { border-color:var(--blue);   color:var(--blue);   background:var(--blue-bg); }
.outcome-btn.no-sale.active    { border-color:var(--orange); color:var(--orange); background:var(--orange-bg); }
.outcome-btn.end-of-line.active { border-color:var(--red);    color:var(--red);    background:var(--red-bg); }

/* ── Checkboxes ──────────────────────────────────────────────────── */
.checkbox-row {
  display:flex; align-items:center; gap:10px;
  padding:10px 0; font-size:15px; font-weight:500; color:var(--text);
  cursor:pointer; border-bottom:1px solid var(--border);
  text-transform:none; letter-spacing:0; margin-bottom:0;
}
.checkbox-row:last-child { border-bottom:none; }
.checkbox-row input[type="checkbox"] { width:20px; height:20px; accent-color:var(--blue); flex-shrink:0; cursor:pointer; }

.attachments, .clientele-section {
  background:var(--bg); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:4px 12px;
}

/* ── Off Floor Reasons ───────────────────────────────────────────── */
.reason-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(88px,1fr)); gap:10px; }
.reason-btn {
  background:var(--bg); border:2px solid var(--border); color:var(--text);
  border-radius:var(--radius); padding:20px 8px;
  font-size:14px; font-weight:600; cursor:pointer; text-align:center; line-height:1.6;
}
.reason-btn:active { border-color:var(--blue); background:var(--blue-bg); }

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn-submit {
  flex:1; background:var(--blue-solid); color:#fff;
  border:none; border-radius:var(--radius-sm);
  padding:13px; font-size:16px; font-weight:700; cursor:pointer;
}
.btn-submit:active { background:var(--blue-dark); }
.btn-cancel {
  flex:1; background:var(--bg); color:var(--text-dim);
  border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:13px; font-size:15px; cursor:pointer;
}
.btn-cancel:active { background:var(--border); }

.btn-sm {
  background:var(--card); border:1px solid var(--border); color:var(--text-dim);
  border-radius:var(--radius-sm); padding:5px 10px;
  font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap;
}
.btn-sm:active  { background:var(--border); }
.btn-sm.danger  { border-color:var(--red-dark); color:var(--red); }
.btn-sm.primary { border-color:var(--blue); color:var(--blue); }
.btn-icon {
  background:none; border:1px solid; border-radius:var(--radius-sm);
  width:30px; height:30px; font-size:16px; font-weight:700;
  cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.btn-icon-green { border-color:var(--green-dark); color:var(--green); }
.btn-icon-green:active { background:var(--green-bg); }
.btn-icon-red   { border-color:var(--red-dark);   color:var(--red); }
.btn-icon-red:active   { background:var(--red-bg); }

.btn-logout {
  width:100%; background:none; border:1px solid var(--red-dark);
  color:var(--red); border-radius:var(--radius-sm);
  padding:11px; font-size:14px; font-weight:600; cursor:pointer;
}
.btn-logout:active { background:var(--red-bg); }

.clear-rotation-btn {
  width:100%; background:none; border:1px solid var(--border);
  color:var(--text-muted); border-radius:var(--radius-sm);
  padding:10px; font-size:13px; cursor:pointer; margin-top:2px;
}
.clear-rotation-btn:active { background:var(--border); }

/* ── Stats ───────────────────────────────────────────────────────── */
.stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.stat-card  {
  background:var(--bg); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:14px 12px; text-align:center;
}
.stat-card.green  { border-color:var(--green-dark); }
.stat-card.orange { border-color:var(--orange-dark); }
.stat-value { font-size:24px; font-weight:800; margin-bottom:2px; }
.stat-card.green  .stat-value { color:var(--green); }
.stat-card.orange .stat-value { color:var(--orange); }
.stat-label { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.8px; font-weight:600; }

.attachment-totals { display:flex; gap:12px; flex-wrap:wrap; padding:8px 0; font-size:13px; color:var(--text-dim); }

/* ── Up history ──────────────────────────────────────────────────── */
.ups-list { display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.up-item  {
  background:var(--bg); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:10px 12px;
  display:flex; flex-direction:column; gap:4px;
}
.up-outcome      { font-size:14px; font-weight:700; display:flex; justify-content:space-between; }
.up-outcome.sale    { color:var(--green); }
.up-outcome.no-sale { color:var(--text-muted); }
.up-amount       { font-weight:600; }
.up-attachments  { font-size:12px; color:var(--text-dim); }
.up-customer, .up-notes { font-size:12px; color:var(--text-muted); }

/* ── Roster / Manager ────────────────────────────────────────────── */
.roster-list  { display:flex; flex-direction:column; gap:6px; }
.manager-roster { border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; }
.manager-roster summary { padding:12px 14px; color:var(--text); font-size:14px; font-weight:700; cursor:pointer; user-select:none; }
.manager-roster-list { display:flex; flex-direction:column; border-top:1px solid var(--border); }
.manager-roster-item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-bottom:1px solid var(--border); }
.manager-roster-item:last-child { border-bottom:none; }
.manager-roster-person { display:flex; align-items:center; gap:9px; min-width:0; }
.manager-roster-person > div { display:flex; flex-direction:column; min-width:0; }
.manager-roster-person strong { color:var(--text); font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.manager-roster-person small { color:var(--text-muted); font-size:11px; }
.roster-item  {
  background:var(--bg); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:10px 12px;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.roster-item-left { display:flex; align-items:center; gap:8px; }
.roster-name  { font-size:15px; font-weight:600; }
.role-badge   { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.8px; border-radius:100px; padding:2px 8px; }
.role-badge.rep     { background:var(--blue-bg); color:var(--blue); }
.role-badge.manager { background:var(--orange-bg); color:var(--orange); }
.role-badge.office  { background:rgba(113,128,150,0.15); color:var(--text-muted); }

/* ── Avg wait badge ───────────────────────────────────────────────── */
.avg-wait-badge {
  font-size:11px; font-weight:600; background:var(--green-bg);
  color:var(--green); border-radius:100px; padding:2px 9px; margin-left:8px;
  vertical-align:middle;
}
.roster-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.roster-icon-group { display:flex; align-items:center; gap:10px; }

.add-person { display:flex; gap:8px; margin-top:4px; }
.add-person input   { flex:1; }
.add-person select  { width:auto; flex-shrink:0; font-size:14px; padding:10px 8px; }
.add-person .btn-submit { flex:none; padding:10px 16px; font-size:14px; }

.pin-change       { display:flex; gap:8px; }
.pin-change input { flex:1; }

.manager-roster-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.manager-roster-note { padding:4px 2px 10px; color:var(--text-muted); font-size:12px; line-height:1.4; }

.rep-table-wrap { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.rep-table { width:100%; min-width:610px; border-collapse:collapse; font-size:14px; }
.rep-table th { text-align:left; padding:6px 8px; font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.8px; border-bottom:1px solid var(--border); }
.rep-table td { padding:9px 8px; border-bottom:1px solid var(--border); }
.rep-table tr:last-child td { border-bottom:none; }
.attachment-rates span { padding:4px 7px; border:1px solid var(--border); border-radius:100px; background:var(--bg); }
.export-btn { width:100%; padding:11px 12px; border:1px solid var(--blue); border-radius:var(--radius-sm); background:var(--blue-bg); color:var(--blue); font-size:13px; font-weight:700; cursor:pointer; }
.export-btn:active { filter:brightness(1.1); }

/* ── Activity log ───────────────────────────────────────────────── */
.activity-toggle-btn {
  width:100%; margin-top:12px; padding:11px 12px;
  display:flex; align-items:center; justify-content:space-between;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--card); color:var(--text); font-size:14px; font-weight:700;
  cursor:pointer;
}
.activity-toggle-btn:active { background:var(--border); }
.toggle-chevron { color:var(--text-muted); font-size:12px; }
.activity-filters {
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  padding:10px 0 8px;
}
.activity-filters select { width:100%; min-width:0; font-size:13px; }
.activity-list { display:flex; flex-direction:column; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; }
.activity-item { display:grid; grid-template-columns:72px minmax(0,1fr); gap:8px; padding:9px 10px; background:var(--bg); border-bottom:1px solid var(--border); font-size:12px; line-height:1.35; }
.activity-item:last-child { border-bottom:none; }
.activity-time { color:var(--text-muted); font-variant-numeric:tabular-nums; }
.activity-copy { color:var(--text-dim); display:flex; flex-direction:column; gap:2px; }
.activity-copy strong { color:var(--text); font-weight:650; }
.activity-copy small { color:var(--text-muted); font-size:11px; }
.activity-empty { color:var(--text-muted); font-size:13px; padding:12px; text-align:center; border:1px dashed var(--border); border-radius:var(--radius-sm); }

@media (max-width:390px) {
  .roster-item { align-items:flex-start; }
  .roster-actions { gap:7px; }
  .roster-icon-group { gap:9px; }
  .activity-filters { grid-template-columns:1fr; }
}

/* ── Avatar picker ───────────────────────────────────────────────── */
.avatar-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin-top:4px; }
.profile-customization { border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.profile-customization summary { padding:12px 14px; font-size:14px; font-weight:700; cursor:pointer; user-select:none; }
.profile-customization-body { display:flex; flex-direction:column; gap:18px; padding:4px 14px 14px; }
.initial-color-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin-top:4px; }
.avatar-opt  {
  font-size:24px; text-align:center; padding:8px 4px;
  border:2px solid var(--border); border-radius:var(--radius-sm);
  cursor:pointer; background:var(--bg); color:var(--text); font-family:inherit;
  min-height:46px;
}
.avatar-opt:active, .avatar-opt.selected { border-color:var(--blue); background:var(--blue-bg); }
.initial-opt { display:flex; align-items:center; justify-content:center; }
.initial-opt .avatar { pointer-events:none; }

@media (max-width:360px) {
  .avatar-grid, .initial-color-grid { grid-template-columns:repeat(5,1fr); gap:7px; }
}

/* ── Bottom Bar ──────────────────────────────────────────────────── */
.bottom-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 150;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 8px 0 max(8px, env(safe-area-inset-bottom));
}
.bottom-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; padding: 6px 20px; border-radius: var(--radius-sm);
  min-width: 72px;
}
.bottom-btn:active { background: var(--border); }
.bottom-btn.active { color: var(--blue); }
.bottom-btn.gw-active { color: var(--orange); }
.bottom-btn-label { font-size: 11px; font-weight: 600; letter-spacing: 0.3px; }

/* ── Guests Waiting Banner ───────────────────────────────────────── */
.guests-waiting-banner {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  background:var(--orange-bg);
  border-bottom:1px solid var(--orange);
  color: var(--orange);
  padding:9px 12px;
  cursor:pointer;
}
.gw-icon { font-size:21px; line-height:1; }
.gw-copy { min-width:0; display:flex; flex-direction:column; line-height:1.2; }
.gw-copy strong { font-size:14px; letter-spacing:.1px; }
.gw-copy small { margin-top:2px; color:var(--text-dim); font-size:12px; font-weight:600; }
.gw-dismiss {
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  border:0; border-radius:50%;
  background:var(--orange-bg);
  color:var(--orange);
  font-size:16px; font-weight:700;
  cursor:pointer;
}
.gw-dismiss:active { background:var(--orange-bg); filter:brightness(1.15); }
.gw-view { color:var(--orange); font-size:12px; font-weight:800; white-space:nowrap; }

/* ── Guest waiting strip (rotation tab, guests > 0) ─────────────── */
.guest-waiting-strip {
  display:flex; align-items:center; justify-content:space-between;
  max-width:600px; margin:6px auto 0; padding:9px 14px;
  background:var(--orange-bg); border:1px solid var(--orange);
  border-radius:10px; color:var(--orange); cursor:pointer;
  font-size:13px;
  animation: strip-pulse 2.4s ease-in-out infinite;
}
.guest-waiting-strip:active { filter:brightness(1.15); }
.guest-strip-cta { font-weight:800; font-size:12px; white-space:nowrap; }
@keyframes strip-pulse {
  0%, 100% { opacity:1; }
  50%       { opacity:.65; }
}

/* ── Guest arrival toast ─────────────────────────────────────────── */
.guest-arrival-toast {
  position:fixed; bottom:76px; left:50%; z-index:310;
  transform:translateX(-50%) translateY(16px);
  background:var(--card); color:var(--orange);
  border:2px solid var(--orange); border-radius:10px;
  padding:11px 18px; font-size:13px; font-weight:700;
  box-shadow:0 8px 28px rgba(0,0,0,.35);
  cursor:pointer; white-space:nowrap;
  opacity:0; pointer-events:none;
  transition:transform .22s ease, opacity .22s ease;
}
.guest-arrival-toast.show {
  transform:translateX(-50%) translateY(0);
  opacity:1; pointer-events:auto;
}

/* ── Primary view tabs ───────────────────────────────────────────── */
.view-tabs { display:flex; gap:4px; max-width:600px; margin:8px auto 0; padding:0 12px; }
.view-tab { border:1px solid var(--border); background:var(--card); color:var(--text-muted); border-radius:9px; padding:8px 10px; font-size:12px; font-weight:750; cursor:pointer; }
.view-tab { flex:1; min-width:0; }
.view-tab-icon { display:none; }
.view-tab.active { border-color:var(--blue); color:var(--blue); background:var(--blue-bg); }
.tab-count { display:inline-flex; min-width:19px; height:19px; align-items:center; justify-content:center; margin-left:4px; border-radius:100px; background:var(--border); color:var(--text-dim); font-size:10px; }
.view-tab.active .tab-count { background:var(--blue-solid); color:#fff; }
.tab-count.followup-count { background:var(--red-dark); color:#fff; }

/* ── Wide-screen workspace ─────────────────────────────────────── */
@media (min-width:768px) {
  .app-shell {
    /* Keep a complete 600px workspace visible at the 768px breakpoint,
       then let the navigation relax to its full desktop width. */
    --workspace-nav-width:clamp(168px,calc(26.72vw - 37px),230px);
  }
  body.app-authenticated { background:var(--bg); }
  .app-shell { min-height:100dvh; }
  .app-shell .header {
    position:fixed; inset:0 0 auto 0; height:64px; padding:10px 24px;
    box-shadow:0 2px 18px rgba(0,0,0,.14);
  }
  .app-shell .header-left img { width:38px !important; height:38px !important; border-radius:9px !important; }
  .app-shell .header-title { font-size:20px; }
  .app-shell .view-tabs {
    position:fixed; z-index:90; top:64px; bottom:0; left:0;
    width:var(--workspace-nav-width); max-width:none; margin:0; padding:28px 16px 190px;
    flex-direction:column; gap:8px;
    background:var(--bg2); border-right:1px solid var(--border);
  }
  .app-shell .view-tabs::before {
    content:'Workspace'; padding:0 10px 8px;
    color:var(--text-muted); font-size:11px; font-weight:800;
    letter-spacing:1.4px; text-transform:uppercase;
  }
  .app-shell .view-tab {
    flex:none; width:100%; min-height:48px; padding:11px 13px;
    display:flex; align-items:center; justify-content:flex-start; gap:11px;
    border-color:transparent; background:transparent; border-radius:10px;
    font-size:14px; text-align:left;
  }
  .app-shell .view-tab:hover { background:var(--blue-bg); color:var(--text); }
  .app-shell .view-tab.active { border-color:var(--blue); background:var(--blue-bg); }
  .app-shell .view-tab-icon {
    display:inline-flex; width:25px; height:25px; align-items:center; justify-content:center;
    border-radius:7px; background:var(--border); color:var(--text-dim); font-size:17px;
  }
  .app-shell .view-tab.active .view-tab-icon { background:var(--blue-solid); color:#fff; }
  .app-shell .guest-waiting-strip {
    width:min(calc(100vw - var(--workspace-nav-width) - 24px),976px);
    max-width:none;
    margin:80px 0 0 calc(var(--workspace-nav-width) + 12px); padding:11px 16px;
    box-sizing:border-box;
  }
  .app-shell .content {
    width:auto;
    max-width:1000px; min-width:0;
    margin:0 auto 0 var(--workspace-nav-width);
    padding:92px 12px 44px; box-sizing:border-box;
  }
  .app-shell .guest-waiting-strip + .content { padding-top:18px; }
  .app-shell .content-rotation {
    display:flex; flex-direction:column; gap:18px;
  }
  .app-shell .content-rotation > * { width:100%; min-width:0; }
  /* Let each row shrink with the workspace instead of preserving its
     wide-screen minimum-content width and clipping the action buttons. */
  .app-shell .content-rotation .section,
  .app-shell .content-rotation .next-up-card,
  .app-shell .content-rotation .rep-card { max-width:100%; min-width:0; }
  .app-shell .content-rotation .next-up-copy,
  .app-shell .content-rotation .rep-info { flex:1 1 0; width:0; min-width:0; }
  .app-shell .content-rotation .next-up-card,
  .app-shell .content-rotation .rep-card { overflow:hidden; }
  .app-shell .content-rotation .rep-actions { margin-left:auto; }
  .app-shell .content-rotation > .next-up-card { min-height:92px; padding:18px 20px; }
  .app-shell .content-rotation .next-up-name { font-size:27px; }
  .app-shell .content-guests, .app-shell .content-clientele { min-width:0; }
  .app-shell .clientele-page { gap:16px; }
  .app-shell .clientele-summary { grid-template-columns:repeat(3,minmax(180px,240px)); }
  .app-shell .clientele-list { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
  .app-shell .clientele-card { padding:16px 18px; }
  .app-shell .bottom-bar {
    z-index:100; left:0; right:auto; width:var(--workspace-nav-width); padding:12px 16px 18px;
    display:grid; grid-template-columns:1fr 1fr; gap:7px;
    background:var(--bg2); border-top:1px solid var(--border); border-right:1px solid var(--border);
  }
  .app-shell .bottom-btn {
    min-width:0; padding:10px 7px; gap:4px;
    background:var(--card); border:1px solid var(--border);
  }
  .app-shell .bottom-btn:hover { border-color:var(--blue); background:var(--blue-bg); }
  .app-shell .app-product-meta {
    width:auto; max-width:1000px;
    margin:0 auto 0 var(--workspace-nav-width); padding:0 12px 28px; box-sizing:border-box;
  }
  .login-gate { align-items:center; padding:36px; }
  .login-gate-card {
    padding:38px 44px 34px; background:var(--card); border:1px solid var(--border);
    border-radius:20px; box-shadow:0 24px 70px rgba(0,0,0,.22);
  }
}

/* ── Clientele ──────────────────────────────────────────────────── */
.clientele-page { display:flex; flex-direction:column; gap:10px; }
.clientele-hero { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:2px 2px 0; }
.clientele-hero .section-header { padding:0; color:var(--text); font-size:18px; letter-spacing:0; text-transform:none; }
.clientele-hero p { color:var(--text-muted); font-size:12px; margin-top:3px; }
.clientele-add { flex:none; padding:9px 13px; width:auto; font-size:13px; }
.clientele-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.clientele-summary > button { padding:10px; text-align:center; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--card); cursor:pointer; color:inherit; font:inherit; }
.clientele-summary > button.selected { border-color:var(--blue); box-shadow:0 0 0 2px var(--blue-bg); }
.clientele-summary strong { display:block; color:var(--blue); font-size:22px; }
.clientele-summary .due strong { color:var(--orange); }
.clientele-summary .overdue strong { color:var(--red); }
.clientele-summary span { color:var(--text-muted); font-size:10px; text-transform:uppercase; letter-spacing:.7px; }
.clientele-archive-toggle { align-self:flex-start; }
.clientele-report-title { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 11px; border-left:3px solid var(--red); background:var(--red-bg); border-radius:8px; }
.clientele-report-title span { color:var(--text-muted); font-size:11px; }
.sale-details { display:flex; flex-direction:column; gap:10px; padding:11px; border:1px solid var(--border); border-radius:10px; background:var(--bg); }
.clientele-filters { display:grid; grid-template-columns:minmax(180px,2fr) 1fr 1fr; gap:8px; }
.clientele-filters input, .clientele-filters select { font-size:13px; padding:9px 10px; min-width:0; }
.clientele-list { display:flex; flex-direction:column; gap:8px; }
.clientele-card { padding:12px; border:1px solid var(--border); border-radius:var(--radius); background:var(--card); }
.clientele-card.is-due { border-left:3px solid var(--orange); }
.clientele-card.is-overdue { border-left:3px solid var(--red); }
.clientele-card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.clientele-card-head > div { display:flex; align-items:center; gap:9px; min-width:0; }
.clientele-card-head > div > div { display:flex; flex-direction:column; min-width:0; }
.clientele-card-head strong { font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.clientele-card-head small { color:var(--text-muted); font-size:11px; }
.clientele-status { flex:none; padding:3px 8px; border-radius:100px; font-size:10px; font-weight:750; color:var(--blue); background:var(--blue-bg); }
.clientele-status.follow_up { color:var(--orange); background:var(--orange-bg); }
.clientele-status.sold { color:var(--green); background:var(--green-bg); }
.clientele-status.closed { color:var(--text-muted); background:var(--border); }
.clientele-card-meta { display:flex; flex-wrap:wrap; gap:5px 12px; padding:9px 0 6px; color:var(--text-dim); font-size:11px; }
.clientele-card-meta .due-text { color:var(--orange); font-weight:700; }
.clientele-card-meta .overdue-text { color:var(--red); font-weight:700; }
.clientele-notes { color:var(--text-muted); font-size:12px; line-height:1.4; white-space:pre-wrap; margin:2px 0 8px; }
.clientele-card-actions { display:flex; flex-wrap:wrap; gap:6px; }
.clientele-retention-note, .clientele-privacy-note { color:var(--text-muted); font-size:10px; line-height:1.4; text-align:center; padding:5px 8px; }
.clientele-closeout-fields { display:flex; flex-direction:column; gap:10px; padding:8px 0 10px; }
.clientele-date-input {
  min-height:46px;
  line-height:24px;
  display:block;
}
.consent-row { color:var(--text-dim); font-size:13px; }
.clientele-last-contact { padding:8px 10px; border-radius:8px; background:var(--blue-bg); color:var(--text-dim); font-size:11px; }

@media (max-width:520px) {
  .clientele-filters { grid-template-columns:1fr 1fr; }
  .clientele-filters input { grid-column:1 / -1; }
  .clientele-hero { align-items:flex-end; }
}

/* ── Guest waitlist ─────────────────────────────────────────────── */
.guest-add-form { display:flex; flex-direction:column; gap:11px; padding:12px; }
.guest-form-row { display:grid; grid-template-columns:minmax(90px,.7fr) minmax(140px,1.3fr); gap:10px; }
.order-sale-row { grid-template-columns:minmax(140px,1.6fr) minmax(80px,.6fr); }
.optional-label { font-size:10px; font-weight:500; text-transform:none; letter-spacing:0; color:var(--text-muted); }
.guest-name-help { margin-top:-3px; color:var(--text-muted); font-size:11px; line-height:1.35; }
.guest-card { display:flex; align-items:flex-start; gap:9px; padding:11px 12px; border-bottom:1px solid var(--border); background:var(--card); }
.guest-card:last-child { border-bottom:none; }
.guest-card.assigned { border-left:3px solid var(--purple); background:var(--purple-bg); }
.guest-card.notified { border-left:3px solid var(--blue); background:var(--blue-bg); }
.guest-position { flex:0 0 auto; width:27px; height:27px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; background:var(--blue-solid); color:#fff; font-size:13px; font-weight:800; }
.guest-main { min-width:0; flex:1; display:flex; flex-direction:column; gap:6px; }
.guest-name-line { min-width:0; display:flex; align-items:baseline; flex-wrap:wrap; gap:5px 9px; }
.guest-name-line strong { font-size:16px; }
.guest-name-line span { color:var(--text-muted); font-size:11px; }
.guest-meta { display:flex; justify-content:space-between; flex-wrap:wrap; gap:5px 10px; }
.guest-status { color:var(--purple); font-size:11px; font-weight:750; }
.guest-card.waiting .guest-status { color:var(--green); }
.guest-card.notified .guest-status { color:var(--blue); }
.guest-countdown { color:var(--text-dim); font-size:12px; font-weight:750; font-variant-numeric:tabular-nums; }
.guest-countdown.overdue { color:var(--red); }
.guest-actions { display:flex; flex-wrap:wrap; gap:6px; }
.guest-claim { border-color:var(--purple-mid) !important; color:var(--purple) !important; }
.guest-start { border-color:var(--green-dark) !important; color:var(--green) !important; }
.guest-log-item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-bottom:1px solid var(--border); }
.guest-log-item:last-child { border-bottom:none; }
.guest-log-item > div:first-child { min-width:0; display:flex; flex-direction:column; gap:3px; }
.guest-log-item strong { font-size:14px; }
.guest-log-item span { color:var(--text-muted); font-size:11px; }
.guest-retention-note { padding:2px 8px 8px; text-align:center; color:var(--text-muted); font-size:11px; }

.guest-form-toggle {
  width:100%; background:none; border:none; color:inherit;
  font:inherit; cursor:pointer; text-align:left;
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 14px; border-radius:0;
  font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  border-bottom:1px solid var(--border);
}
.guest-form-toggle:active { background:var(--border); }
.toggle-chevron { font-size:10px; opacity:.6; }

.guest-log-toggle {
  width:100%; background:none; border:none; color:var(--text-muted);
  font:inherit; cursor:pointer; text-align:left;
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 14px;
  font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  border-bottom:1px solid transparent;
}
.guest-log-toggle:active { background:var(--border); }
.log-chevron { font-size:10px; opacity:.6; }

@media (max-width:390px) {
  /* Guest waitlist */
  .guest-form-row { grid-template-columns:1fr 1.25fr; }
  .guest-card { padding:10px 9px; gap:7px; }
  .guest-position { width:25px; height:25px; }
  .guest-actions .btn-sm { padding:5px 8px; }
  .guest-log-item { align-items:flex-start; flex-direction:column; }

  /* Next-up card — less vertical height */
  .next-up-name { font-size:18px; }
  .next-up-card { padding:9px 10px; }
  .btn-take-up { padding:8px 14px; font-size:13px; }

  /* Rep cards */
  .rep-card { padding:8px 10px; min-height:54px; }
  .avatar { width:34px; height:34px; font-size:13px; }
  .avatar.emoji { font-size:18px; }
  .rep-name { font-size:15px; }
  .section-header { padding:7px 12px; }

  /* Bottom bar — tighter so 4 tabs fit comfortably at 375px */
  .bottom-btn { padding:5px 10px; min-width:60px; }

  /* Manager quick bar */
  .manager-quick-bar { padding:6px 10px; }
  .rush-btn { padding:10px; font-size:13px; }
  .btn-end-shift { padding:10px; font-size:13px; }
}

@media (max-width:360px) {
  /* iPhone SE 1st gen (320px) */
  .next-up-name { font-size:16px; }
  .bottom-btn { padding:4px 6px; min-width:52px; }
  .bottom-btn-label { font-size:10px; }
  .view-tabs { padding:0 8px; gap:3px; }
  .view-tab { padding:7px 8px; font-size:11px; }
  .rep-card { padding:7px 8px; }
  .content { padding:10px 10px 80px; }
  body.manager-active .content { padding-bottom:132px; }
}

@media (max-width:360px) {
  .guests-waiting-banner { gap:8px; padding:8px 10px; }
  .gw-icon { font-size:19px; }
  .gw-copy strong { font-size:13px; }
  .gw-copy small { font-size:11px; }
  .gw-dismiss { width:30px; height:30px; }
}

/* ── Rush button (manager panel) ────────────────────────────────── */
.rush-btn {
  width: 100%;
  background:var(--purple-bg);
  border: 1px solid var(--purple-mid);
  color: var(--purple);
  border-radius: var(--radius-sm);
  padding: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 8px;
  text-align: center;
}
.rush-btn:active { background:var(--purple-bg); filter:brightness(1.15); }

/* ── "With a Guest" reason button variant ───────────────────────── */
.reason-btn-purple {
  border-color: var(--purple-mid) !important;
  color: var(--purple) !important;
}
.reason-btn-purple:active { background:var(--purple-bg) !important; }

/* ── End of Shift ────────────────────────────────────────────────── */
.btn-end-shift {
  width: 100%;
  background: none;
  border:1px solid var(--orange-dark);
  color: var(--orange);
  border-radius: var(--radius-sm);
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
  text-align: center;
}
.btn-end-shift:active { background:var(--orange-bg); }

/* ── Identity setup ──────────────────────────────────────────────── */
.identity-list { display:flex; flex-direction:column; gap:8px; }
.identity-opt  {
  display:flex; align-items:center; gap:12px;
  background:var(--bg); border:2px solid var(--border);
  border-radius:var(--radius-sm); padding:12px 14px; cursor:pointer;
}
.identity-opt:active { border-color:var(--blue); }
.identity-opt.selected { border-color:var(--blue); background:var(--blue-bg); }
.identity-opt .rep-name { font-size:16px; }

/* ── Manager quick bar (fixed, above bottom bar) ─────────────────── */
.manager-quick-bar {
  position: fixed;
  bottom: calc(64px + max(8px, env(safe-area-inset-bottom)));
  left: 0; right: 0;
  z-index: 149;
  padding: 8px 12px;
  background: var(--bg2);
  border-top: 1px solid var(--purple-border);
}
.manager-quick-bar .rush-btn {
  margin-top: 0;
}