:root {
  --bg: #0f1115; --panel: #161922; --panel2: #1d2230; --line: #2a2f3d;
  --text: #e6e9ef; --muted: #8d94a6; --accent: #7aa2ff; --good: #59d49a;
  --warn: #ffb86b; --bad: #ff7a7a; --gold: #f5c66b;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar { display: flex; justify-content: space-between; align-items: center;
  padding: 12px 24px; background: linear-gradient(180deg,#1a1f2e 0%, #0f1115 100%);
  border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; letter-spacing: 0.4px; }
.topbar nav { display: flex; gap: 14px; align-items: center; }
.topbar nav .user { color: var(--muted); font-size: 12px; }
.topbar nav .user .role { background: var(--panel2); color: var(--accent); padding: 1px 6px; border-radius: 4px; margin-left: 4px; font-size: 11px; }
.topbar nav a { color: var(--text); }
.topbar nav button.link { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 13px; }

main { padding: 24px 32px 64px; max-width: 1400px; margin: 0 auto; }

.login-box { max-width: 380px; margin: 80px auto; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 28px; }
.login-box h1 { margin: 0 0 18px; font-size: 22px; }
.login-box label { display: block; margin-bottom: 12px; font-size: 12px; color: var(--muted); }
.login-box input { display: block; width: 100%; padding: 10px 12px; margin-top: 4px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; color: var(--text); font-size: 14px; }
.login-box button { width: 100%; padding: 11px; background: var(--accent); color: #0f1115; border: 0; border-radius: 6px; font-weight: 700; cursor: pointer; }
.login-box .error { background: rgba(255,122,122,0.15); color: var(--bad); padding: 10px; border-radius: 6px; margin-bottom: 14px; font-size: 13px; }

.portal-head { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px 20px; margin-bottom: 18px; }
.portal-head h1 { margin: 0 0 8px; font-size: 20px; }
.portal-head .locs { margin-bottom: 12px; }
.loc-chip { display: inline-block; background: var(--panel2); border: 1px solid var(--line); padding: 6px 14px; border-radius: 20px; font-size: 12px; margin-right: 6px; margin-bottom: 6px; cursor: pointer; color: var(--text); }
.loc-chip:hover { background: var(--line); }
.loc-chip.active { background: var(--accent); color: #0f1115; border-color: var(--accent); font-weight: 600; }
.hist-row { display: none; padding: 0 16px 12px 80px; background: #131722; border-bottom: 1px solid var(--line); }
.hist-row.open { display: block; }
.hist-row .hist-loading, .hist-row .hist-empty { padding: 10px; color: var(--muted); font-size: 12px; }
.hist-row .hist-title { font-size: 12px; color: var(--gold); padding: 8px 0; font-weight: 600; }
.hist-tbl { width: 100%; border-collapse: collapse; font-size: 11px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.hist-tbl th, .hist-tbl td { padding: 5px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.hist-tbl th { background: var(--panel2); color: var(--muted); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.4px; }
.hist-tbl td.num { text-align: right; font-variant-numeric: tabular-nums; color: var(--good); }
.hist-tbl td.trim { max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }

/* History table — mobile card layout */
@media (max-width: 700px) {
  .hist-row { padding: 0 8px 10px 8px; }
  .hist-tbl { background: transparent; border: none; }
  .hist-tbl thead { display: none; }
  .hist-tbl tbody { display: block; }
  .hist-tbl tr { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
  .hist-tbl td { display: block; padding: 2px 0 !important; border-bottom: none !important; text-align: left !important; font-size: 12px; }
  .hist-tbl td:first-child { color: var(--gold); font-weight: 600; font-size: 13px; }
  .hist-tbl td:nth-child(2) { color: var(--muted); font-size: 11px; }
  .hist-tbl td:nth-child(3) { color: var(--muted); font-size: 10px; }
  .hist-tbl td:nth-child(4) { color: var(--accent); font-size: 11px; }
  .hist-tbl td:nth-child(5) { display: inline-block; margin-right: 4px; }
  .hist-tbl td.trim { max-width: 100%; white-space: normal; padding: 4px 0 !important; color: var(--text); }
  .hist-tbl td.num { display: inline-block; margin-right: 12px; color: var(--good); font-weight: 700; font-size: 14px; }
  /* Add prefix labels via ::before */
  .hist-tbl td:first-child::before { content: "📅 "; }
  .hist-tbl td:nth-child(2)::before { content: "📍 "; }
  .hist-tbl td:nth-child(4)::before { content: "👤 "; }
  .hist-tbl td.trim::before { content: "🛍️ "; color: var(--muted); }
  .hist-tbl td.num:nth-child(7)::before { content: "Amt "; color: var(--muted); font-weight: 400; font-size: 10px; text-transform: uppercase; }
  .hist-tbl td.num:nth-child(8)::before { content: "Paid "; color: var(--muted); font-weight: 400; font-size: 10px; text-transform: uppercase; }
}
.hist-tbl .ctag { font-size: 9px; padding: 1px 4px; border-radius: 3px; }
.hist-tbl .ctag.new { background: rgba(122,162,255,0.18); color: var(--accent); }
.hist-tbl .ctag.vip { background: rgba(245,198,107,0.18); color: var(--gold); }
.hist-tbl .ctag.layaway { background: rgba(180,120,255,0.18); color: #c4a6ff; }
.hist-tbl .ctag.refund { background: rgba(255,122,122,0.18); color: var(--bad); }

.day-counts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.dc-card { background: var(--panel); border: 1px solid var(--line); border-left-width: 4px; border-radius: 10px; padding: 14px 18px; }
.dc-card.dc-new { border-left-color: var(--accent); }
.dc-card.dc-vip { border-left-color: var(--gold); }
.dc-label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
.dc-card.dc-new .dc-label { color: var(--accent); }
.dc-card.dc-vip .dc-label { color: var(--gold); }
.dc-count { font-size: 28px; font-weight: 700; margin-top: 4px; }
.dc-card.dc-new .dc-count { color: var(--accent); }
.dc-card.dc-vip .dc-count { color: var(--gold); }
.controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.controls input, .controls select { background: var(--panel2); border: 1px solid var(--line); color: var(--text); padding: 6px 10px; border-radius: 6px; font-size: 13px; }
.view-toggle button { background: var(--panel2); border: 1px solid var(--line); color: var(--muted); padding: 6px 14px; cursor: pointer; }
.view-toggle button.active { background: var(--accent); color: #0f1115; }
.view-toggle button:first-child { border-radius: 6px 0 0 6px; }
.view-toggle button:last-child { border-radius: 0 6px 6px 0; }
.muted { color: var(--muted); }
.last-sync { font-size: 11px; }

.day-block { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 14px; overflow: hidden; }
.day-block h3 { margin: 0; padding: 10px 16px; background: var(--panel2); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--gold); letter-spacing: 0.4px; }
.appt-row { display: grid; grid-template-columns: 80px 60px 1fr auto; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.appt-row:last-child { border-bottom: none; }
.appt-row .time { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; }
.appt-row .kind { font-size: 10px; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.4px; }
.appt-row .kind.new { background: rgba(122,162,255,0.18); color: var(--accent); }
.appt-row .kind.vip { background: rgba(245,198,107,0.18); color: var(--gold); }
.appt-row .who b { display: block; }
.appt-row .who .phone { font-size: 11px; }
.appt-row .who .phone a { color: var(--accent); text-decoration: none; font-weight: 600; padding: 2px 6px; border-radius: 4px; background: var(--panel2); display: inline-block; }
.appt-row .who .phone a:hover { background: var(--accent); color: var(--bg); }
.appt-row .who .loc { color: var(--muted); font-size: 11px; margin-top: 2px; }
.appt-row .who .my-status { font-size: 12px; margin-top: 4px; }
.appt-row .who .my-status.sold { color: var(--good); }
.appt-row .who .my-status.no_sale { color: var(--bad); }
.appt-row .actions { display: flex; gap: 6px; align-items: center; }
.appt-row .actions button { background: var(--accent); color: #0f1115; border: 0; padding: 8px 14px; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 12px; }
.appt-row .actions button.hist-btn { background: var(--panel2); color: var(--gold); border: 1px solid var(--line); padding: 6px 10px; }
.appt-row .actions button.hist-btn:hover { background: var(--gold); color: #0f1115; }
.appt-row .actions button.done { background: var(--good); }
.appt-row .actions button.no-sale { background: var(--bad); }

dialog#visit-modal { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 24px; min-width: 580px; max-width: 92vw; max-height: 92vh; overflow-y: auto; }
.vm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.vm-grid .full-width, .vm-grid label.full-width, .vm-grid div.full-width { grid-column: 1 / -1; }
.vm-grid optgroup { color: var(--gold); font-style: normal; font-weight: 600; }

/* Multi-select trigger button (always inline) */
details.multi-dd > summary { list-style: none; cursor: pointer; padding: 10px 30px 10px 12px; margin-top: 4px; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; color: var(--text); font: inherit; position: relative; min-height: 38px; }
details.multi-dd > summary::-webkit-details-marker { display: none; }
details.multi-dd > summary::after { content: "▾ tap to choose"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; }
details.multi-dd[open] > summary::after { content: "▴ close"; }
details.multi-dd > summary > span { display: inline-block; max-width: calc(100% - 110px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }

/* Open state: panel becomes a centered modal with backdrop (TRUE popup) */
details.multi-dd[open] .multi-dd-panel {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(540px, 92vw); max-height: 78vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 0 12px; z-index: 10001;
  box-shadow: 0 12px 48px rgba(0,0,0,0.7);
}
/* Backdrop overlay */
details.multi-dd[open]::before {
  content: ""; position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 10000;
}
.multi-dd-panel { display: none; }
details.multi-dd[open] .multi-dd-panel { display: block; }

.multi-dd-panel label { display: flex !important; align-items: center; gap: 10px; padding: 9px 16px !important; margin: 0 !important; cursor: pointer; font-size: 13px; color: var(--text) !important; }
.multi-dd-panel label:hover { background: var(--panel2); }
.multi-dd-panel input[type="checkbox"] { width: 18px !important; height: 18px !important; margin: 0 !important; padding: 0 !important; flex-shrink: 0; }
.multi-dd-panel .dd-group { padding: 10px 16px 4px; color: var(--gold); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; border-top: 1px solid var(--line); margin-top: 6px; background: var(--panel2); }
.multi-dd-panel .dd-group:first-child { border-top: none; margin-top: 0; }
/* Close button at the bottom of every popup */
.multi-dd-panel::after { content: ""; }
.multi-dd-close { position: sticky; bottom: 0; padding: 10px 16px; background: var(--panel2); border-top: 1px solid var(--line); display: flex; justify-content: flex-end; }
.multi-dd-close button { background: var(--accent); color: #0f1115; border: 0; padding: 8px 18px; border-radius: 6px; font-weight: 700; cursor: pointer; font-size: 13px; }

/* Payment-method popup with amounts */
.pay-panel { padding: 4px 0 !important; }
.pay-item { display: flex; align-items: center; gap: 8px; padding: 4px 10px; }
.pay-item:hover { background: var(--panel2); }
.pay-item label { display: inline-flex !important; align-items: center; gap: 6px; flex: 1; margin: 0 !important; padding: 0 !important; font-size: 13px; cursor: pointer; color: var(--text) !important; }
.pay-item label input[type="checkbox"] { width: auto !important; margin: 0 !important; padding: 0 !important; }
.pay-item input[type="number"] { width: 110px !important; padding: 5px 8px !important; margin: 0 !important; background: var(--panel) !important; font-size: 12px !important; }
.pay-item input[type="number"]:disabled { opacity: 0.3; }

/* Negotiation journey steps */
.vm-section-h { font-size: 12px; color: var(--gold); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; padding: 8px 0 6px; border-top: 1px solid var(--line); margin-top: 6px; }
#vm-steps { display: flex; flex-direction: column; gap: 6px; }
.step-row { display: grid; grid-template-columns: 60px 130px 1fr 32px; gap: 10px; align-items: center; padding: 10px 12px; background: var(--panel2); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 6px; }
.step-row[data-final="1"] { border-left-color: var(--good); background: rgba(89,212,154,0.08); }
.step-row .step-label { font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.4px; }
.step-row[data-final="1"] .step-label { color: var(--good); }
.step-row input[type="number"], .step-row input[type="text"] { width: 100% !important; padding: 6px 8px !important; margin: 0 !important; background: var(--panel) !important; font-size: 12px !important; }
.step-row .step-rm { background: transparent; border: 0; color: var(--bad); cursor: pointer; font-size: 18px; padding: 0; }
.step-row.no-treatments { grid-template-columns: 60px 130px 1fr 32px; }
.step-row.no-treatments .step-treatments { display: none !important; }
.step-add-btn { background: var(--panel2); border: 1px dashed var(--line); color: var(--accent); padding: 8px 14px; border-radius: 6px; cursor: pointer; font-size: 12px; margin-top: 4px; width: 100%; }
.step-add-btn:hover { background: var(--accent); color: #0f1115; border-style: solid; }
dialog#visit-modal::backdrop { background: rgba(0,0,0,0.65); }
dialog#visit-modal h3 { margin: 0 0 4px; font-size: 16px; }
dialog#visit-modal #vm-context { font-size: 12px; margin-bottom: 12px; }
dialog#visit-modal label { display: block; margin-bottom: 12px; font-size: 12px; color: var(--muted); }
dialog#visit-modal input, dialog#visit-modal select, dialog#visit-modal textarea {
  display: block; width: 100%; padding: 8px 10px; margin-top: 4px; background: var(--panel2);
  border: 1px solid var(--line); border-radius: 6px; color: var(--text); font: inherit; }
dialog#visit-modal .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
dialog#visit-modal .actions button { background: var(--panel2); border: 1px solid var(--line); color: var(--text); padding: 8px 16px; border-radius: 6px; cursor: pointer; }
dialog#visit-modal .actions button.primary { background: var(--accent); color: #0f1115; border: 0; font-weight: 700; }
.history-box { background: #131722; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; margin-bottom: 12px; font-size: 12px; max-height: 160px; overflow-y: auto; }
.history-box .h-row { display: grid; grid-template-columns: 80px 1fr auto; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--line); }
.history-box .h-row:last-child { border-bottom: none; }
.history-box .h-row .h-date { color: var(--muted); font-variant-numeric: tabular-nums; }
.history-box .h-row .h-amt { font-variant-numeric: tabular-nums; color: var(--good); }

.users-tbl { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 13px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.users-tbl th, .users-tbl td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.users-tbl th { background: var(--panel2); color: var(--muted); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; }
.role-tag { background: var(--panel2); padding: 2px 8px; border-radius: 4px; font-size: 11px; }
.role-tag.master_admin { color: var(--gold); } .role-tag.usa_admin { color: var(--accent); } .role-tag.canada_admin { color: var(--accent); } .role-tag.salesperson { color: var(--good); }
.loc-list { list-style: none; padding: 0; margin: 0 0 6px 0; }
.loc-list li { display: inline-block; background: var(--panel2); padding: 2px 8px; border-radius: 4px; margin: 0 4px 4px 0; font-size: 12px; }
.loc-list li form { display: inline; }
.link-x { background: none; border: 0; color: var(--bad); cursor: pointer; padding: 0 0 0 4px; font-size: 14px; }
.inline-form { display: flex; gap: 6px; align-items: center; }
.inline-form select { padding: 4px 8px; }
.inline-form button.small { padding: 4px 10px; font-size: 11px; }
.grid-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px 0; }
.grid-form label { font-size: 11px; color: var(--muted); }
.grid-form input, .grid-form select { display: block; width: 100%; padding: 8px 10px; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; color: var(--text); font: inherit; }
.grid-form button.primary { grid-column: 1 / -1; background: var(--accent); color: #0f1115; border: 0; padding: 10px; border-radius: 6px; font-weight: 700; cursor: pointer; }
button.primary { background: var(--accent); color: #0f1115; border: 0; padding: 8px 16px; border-radius: 6px; font-weight: 700; cursor: pointer; }
.btn-link { display: inline-block; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 8px 14px; color: var(--text); }
.btn-action { display: inline-block; background: var(--panel2); border: 1px solid var(--line); border-radius: 4px; padding: 4px 10px; color: var(--text); font-size: 11px; cursor: pointer; margin-right: 4px; text-decoration: none; }
.btn-action:hover { background: var(--accent); color: #0f1115; text-decoration: none; }
.btn-action.watch { background: var(--accent); color: #0f1115; font-weight: 600; }
.action-pop { display: inline-block; position: relative; }
.action-pop summary { list-style: none; cursor: pointer; }
.action-pop summary::-webkit-details-marker { display: none; }
.popover { display: none; position: absolute; right: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 10px; z-index: 100; margin-top: 4px; min-width: 220px; box-shadow: 0 4px 16px rgba(0,0,0,0.5); }
.action-pop[open] .popover { display: block; }
.popover input { background: var(--panel2); border: 1px solid var(--line); color: var(--text); padding: 5px 8px; border-radius: 4px; font-size: 12px; }
.popover button.small { padding: 5px 10px; font-size: 11px; border-radius: 4px; cursor: pointer; }
.popover button.danger { background: var(--bad); color: #0f1115; border: 0; font-weight: 700; }
.actions-cell { white-space: nowrap; }

/* Admin dashboard */
.date-form { display: flex; gap: 12px; align-items: center; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.date-form label { color: var(--muted); font-size: 12px; }
.date-form input { background: var(--panel2); border: 1px solid var(--line); color: var(--text); padding: 6px 10px; border-radius: 6px; margin-left: 6px; }
.date-form .quick-ranges a { color: var(--accent); margin-right: 10px; font-size: 12px; }
.date-form button { background: var(--accent); color: #0f1115; border: 0; padding: 8px 16px; border-radius: 6px; font-weight: 700; cursor: pointer; }
.grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 22px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.card .label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; }
.card .value { font-size: 20px; font-weight: 600; margin-top: 6px; }
.card .value.good { color: var(--good); }
h2 { font-size: 16px; margin: 28px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); color: var(--accent); }
.locs-tbl, .rank-tbl { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.locs-tbl th, .locs-tbl td, .rank-tbl th, .rank-tbl td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.locs-tbl th, .rank-tbl th { background: var(--panel2); color: var(--muted); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; }
.locs-tbl td.num, .rank-tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.locs-tbl td.amt, .rank-tbl td.amt { color: var(--good); font-weight: 600; }
.locs-tbl td.good, .rank-tbl td.good { color: var(--good); }
.locs-tbl td.bad, .rank-tbl td.bad  { color: var(--bad); }
.locs-tbl tr.country-row td { background: var(--panel2); font-weight: 700; color: var(--accent); padding: 6px 12px; font-size: 12px; letter-spacing: 0.4px; }
.locs-tbl tr.subtotal-row td { background: var(--panel2); border-top: 2px solid var(--line); }
.locs-tbl tr.grand-row td { background: rgba(245,198,107,0.08); border: 1px solid rgba(245,198,107,0.2); padding: 10px 12px; }
h3.loc-section-h { margin: 16px 0 8px; font-size: 13px; letter-spacing: 0.4px; color: var(--accent); }
.ctag { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 700; }
.ctag.new { background: rgba(122,162,255,0.18); color: var(--accent); }
.ctag.vip { background: rgba(245,198,107,0.18); color: var(--gold); }
.ctag.lay { background: rgba(180,120,255,0.18); color: #c4a6ff; }
.ctag.iho { background: rgba(255,159,67,0.18); color: #ff9f43; }
.ctag.pfi { background: rgba(101,212,164,0.18); color: #65d4a4; }
.ctag.ref { background: rgba(255,122,122,0.18); color: var(--bad); }

/* Expandable receipt row */
tr.sp-row td:first-child::before { content: "▸"; color: var(--muted); margin-right: 6px; font-size: 10px; transition: transform 0.15s; display: inline-block; }
tr.sp-row.open td:first-child::before { transform: rotate(90deg); }
tr.receipt-row { display: none; background: #131722; }
tr.receipt-row.open { display: table-row; }
tr.receipt-row > td { padding: 14px 16px 16px 36px; border-bottom: 1px solid var(--line); }
.rcpt-summary { display: flex; gap: 16px; flex-wrap: wrap; padding: 8px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; margin-bottom: 10px; font-size: 12px; }
.rcpt-summary .good { color: var(--good); }
.rcpt-summary .warn { color: var(--warn); }
.rcpt-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }
@media (max-width: 800px) { .rcpt-grid { grid-template-columns: 1fr; } }
.rcpt-grid h5 { margin: 0 0 6px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
.rcpt-tbl { width: 100%; border-collapse: collapse; font-size: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.rcpt-tbl th, .rcpt-tbl td { padding: 5px 8px; border-bottom: 1px solid var(--line); }
.rcpt-tbl th { background: var(--panel2); color: var(--muted); font-size: 10px; font-weight: 500; text-transform: uppercase; text-align: left; }
.rcpt-tbl td.qty { width: 40px; text-align: center; color: var(--muted); }
.rcpt-tbl td.amt { text-align: right; font-variant-numeric: tabular-nums; width: 80px; }
.rcpt-pmts { list-style: none; padding: 0; margin: 0; font-size: 12px; }
.rcpt-pmts li { padding: 3px 0; }
.rcpt-pmts li.future { color: var(--muted); }
.rcpt-pmts li .ptype { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; margin-right: 6px; }
.rcpt-notes { font-size: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 8px; white-space: pre-wrap; max-height: 140px; overflow-y: auto; }

/* Conversion + Show-by-show sections */
details.conv-loc { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
details.conv-loc > summary { list-style: none; cursor: pointer; padding: 10px 14px; background: linear-gradient(90deg,#1d2230 0%, #161922 100%); border-bottom: 1px solid var(--line); }
details.conv-loc > summary::-webkit-details-marker { display: none; }
details.conv-loc > summary::before { content: "▸ "; color: var(--muted); }
details.conv-loc[open] > summary::before { content: "▾ "; }
.conv-h { margin: 12px 14px 6px; font-size: 12px; color: var(--accent); letter-spacing: 0.4px; text-transform: uppercase; font-weight: 600; }
.conv-tbl, .show-match-tbl { width: calc(100% - 28px); margin: 0 14px 10px; border-collapse: collapse; font-size: 12px; background: #131722; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.conv-tbl th, .conv-tbl td, .show-match-tbl th, .show-match-tbl td { padding: 5px 8px; border-bottom: 1px solid var(--line); text-align: center; font-variant-numeric: tabular-nums; }
.conv-tbl th, .show-match-tbl th { background: var(--panel2); color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 500; text-align: left; padding-left: 12px; }
.conv-tbl td.sp-name-cell { text-align: left; font-weight: 600; padding-left: 12px; }
.conv-tbl tr.shows-row td { background: rgba(122,162,255,0.05); color: var(--accent); font-weight: 600; }
.conv-tbl tr.shows-row td:first-child { color: var(--muted); font-weight: 500; font-size: 10px; text-transform: uppercase; }
.conv-pct { display: block; font-size: 10px; color: var(--gold); font-weight: 700; margin-top: 1px; }
.show-match-tbl td.tag { width: 22px; text-align: center; }
.show-match-tbl tr.bought   { background: rgba(89,212,154,0.08); }
.show-match-tbl tr.bought   td.tag { color: var(--good); }
.show-match-tbl tr.bought   td:nth-child(4) { color: var(--good); }
.show-match-tbl tr.showonly { background: rgba(255,184,107,0.08); }
.show-match-tbl tr.showonly td.tag { color: var(--warn); }
.show-match-tbl tr.norec    { background: rgba(255,122,122,0.08); }
.show-match-tbl tr.norec    td.tag { color: var(--bad); }
.show-match-tbl tr.norec    td:nth-child(5) { color: var(--bad); font-style: italic; }
.show-match-tbl tr.lay      { background: rgba(122,162,255,0.06); }
.show-match-tbl tr.lay      td.tag { color: var(--accent); }
.show-match-tbl tr td:first-child, .show-match-tbl tr td:nth-child(2),
.show-match-tbl tr td:nth-child(4), .show-match-tbl tr td:nth-child(5) { text-align: left; padding-left: 12px; }
.show-match-tbl tr td.num { text-align: right; padding-right: 12px; }

/* Collapsible top-level sections */
details.sec { margin: 14px 0; }
details.sec > summary { list-style: none; cursor: pointer; padding: 4px 0; }
details.sec > summary::-webkit-details-marker { display: none; }
details.sec > summary::before { content: "▸ "; color: var(--muted); font-size: 12px; }
details.sec[open] > summary::before { content: "▾ "; }
details.sec > summary h2 { display: inline; border: none; padding: 0; margin: 0; }

details.sp-loc-det > summary.sp-loc-sum { list-style: none; cursor: pointer; padding: 8px 16px; font-size: 12px; color: var(--gold); letter-spacing: 0.4px; font-weight: 600; }
details.sp-loc-det > summary.sp-loc-sum::-webkit-details-marker { display: none; }
details.sp-loc-det > summary.sp-loc-sum::before { content: "▸ "; color: var(--muted); }
details.sp-loc-det[open] > summary.sp-loc-sum::before { content: "▾ "; }
details.sp-loc-det { border-top: 1px solid var(--line); }
details.sp-loc-det:first-of-type { border-top: none; }
details.sp-loc-det > .sp-tbl { margin: 0 16px 10px; width: calc(100% - 32px); }

/* Filter cards inside salesperson card */
.ctype-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 12px 18px 4px; border-top: 1px solid var(--line); background: #131722; }
@media (max-width: 800px) { .ctype-cards { grid-template-columns: repeat(2, 1fr); } }
.ctype-card { background: var(--panel2); border: 1px solid var(--line); border-left-width: 4px; border-radius: 8px; padding: 8px 10px; cursor: pointer; transition: transform 0.1s; position: relative; overflow: hidden; }
.ctype-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.35); }
.ctype-card.call { border-left-color: var(--good); }
.ctype-card.cnew { border-left-color: var(--accent); }
.ctype-card.cvip { border-left-color: var(--gold); }
.ctype-card.clay { border-left-color: #c4a6ff; }
.ctype-card.active { outline: 2px solid currentColor; outline-offset: 1px; }
.ctype-card .blabel { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.ctype-card .bcount { font-size: 18px; font-weight: 700; margin-top: 2px; }
.ctype-card .bsub { font-size: 11px; color: var(--muted); }
.ctype-card.call .blabel, .ctype-card.call .bcount { color: var(--good); }
.ctype-card.cnew .blabel, .ctype-card.cnew .bcount { color: var(--accent); }
.ctype-card.cvip .blabel, .ctype-card.cvip .bcount { color: var(--gold); }
.ctype-card.clay .blabel, .ctype-card.clay .bcount { color: #c4a6ff; }

.pm-cards { display: none; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 4px 18px; background: #131722; }
details.sp-card[data-cfilter="new"] .pm-cards,
details.sp-card[data-cfilter="vip"] .pm-cards { display: grid; }
@media (max-width: 800px) { .pm-cards { grid-template-columns: 1fr; } }
.pm-card { background: var(--panel2); border: 1px solid var(--line); border-left-width: 4px; border-radius: 8px; padding: 8px 10px; cursor: pointer; transition: transform 0.1s; }
.pm-card:hover { transform: translateY(-1px); }
.pm-card.pmfull { border-left-color: var(--good); }
.pm-card.pmlay  { border-left-color: #c4a6ff; }
.pm-card.pmiho  { border-left-color: #ff9f43; }
.pm-card.active { outline: 2px solid currentColor; outline-offset: 1px; }
.pm-card .blabel { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.pm-card .bcount { font-size: 18px; font-weight: 700; }
.pm-card .bsub { font-size: 11px; color: var(--muted); }
.pm-card.pmfull .blabel, .pm-card.pmfull .bcount { color: var(--good); }
.pm-card.pmlay  .blabel, .pm-card.pmlay  .bcount { color: #c4a6ff; }
.pm-card.pmiho  .blabel, .pm-card.pmiho  .bcount { color: #ff9f43; }

.buckets { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 4px 18px 12px; background: #131722; }
.bucket { background: var(--panel2); border: 1px solid var(--line); border-left-width: 4px; border-radius: 8px; padding: 8px 10px; cursor: pointer; position: relative; overflow: hidden; }
.bucket:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.35); }
.bucket .blabel { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.bucket .bcount { font-size: 18px; font-weight: 700; margin-top: 2px; }
.bucket .bpct { font-size: 11px; opacity: 0.75; margin-left: 4px; }
.bucket .bbar { position: absolute; left: 0; bottom: 0; height: 3px; }
.bucket.b4k { border-left-color: #34d399; } .bucket.b4k .blabel, .bucket.b4k .bcount { color: #34d399; } .bucket.b4k .bbar { background: #34d399; }
.bucket.b3k { border-left-color: var(--gold); } .bucket.b3k .blabel, .bucket.b3k .bcount { color: var(--gold); } .bucket.b3k .bbar { background: var(--gold); }
.bucket.b2k { border-left-color: #fb923c; } .bucket.b2k .blabel, .bucket.b2k .bcount { color: #fb923c; } .bucket.b2k .bbar { background: #fb923c; }
.bucket.b1k { border-left-color: var(--accent); } .bucket.b1k .blabel, .bucket.b1k .bcount { color: var(--accent); } .bucket.b1k .bbar { background: var(--accent); }
.bucket.bsm { border-left-color: var(--muted); } .bucket.bsm .blabel, .bucket.bsm .bcount { color: var(--muted); } .bucket.bsm .bbar { background: var(--muted); }
.bucket.active { outline: 2px solid currentColor; outline-offset: 1px; }

/* Layaway + Refund sub-sections inside salesperson cards */
details.lay-section, details.ref-section { margin: 0 14px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
details.lay-section > summary, details.ref-section > summary { list-style: none; cursor: pointer; padding: 8px 12px; font-size: 12px; background: var(--panel2); }
details.lay-section > summary { color: #c4a6ff; }
details.ref-section > summary { color: var(--bad); }
details.lay-section > summary::-webkit-details-marker, details.ref-section > summary::-webkit-details-marker { display: none; }
details.lay-section > summary::before, details.ref-section > summary::before { content: "▸ "; color: var(--muted); }
details.lay-section[open] > summary::before, details.ref-section[open] > summary::before { content: "▾ "; }
details.lay-section .sp-tbl, details.ref-section .sp-tbl { margin: 0; width: 100%; }
tr.lay-row td.num { color: #c4a6ff; }

/* Filter compositions — display:none for non-matching rows so they're truly hidden */
details.sp-card[data-cfilter="new"]     tr.sp-row:not([data-ctype="new"]),
details.sp-card[data-cfilter="vip"]     tr.sp-row:not([data-ctype="vip"]),
details.sp-card[data-cfilter="layaway"] tr.sp-row:not([data-ctype="layaway"]) { display: none !important; }
/* Receipt rows: only visible when their parent sp-row is visible AND user expanded */
details.sp-card[data-pmfilter="full"] tr.sp-row:not([data-pm="full"]),
details.sp-card[data-pmfilter="lay"]  tr.sp-row:not([data-pm="lay"]),
details.sp-card[data-pmfilter="iho"]  tr.sp-row:not([data-pm="iho"]) { display: none !important; }
details.sp-card[data-bfilter="b4k"] tr.sp-row:not([data-bucket="b4k"]),
details.sp-card[data-bfilter="b3k"] tr.sp-row:not([data-bucket="b3k"]),
details.sp-card[data-bfilter="b2k"] tr.sp-row:not([data-bucket="b2k"]),
details.sp-card[data-bfilter="b1k"] tr.sp-row:not([data-bucket="b1k"]),
details.sp-card[data-bfilter="bsm"] tr.sp-row:not([data-bucket="bsm"]) { display: none !important; }

/* Rank row hover + jump flash */
.rank-tbl tbody tr:hover { background: rgba(122,162,255,0.08); }
details.sp-card.flash { animation: flash-bg 1.5s ease-out; }
@keyframes flash-bg { 0% { background: rgba(122,162,255,0.30); } 100% { background: transparent; } }

/* Per-salesperson breakdown */
details.sp-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 14px; overflow: hidden; }
details.sp-card > summary { list-style: none; cursor: pointer; padding: 12px 16px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; background: linear-gradient(90deg, #1d2230 0%, #161922 100%); border-bottom: 1px solid var(--line); }
details.sp-card > summary::-webkit-details-marker { display: none; }
details.sp-card > summary::before { content: "▸"; color: var(--muted); }
details.sp-card[open] > summary::before { content: "▾"; }
.sp-rank { display: inline-block; padding: 2px 8px; background: var(--panel2); border: 1px solid var(--line); border-radius: 4px; color: var(--accent); font-weight: 700; font-size: 11px; }
.sp-name { font-weight: 700; font-size: 15px; }
.sp-stat { color: var(--muted); font-size: 12px; }
.sp-stat b { color: var(--text); }
.sp-loc { padding: 8px 16px 4px; border-top: 1px solid var(--line); }
.sp-loc:first-of-type { border-top: none; }
.sp-loc h4 { margin: 6px 0 6px; font-size: 12px; color: var(--gold); letter-spacing: 0.4px; font-weight: 600; }
.sp-tbl { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 6px; }
.sp-tbl th, .sp-tbl td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.sp-tbl th { background: var(--panel2); color: var(--muted); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.4px; }
.sp-tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.sp-tbl td.amt { color: var(--good); font-weight: 600; }
.sp-tbl td.good { color: var(--good); }
.sp-tbl td.warn { color: var(--warn); }
.sp-tbl tr.b4k td.amt { color: #34d399; }
.sp-tbl tr.b3k td.amt { color: var(--gold); }
.sp-tbl tr.b2k td.amt { color: #fb923c; }
.sp-tbl tr.b1k td.amt { color: var(--accent); }
.sp-tbl tr.bsm td.amt { color: var(--muted); font-weight: normal; }
.pill { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; border: 1px solid currentColor; background: rgba(255,255,255,0.04); }
.pill.b4k { color: #34d399; }
.pill.b3k { color: var(--gold); }
.pill.b2k { color: #fb923c; }
.pill.b1k { color: var(--accent); }
.pill.bsm { color: var(--muted); }

/* ───────────── Mobile responsive ───────────── */
@media (max-width: 800px) {
  main { padding: 14px 12px 60px; }
  .topbar { flex-wrap: wrap; padding: 10px 14px; gap: 8px; }
  .topbar nav { gap: 8px; flex-wrap: wrap; font-size: 13px; }
  h1 { font-size: 18px !important; }
  h2 { font-size: 14px; }

  /* KPI cards stack 2-up on mobile */
  .grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .card { padding: 10px 12px; }
  .card .value { font-size: 16px; }

  /* Date picker stacks vertically */
  .date-form { flex-direction: column; align-items: stretch; padding: 10px; }
  .date-form label { width: 100%; }
  .date-form input { width: 100%; box-sizing: border-box; }
  .date-form .quick-ranges { display: flex; gap: 6px; flex-wrap: wrap; }
  .date-form button { width: 100%; padding: 12px; }

  /* Tables become horizontally scrollable card stacks */
  .locs-tbl, .rank-tbl, .users-tbl { display: block; overflow-x: auto; white-space: nowrap; font-size: 12px; }
  .locs-tbl th, .locs-tbl td,
  .rank-tbl th, .rank-tbl td { padding: 6px 8px; }

  /* Salesperson schedule */
  .portal-head { padding: 12px; }
  .controls { flex-direction: column; align-items: stretch; }
  .controls input, .controls select { width: 100%; }
  .view-toggle { display: flex; }
  .view-toggle button { flex: 1; padding: 10px; }
  .last-sync { display: block; }

  .appt-row { grid-template-columns: 60px 1fr; gap: 8px; padding: 12px; }
  .appt-row .kind { grid-column: 1; grid-row: 1; }
  .appt-row .time { grid-column: 2; grid-row: 1; text-align: right; }
  .appt-row .who { grid-column: 1 / -1; grid-row: 2; }
  .appt-row .actions { grid-column: 1 / -1; grid-row: 3; }
  .appt-row .actions button { width: 100%; padding: 12px; font-size: 14px; }

  dialog#visit-modal { min-width: unset; width: 95vw; padding: 16px; }

  /* Login on mobile */
  .login-box { margin: 30px 14px; padding: 20px; }

  /* Bigger tap targets on links/buttons */
  a, button { min-height: 36px; }
}

@media (max-width: 480px) {
  .grid { grid-template-columns: 1fr; }
  .topbar nav .user .role { display: none; }
}

/* Visit Search page */
.saved-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; padding: 8px 0; }
.saved-btn { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 8px; padding: 10px 12px; text-align: left; cursor: pointer; color: var(--text); font: inherit; }
.saved-btn:hover { background: var(--panel2); border-left-color: var(--gold); }
.saved-key { font-size: 10px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 2px; font-weight: 700; }
.saved-label { font-size: 12px; color: var(--text); }
.vs-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; padding: 10px 0; }
.vs-form label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
.vs-form input, .vs-form select { background: var(--panel2); border: 1px solid var(--line); color: var(--text); padding: 7px 10px; border-radius: 5px; font: inherit; }
.vs-actions { grid-column: 1/-1; display: flex; gap: 8px; padding-top: 6px; }
.vs-actions button { background: var(--panel2); border: 1px solid var(--line); color: var(--text); padding: 9px 16px; border-radius: 6px; cursor: pointer; font-weight: 600; }
.vs-actions button.primary { background: var(--accent); color: #0f1115; border: 0; }
.quality-panel { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; padding: 6px 0; }
.q-card { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--muted); border-radius: 8px; padding: 10px 12px; }
.q-pct { font-size: 22px; font-weight: 700; }
.q-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; margin-top: 2px; }
.q-val { font-size: 11px; margin-top: 4px; }
.q-card.q-good { border-left-color: var(--good); } .q-card.q-good .q-pct { color: var(--good); }
.q-card.q-mid  { border-left-color: var(--warn); } .q-card.q-mid .q-pct  { color: var(--warn); }
.q-card.q-bad  { border-left-color: var(--bad); }  .q-card.q-bad .q-pct  { color: var(--bad); }
.rank-tbl td.trim { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 11px; }
.rank-tbl span.bad { color: var(--bad); }


/* Edit user popover */
.edit-pop { min-width: 320px; }
.edit-form { display: flex; flex-direction: column; gap: 8px; }
.edit-form label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--muted); }
.edit-form input, .edit-form select { background: var(--panel2); border: 1px solid var(--line); color: var(--text); padding: 6px 8px; border-radius: 4px; font-size: 12px; }
.edit-form button { margin-top: 4px; background: var(--accent); color: #0f1115; border: 0; padding: 7px 12px; border-radius: 4px; font-weight: 600; cursor: pointer; }

/* ════════════════════════════════════════════════════════════════════
   ADMIN DASHBOARD — Mobile-friendly card layouts (< 700px)
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  /* Section title spacing */
  h2 { margin: 18px 0 8px; font-size: 13px; }
  h3.loc-section-h { font-size: 12px; margin: 10px 0 6px; }

  /* ─── BY LOCATION TABLE → card layout ─── */
  .locs-tbl { display: block; white-space: normal; overflow: visible; background: transparent; border: 0; font-size: 12px; }
  .locs-tbl thead { display: none; }
  .locs-tbl tbody { display: block; }
  .locs-tbl tr { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
  .locs-tbl tr.country-row, .locs-tbl tr.subtotal-row, .locs-tbl tr.grand-row { background: var(--panel2); border-color: rgba(245,198,107,0.3); }
  .locs-tbl tr.grand-row { border-color: var(--gold); }
  .locs-tbl td { display: flex; justify-content: space-between; align-items: center; padding: 4px 0 !important; border: none !important; text-align: left !important; font-size: 12px; }
  .locs-tbl td.num { text-align: right !important; }
  .locs-tbl td:first-child { font-size: 14px; color: var(--accent); margin-bottom: 4px; padding-bottom: 6px !important; border-bottom: 1px dashed var(--line) !important; display: block; }
  /* Add row labels via ::before */
  .locs-tbl td:nth-child(2)::before { content: "Sales: "; color: var(--muted); font-size: 11px; font-weight: 400; }
  .locs-tbl td:nth-child(3)::before { content: "Sub-total: "; color: var(--muted); font-size: 11px; font-weight: 400; }
  .locs-tbl td:nth-child(4)::before { content: "💰 Paid today: "; color: var(--muted); font-size: 11px; font-weight: 400; }
  .locs-tbl td:nth-child(5)::before { content: "NEW shows: "; color: var(--muted); font-size: 11px; font-weight: 400; }
  .locs-tbl td:nth-child(6)::before { content: "🆕 NEW: "; color: var(--muted); font-size: 11px; font-weight: 400; }
  .locs-tbl td:nth-child(7)::before { content: "💎 VIP: "; color: var(--muted); font-size: 11px; font-weight: 400; }
  .locs-tbl td:nth-child(8)::before { content: "💵 Layaway: "; color: var(--muted); font-size: 11px; font-weight: 400; }

  /* ─── PERFORMANCE RANKING → card layout ─── */
  .rank-tbl { display: block; white-space: normal; overflow: visible; background: transparent; border: 0; }
  .rank-tbl thead { display: none; }
  .rank-tbl tbody, .rank-tbl tr, .rank-tbl td { display: block; }
  .rank-tbl tr { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; }
  .rank-tbl td { padding: 3px 0 !important; border: none !important; text-align: left !important; font-size: 12px; display: flex; justify-content: space-between; }
  .rank-tbl td.num { text-align: right !important; }
  .rank-tbl td:nth-child(1) { display: inline-block; font-weight: 700; color: var(--accent); margin-right: 8px; padding: 0 !important; }
  .rank-tbl td:nth-child(2) { display: inline-block; font-size: 14px; padding: 0 !important; margin-bottom: 6px; padding-bottom: 6px !important; border-bottom: 1px dashed var(--line) !important; width: calc(100% - 50px); }
  .rank-tbl td:nth-child(3)::before { content: "Sales: "; color: var(--muted); font-weight: 400; }
  .rank-tbl td:nth-child(4)::before { content: "Sold $: "; color: var(--muted); font-weight: 400; }
  .rank-tbl td:nth-child(5)::before { content: "💰 Paid today: "; color: var(--muted); font-weight: 400; }
  .rank-tbl td:nth-child(6)::before { content: "🆕 NEW: "; color: var(--muted); font-weight: 400; }
  .rank-tbl td:nth-child(7)::before { content: "🆕 % close: "; color: var(--muted); font-weight: 400; }
  .rank-tbl td:nth-child(8)::before { content: "💎 VIP: "; color: var(--muted); font-weight: 400; }
  .rank-tbl td:nth-child(9)::before { content: "💎 % close: "; color: var(--muted); font-weight: 400; }
  .rank-tbl td:nth-child(10)::before { content: "💳 IHP: "; color: var(--muted); font-weight: 400; }
  .rank-tbl td:nth-child(11)::before { content: "💵 Layaway pmts: "; color: var(--muted); font-weight: 400; }
  /* For visit search results table — keep horizontal scroll (too many cols + dynamic) */
  #results-table .rank-tbl { display: block; overflow-x: auto; white-space: nowrap; background: var(--panel); border: 1px solid var(--line); }
  #results-table .rank-tbl thead { display: table-header-group; }
  #results-table .rank-tbl tbody { display: table-row-group; }
  #results-table .rank-tbl tr { display: table-row; background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0; }
  #results-table .rank-tbl td { display: table-cell; padding: 6px 8px !important; border-bottom: 1px solid var(--line) !important; text-align: left !important; }
  #results-table .rank-tbl td:nth-child(n)::before { content: "" !important; }

  /* ─── USERS TABLE → card layout ─── */
  .users-tbl { display: block; white-space: normal; overflow: visible; background: transparent; border: 0; }
  .users-tbl thead { display: none; }
  .users-tbl tbody, .users-tbl tr, .users-tbl td { display: block; }
  .users-tbl tr { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 10px; }
  .users-tbl td { padding: 4px 0 !important; border: none !important; font-size: 12px; }
  .users-tbl td:nth-child(1) { display: inline-block; color: var(--muted); font-size: 11px; padding: 0 !important; margin-right: 6px; }
  .users-tbl td:nth-child(2) { display: inline-block; font-size: 15px; font-weight: 700; padding: 0 !important; margin-bottom: 6px; }
  .users-tbl td:nth-child(3)::before { content: "Full name: "; color: var(--muted); font-size: 11px; }
  .users-tbl td:nth-child(4)::before { content: "Role: "; color: var(--muted); font-size: 11px; }
  .users-tbl td:nth-child(5)::before { content: "Contact: "; color: var(--muted); font-size: 11px; }
  .users-tbl td:nth-child(6)::before { content: "Status: "; color: var(--muted); font-size: 11px; }
  .users-tbl td:nth-child(7)::before { content: "📍 Locations"; color: var(--muted); font-size: 11px; display: block; margin-top: 4px; padding-bottom: 2px; }
  .users-tbl td:nth-child(8)::before { content: "Last login: "; color: var(--muted); font-size: 11px; }
  .users-tbl td.actions-cell { padding-top: 8px !important; border-top: 1px dashed var(--line) !important; margin-top: 4px; }
  .users-tbl .btn-action { display: inline-block; margin-bottom: 4px; }
  .users-tbl .loc-list { padding-left: 18px; }
  .users-tbl .inline-form { flex-wrap: wrap; }
  .users-tbl .inline-form select { width: calc(100% - 80px); }

  /* ─── PER-SALESPERSON BREAKDOWN ─── */
  details.sp-card > summary { padding: 10px 12px; gap: 6px; }
  .sp-name { font-size: 13px; width: 100%; margin-bottom: 4px; }
  .sp-rank { font-size: 10px; }
  .sp-stat { font-size: 11px; }
  .sp-tbl { font-size: 11px; }
  .sp-tbl th, .sp-tbl td { padding: 4px 6px; }

  /* ─── VISIT SEARCH FORM ─── */
  .vs-form { grid-template-columns: 1fr; gap: 8px; }
  .vs-actions { flex-direction: column; }
  .vs-actions button { width: 100%; padding: 12px; }

  /* ─── QUALITY PANEL ─── */
  .quality-panel { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .q-card { padding: 8px 10px; }
  .q-pct { font-size: 16px; }

  /* ─── EDIT POPOVER → Full-width modal-ish ─── */
  .popover { right: auto; left: 0; min-width: 280px; max-width: calc(100vw - 30px); }
  .edit-pop { min-width: 280px; }

  /* ─── WATCH PAGE LOC CHIPS ─── */
  .loc-chip { font-size: 11px; padding: 5px 10px; margin-right: 4px; margin-bottom: 4px; }

  /* ─── DETAILS / SECTIONS ─── */
  details.sec > summary { padding: 8px 4px; }
  details.sec > summary h2 { display: inline; }
}

@media (max-width: 480px) {
  .quality-panel { grid-template-columns: 1fr; }
  .pm-cards { grid-template-columns: 1fr !important; }
  .ctype-cards { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ════════════════════════════════════════════════════════════════════
   VISIT MODAL — Mobile (< 700px)
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  /* Modal — full mobile viewport with sticky action footer.
     Scoped to [open] so the closed dialog stays display:none on the page. */
  dialog#visit-modal[open] {
    min-width: unset;
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 14px 14px 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  dialog#visit-modal #visit-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    margin: 0;
  }
  dialog#visit-modal #visit-form > *:not(.vm-grid):not(.actions) { flex: 0 0 auto; }
  dialog#visit-modal h3 { font-size: 15px; margin: 0 0 8px; flex: 0 0 auto; }

  /* Form grid 1-column */
  .vm-grid { grid-template-columns: 1fr; gap: 10px; }
  .vm-grid label.full-width { grid-column: 1; }
  .vm-grid label { font-size: 11px; }
  .vm-grid input, .vm-grid select, .vm-grid textarea { font-size: 14px; padding: 9px 10px; }

  /* Section header inside modal */
  .vm-section-h { font-size: 11px; padding: 6px 0 4px; }
  .vm-section-h span { display: block; margin-top: 2px; font-size: 10px; }

  /* ─── PRICE NEGOTIATION STEP ROW — stacked on mobile ─── */
  .step-row {
    display: grid;
    grid-template-columns: 1fr auto;     /* row 1: label + × */
    grid-template-areas:
      "label  rm"
      "trmt   price"
      "note   note";
    gap: 8px;
    padding: 10px 12px;
  }
  .step-row.no-treatments {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "label  rm"
      "price  price"
      "note   note";
  }
  .step-row .step-label   { grid-area: label; font-size: 12px; }
  .step-row .step-rm      { grid-area: rm; font-size: 22px; padding: 0 6px; line-height: 1; min-width: 32px; }
  .step-row .step-treatments { grid-area: trmt; }
  .step-row .step-price      { grid-area: price; }
  .step-row .step-note       { grid-area: note; }
  /* Force hide treatments input when offer doesn't need it (CSS Grid auto-places named-but-undefined areas otherwise) */
  .step-row.no-treatments .step-treatments { display: none !important; }
  .step-row input[type="number"], .step-row input[type="text"] {
    font-size: 14px !important;
    padding: 9px 10px !important;
    min-height: 40px;
  }
  .step-row .step-treatments { width: 100% !important; }
  .step-row .step-price { width: 100% !important; }
  .step-row .step-note { width: 100% !important; }

  /* Step + add button + summary spacing */
  #vm-steps { display: flex; flex-direction: column; gap: 10px; }
  .step-add-btn { padding: 11px 14px; font-size: 13px; }
  #vm-steps-summary { font-size: 12px; padding: 4px 2px; }

  /* Multi-select dropdowns (products, upsell items, payment methods) */
  details.multi-dd > summary { padding: 12px 30px 12px 14px; min-height: 44px; font-size: 14px; }
  .multi-dd-panel { max-height: 60vh; overflow-y: auto; }
  .multi-dd-panel label { padding: 11px 14px !important; font-size: 14px; }
  .multi-dd-panel input[type="checkbox"] { width: 22px !important; height: 22px !important; }

  /* Payment method rows — stack number under label */
  .pay-item { flex-direction: column; align-items: stretch; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
  .pay-item label { font-size: 14px; padding: 4px 0 !important; }
  .pay-item input[type="number"] { width: 100% !important; font-size: 14px !important; padding: 9px 10px !important; min-height: 40px; }

  /* Modal scroll area — vm-grid takes all leftover height and scrolls */
  dialog#visit-modal .vm-grid {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
    min-height: 0;
  }

  /* Modal action buttons — pinned to bottom, always visible above mobile chrome */
  dialog#visit-modal .actions {
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 -14px;
    padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
    background: var(--panel);
    border-top: 1px solid var(--line);
    position: sticky;
    bottom: 0;
    z-index: 5;
  }
  dialog#visit-modal .actions button { padding: 14px 16px; font-size: 15px; min-height: 48px; flex: 1; font-weight: 600; }

  /* History box inside modal */
  .history-box { font-size: 11px; max-height: 180px; }
}

@media (max-width: 380px) {
  /* Tiny phones — keep step row 2-col but tighten everything */
  dialog#visit-modal { padding: 12px 10px; }
  .step-row { padding: 8px 10px; }
  .vm-grid input, .vm-grid select, .vm-grid textarea { font-size: 13px; padding: 8px; }
}

/* Offer multi-select items (services with treatments, devices with qty) */
.off-item { display: flex; align-items: center; gap: 8px; padding: 6px 12px; }
.off-item:hover { background: var(--panel2); }
.off-item label { display: inline-flex !important; align-items: center; gap: 8px; flex: 1; margin: 0 !important; padding: 0 !important; font-size: 13px; cursor: pointer; color: var(--text) !important; }
.off-item label input[type="checkbox"] { width: auto !important; margin: 0 !important; padding: 0 !important; }
.off-item input[type="number"] { width: 110px !important; padding: 5px 8px !important; margin: 0 !important; background: var(--panel) !important; font-size: 12px !important; }
.off-item input[type="number"]:disabled { opacity: 0.3; }

/* Mobile: stack offer item label/input vertically (same as pay-item) */
@media (max-width: 700px) {
  .off-item { flex-direction: column; align-items: stretch; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
  .off-item label { font-size: 14px; padding: 4px 0 !important; }
  .off-item input[type="number"] { width: 100% !important; font-size: 14px !important; padding: 9px 10px !important; min-height: 40px; }
}

/* Performance Ranking country tabs */
.rank-tabs { display: flex; gap: 8px; margin: 4px 0 12px; flex-wrap: wrap; }
.rank-tab { background: var(--panel2); border: 1px solid var(--line); color: var(--text); padding: 8px 14px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; }
.rank-tab:hover { border-color: var(--accent); }
.rank-tab.active { background: var(--accent); color: #0f1115; border-color: var(--accent); }

@media (max-width: 700px) {
  .rank-tabs { gap: 6px; }
  .rank-tab { flex: 1 1 0; padding: 10px 8px; font-size: 11px; min-width: 0; text-align: center; }
}

/* ════════════════════════════════════════════════════════════════════
   COMPREHENSIVE MOBILE UI — Visit Modal + everything else
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  /* ── Modal: edge-to-edge with safe spacing — scoped to [open] ── */
  dialog#visit-modal[open] {
    min-width: 100vw;
    width: 100vw;
    max-width: 100vw;
    max-height: 100vh;
    margin: 0;
    border-radius: 0;
    padding: 14px 12px env(safe-area-inset-bottom, 14px);
    inset: 0;
  }
  dialog#visit-modal h3 { font-size: 15px; line-height: 1.3; padding-right: 30px; }

  /* History box inside modal — compact */
  .history-box { font-size: 11px; max-height: 140px; padding: 6px; }
  .history-box .h-row { padding: 6px 4px; gap: 6px; }

  /* ── ALL multi-select dropdowns (.multi-dd) ── */
  details.multi-dd > summary {
    padding: 12px 80px 12px 14px;
    min-height: 46px;
    font-size: 14px;
    line-height: 1.3;
    white-space: normal !important;
  }
  details.multi-dd > summary > span {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: break-word;
    display: inline;
  }
  details.multi-dd > summary::after {
    font-size: 9px;
    right: 8px;
    line-height: 1.2;
  }

  /* Multi-dd panels — full-width with cap height */
  details.multi-dd[open] .multi-dd-panel {
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
  }
  .multi-dd-panel label {
    padding: 12px 14px !important;
    font-size: 14px;
    line-height: 1.35;
    min-height: 48px;
    box-sizing: border-box;
  }
  .multi-dd-panel input[type="checkbox"] {
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0;
  }
  .multi-dd-panel .dd-group {
    padding: 10px 14px 6px;
    font-size: 11px;
    position: sticky;
    top: 0;
    z-index: 2;
  }
  .multi-dd-close {
    padding: 12px 14px;
    position: sticky;
    bottom: 0;
    z-index: 2;
  }
  .multi-dd-close button {
    width: 100%;
    padding: 12px;
    font-size: 14px;
    background: var(--accent);
    color: #0f1115;
    border: 0;
    border-radius: 6px;
    font-weight: 700;
  }

  /* Reason sections divider on mobile */
  .reason-section { padding-bottom: 4px; }
  .reason-section + .reason-section { border-top: 2px solid var(--line); margin-top: 6px; }

  /* ── Offer items / Financing items / Payment items — all stack vertically ── */
  .off-item, .pay-item, .fin-item {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
  }
  .off-item label, .pay-item label, .fin-item label {
    font-size: 14px;
    padding: 4px 0 !important;
    min-height: 32px;
  }
  .off-item label input[type="checkbox"],
  .pay-item label input[type="checkbox"],
  .fin-item label input[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;
    margin-right: 8px !important;
  }
  .off-item input[type="number"],
  .pay-item input[type="number"],
  .fin-item input[type="number"] {
    width: 100% !important;
    font-size: 14px !important;
    padding: 10px 12px !important;
    min-height: 42px;
    box-sizing: border-box;
  }
  .fin-item select {
    width: 100% !important;
    font-size: 14px !important;
    padding: 10px 12px !important;
    min-height: 42px;
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 4px;
  }

  /* ── Form inputs in vm-grid ── */
  .vm-grid input[type="text"],
  .vm-grid input[type="number"],
  .vm-grid input[type="email"],
  .vm-grid select,
  .vm-grid textarea {
    font-size: 16px !important;  /* prevents iOS zoom-on-focus */
    padding: 11px 12px;
    min-height: 44px;
    width: 100%;
    box-sizing: border-box;
  }
  .vm-grid label {
    font-size: 11px;
    color: var(--muted);
    text-transform: none;
    letter-spacing: 0;
  }

  /* ── Step rows: tighter mobile (already styled, just fine-tune) ── */
  .step-row { padding: 12px; gap: 8px; }
  .step-row .step-label { font-size: 12px; font-weight: 700; }
  .step-row .step-rm {
    font-size: 24px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 4px;
  }

  /* ── Modal action buttons (Cancel / Save) sticky at bottom ── */
  dialog#visit-modal .actions {
    position: sticky;
    bottom: 0;
    background: var(--panel);
    border-top: 1px solid var(--line);
    margin: 14px -12px 0;
    padding: 12px;
    gap: 10px;
    z-index: 10;
  }
  dialog#visit-modal .actions button {
    padding: 14px;
    font-size: 15px;
    min-height: 48px;
    flex: 1;
    border-radius: 8px;
    font-weight: 700;
  }
  dialog#visit-modal #vm-save {
    background: var(--accent);
    color: #0f1115;
    border: 0;
  }
  dialog#visit-modal #vm-cancel {
    background: var(--panel2);
    color: var(--text);
    border: 1px solid var(--line);
  }

  /* ── Negotiation section header ── */
  #vm-negotiation-section .vm-section-h {
    font-size: 12px;
    padding: 8px 0 4px;
  }
  #vm-negotiation-section .vm-section-h span {
    display: block;
    font-size: 10px;
    margin-top: 2px;
    line-height: 1.4;
  }

  /* ── Salesperson schedule (portal page) loc chips ── */
  .portal-head { padding: 12px; gap: 8px; }
  .portal-head h1 { font-size: 18px; }
  .loc-chip { padding: 8px 14px; font-size: 12px; min-height: 36px; }

  /* ── Login box ── */
  .login-box { margin: 24px 12px; padding: 18px; }
  .login-box input { font-size: 16px; padding: 11px 12px; }

  /* ── Topbar / nav ── */
  .topbar { padding: 10px 12px; }
  .topbar nav { font-size: 12px; gap: 6px; }
  .topbar nav a { padding: 6px 8px; }
}

/* Tiny phones (<400px): keep modal usable */
@media (max-width: 400px) {
  dialog#visit-modal { padding: 12px 10px; }
  .multi-dd-panel label { padding: 11px 12px !important; font-size: 13px; }
  .step-row { padding: 10px; }
}


/* ─── Coverage / scorecard / reconciliation — table styles + mobile scroll wrapper ─── */
.cov-tbl { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-top: 8px; }
.cov-tbl th, .cov-tbl td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cov-tbl th { background: var(--panel2); color: var(--muted); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; }
.cov-tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.cov-tbl tr.cov-uncovered td { background: rgba(255,99,99,0.06); }
.cov-tbl tr.cov-discrepancy td { background: rgba(245,198,107,0.06); }
.cov-tbl .kind { font-size: 10px; padding: 2px 6px; border-radius: 4px; background: var(--panel2); }
.cov-tbl .kind.vip { color: var(--gold); }
.cov-tbl .kind.new { color: var(--accent); }
.cov-tbl .ap-showed { color: var(--good); font-size: 11px; }
.cov-tbl .ap-confirmed { color: var(--gold); font-size: 11px; }
.cov-tbl .ap-cancelled, .cov-tbl .ap-noshow { color: var(--bad); font-size: 11px; }

@media (max-width: 800px) {
  /* horizontal scroll wrapper for wide tables on mobile */
  details.sec > .cov-tbl, details.sec > table.locs-tbl,
  details.sec > div > .cov-tbl, details.sec > div > table.locs-tbl,
  .cov-tbl, details.sec > table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .cov-tbl thead, .cov-tbl tbody, .cov-tbl tr { display: table; width: max-content; min-width: 100%; }
  .cov-tbl th, .cov-tbl td { white-space: nowrap; }
}


/* ─── Salesperson visit modal — extra mobile polish ─── */
@media (max-width: 700px) {
  /* Compact title — single line, ellipsis if too long */
  dialog#visit-modal h3 {
    font-size: 17px !important;
    font-weight: 700 !important;
    margin: 0 0 8px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
    padding-right: 6px;
  }
  /* Hide history box when emptied via JS — done already, but enforce zero margin */
  #vm-history:empty, #vm-history[style*="none"] { display: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }

  /* Form labels — slightly tighter, two-line max for sublabels */
  .vm-grid > label, dialog#visit-modal label {
    font-size: 12px !important;
    margin-bottom: 8px !important;
    color: var(--text) !important;
    font-weight: 500;
  }
  .vm-grid > label .muted,
  .vm-grid label .muted {
    font-size: 10px !important;
    color: var(--muted) !important;
    font-weight: 400;
  }

  /* Section headers (PRICE NEGOTIATION JOURNEY etc) — compact */
  .vm-section-h {
    font-size: 11px !important;
    color: var(--gold) !important;
    border-top: 1px dashed rgba(245,198,107,0.25) !important;
    padding-top: 8px !important;
    margin-top: 4px !important;
  }
  .vm-section-h span { font-size: 10px !important; color: var(--muted) !important; line-height: 1.4; }

  /* Final/step row — keep tight */
  .step-row { padding: 8px 10px !important; }
  .step-row .step-rm { font-size: 18px !important; padding: 4px 8px !important; min-width: 28px !important; opacity: 0.4; }
  .step-row[data-final="1"]:only-child .step-rm { display: none; }   /* hide × on the only/final step */

  /* Inputs — comfy mobile sizing */
  .vm-grid input, .vm-grid select, .vm-grid textarea,
  dialog#visit-modal input, dialog#visit-modal select, dialog#visit-modal textarea {
    font-size: 16px !important;  /* prevents iOS auto-zoom on focus */
    padding: 11px 12px !important;
    min-height: 44px;
    border-radius: 8px;
  }

  /* Multi-select dropdowns more compact */
  details.multi-dd > summary {
    padding: 11px 30px 11px 14px !important;
    font-size: 14px !important;
    min-height: 44px;
  }
  .multi-dd-panel { max-height: 50vh; }

  /* Sticky action footer already done; ensure shadow above for visual separation */
  dialog#visit-modal .actions {
    box-shadow: 0 -8px 16px -8px rgba(0,0,0,0.4);
  }

  /* Reduce vertical empty space at top of modal */
  dialog#visit-modal #vm-context:empty { display: none; }
  dialog#visit-modal { padding-top: 12px !important; }
}

/* Tiny phones (< 380px) */
@media (max-width: 379px) {
  dialog#visit-modal h3 { font-size: 16px !important; }
  .vm-section-h { font-size: 10px !important; }
}


/* ─── Scorecard mobile labels — override the generic .locs-tbl labels ─── */
@media (max-width: 700px) {
  /* Location coverage table on Scorecard
     Columns: 1 Location, 2 Total, 3 NEW appts, 4 VIP appts, 5 Marked, 6 Marked N/V, 7 Coverage %, 8 MP sales, 9 MP $ */
  .sc-loc-tbl td:nth-child(2)::before { content: "Total appts: "; color: var(--muted); font-size: 11px; font-weight: 400; }
  .sc-loc-tbl td:nth-child(3)::before { content: "🆕 NEW appts: "; color: var(--muted); font-size: 11px; font-weight: 400; }
  .sc-loc-tbl td:nth-child(4)::before { content: "💎 VIP appts: "; color: var(--muted); font-size: 11px; font-weight: 400; }
  .sc-loc-tbl td:nth-child(5)::before { content: "Marked (anyone): "; color: var(--muted); font-size: 11px; font-weight: 400; }
  .sc-loc-tbl td:nth-child(6)::before { content: "Marked NEW / VIP: "; color: var(--muted); font-size: 11px; font-weight: 400; }
  .sc-loc-tbl td:nth-child(7)::before { content: "Coverage %: "; color: var(--muted); font-size: 11px; font-weight: 400; }
  .sc-loc-tbl td:nth-child(8)::before { content: "MP sales: "; color: var(--muted); font-size: 11px; font-weight: 400; }
  .sc-loc-tbl td:nth-child(9)::before { content: "MP $: "; color: var(--muted); font-size: 11px; font-weight: 400; }

  /* Per-salesperson scorecard table
     Columns: 1 Salesperson, 2 Assigned, 3 NEW, 4 VIP, 5 Marked, 6 Marked N/V, 7 Sold, 8 No-sale, 9 Closing %, 10 Reported $ */
  .sc-sp-tbl td:nth-child(2)::before { content: "Appts at their loc(s): "; color: var(--muted); font-size: 11px; font-weight: 400; }
  .sc-sp-tbl td:nth-child(3)::before { content: "🆕 NEW: "; color: var(--muted); font-size: 11px; font-weight: 400; }
  .sc-sp-tbl td:nth-child(4)::before { content: "💎 VIP: "; color: var(--muted); font-size: 11px; font-weight: 400; }
  .sc-sp-tbl td:nth-child(5)::before { content: "Marked by them: "; color: var(--muted); font-size: 11px; font-weight: 400; }
  .sc-sp-tbl td:nth-child(6)::before { content: "Marked NEW / VIP: "; color: var(--muted); font-size: 11px; font-weight: 400; }
  .sc-sp-tbl td:nth-child(7)::before { content: "Sold: "; color: var(--muted); font-size: 11px; font-weight: 400; }
  .sc-sp-tbl td:nth-child(8)::before { content: "No-sale: "; color: var(--muted); font-size: 11px; font-weight: 400; }
  .sc-sp-tbl td:nth-child(9)::before { content: "Closing %: "; color: var(--muted); font-size: 11px; font-weight: 400; }
  .sc-sp-tbl td:nth-child(10)::before { content: "Reported $: "; color: var(--muted); font-size: 11px; font-weight: 400; }
}

/* Consent button on appointment cards */
.appt-row .actions button.consent-btn,
.est-row .actions button.consent-btn {
  background: var(--panel2);
  color: #4299e1;
  border: 1px solid var(--line);
  padding: 6px 10px;
}
.appt-row .actions button.consent-btn:hover,
.est-row .actions button.consent-btn:hover {
  background: #4299e1;
  color: white;
}
/* GHL appointment status pill */
.ghl-status-wrap { position: relative; display: inline-block; margin-top: 4px; }
.ghl-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 6px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.4px; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.2);
  user-select: none;
  transition: filter 0.15s, border-color 0.15s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.ghl-status:hover { filter: brightness(1.15); border-color: rgba(255,255,255,0.5); }
.ghl-status .caret { font-size: 11px; opacity: 0.9; margin-left: 2px; }
.ghl-status.confirmed { background: #1e3a5f; color: #93c5fd; border-color: #2c5282; }
.ghl-status.showed    { background: #1a472a; color: #c6f6d5; border-color: #2f7a4d; }
.ghl-status.noshow    { background: #5a1c1c; color: #feb2b2; border-color: #9b2c2c; }
.ghl-status.cancelled { background: #2d3748; color: #a0aec0; border-color: #4a5568; }
.ghl-status.new       { background: #2d3748; color: #cbd5e0; border-color: #4a5568; }
.ghl-status.invalid   { background: #374151; color: #d1d5db; border-color: #4b5563; }
.ghl-status.updating  { background: var(--panel2); color: var(--muted); }

.ghl-status-menu {
  position: absolute; top: 28px; left: 0; z-index: 50;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  padding: 4px; min-width: 160px;
  display: none;
  flex-direction: column; gap: 2px;
}
.ghl-status-menu.open { display: flex; }
.ghl-status-menu .status-opt {
  display: flex; align-items: center; gap: 8px;
  background: transparent; border: 0; color: var(--text);
  padding: 8px 12px; border-radius: 5px; cursor: pointer;
  font-size: 13px; text-align: left; font-weight: 500;
}
.ghl-status-menu .status-opt:hover { background: var(--panel2); }

.appt-row .actions button.consent-btn:disabled,
.est-row .actions button.consent-btn:disabled,
.appt-row .actions button.btn-action.consent-btn:disabled,
.est-row .actions button.btn-action.consent-btn:disabled {
  cursor: not-allowed;
  background: var(--panel2);
  color: var(--muted);
  border: 1px dashed var(--line);
  opacity: 0.7;
}
.appt-row .actions button.consent-btn.has-consent,
.est-row .actions button.consent-btn.has-consent,
.appt-row .actions button.btn-action.consent-btn.has-consent,
.est-row .actions button.btn-action.consent-btn.has-consent {
  background: #1a472a !important;
  color: #c6f6d5 !important;
  border: 1px solid #2f7a4d !important;
  cursor: pointer;
  opacity: 1;
}
.appt-row .actions button.consent-btn.has-consent:hover,
.est-row .actions button.consent-btn.has-consent:hover {
  background: #22543d !important;
}
.appt-row .actions button.consent-btn.no-consent,
.est-row .actions button.consent-btn.no-consent,
.appt-row .actions button.btn-action.consent-btn.no-consent,
.est-row .actions button.btn-action.consent-btn.no-consent {
  background: var(--panel2);
  color: #b78b30;
  border: 1px dashed #b78b30;
  opacity: 0.85;
}

/* Consent modal — large, polished, mobile-first.
   !important used liberally to win against any browser default or bootstrap-ish reset. */
dialog#consent-modal {
  width: 96vw !important;
  max-width: 1300px !important;
  height: 94vh !important;
  max-height: 1100px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  color: #1a202c !important;
  box-shadow:
    0 30px 90px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.05) !important;
  margin: auto !important;
  animation: cmFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
}
@keyframes cmFadeIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
dialog#consent-modal::backdrop {
  background: rgba(10,12,18,0.82) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
dialog#consent-modal .cm-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  background: linear-gradient(135deg, #1e3a8a 0%, #3730a3 50%, #4338ca 100%) !important;
  color: white !important;
  padding: 18px 28px !important;
  box-shadow: 0 4px 14px rgba(30,58,138,0.25) !important;
  position: relative !important;
  z-index: 2 !important;
}
dialog#consent-modal .cm-title {
  font-weight: 700 !important;
  font-size: 19px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-right: 16px !important;
  letter-spacing: -0.2px !important;
}
dialog#consent-modal .cm-close {
  background: rgba(255,255,255,0.18) !important;
  border: 0 !important;
  color: white !important;
  padding: 11px 22px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all 0.15s !important;
}
dialog#consent-modal .cm-close:hover {
  background: rgba(255,255,255,0.32) !important;
  transform: translateY(-1px) !important;
}
dialog#consent-modal .cm-close:active { transform: translateY(0) !important; }
dialog#consent-modal .cm-frame {
  width: 100% !important;
  height: calc(100% - 64px) !important;
  border: 0 !important;
  display: block !important;
  background: #f7f9fc !important;
}

/* Tablet (iPad) */
@media (max-width: 1024px) {
  dialog#consent-modal {
    width: 99vw !important;
    height: 97vh !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 10px !important;
  }
}

/* Phone — fullscreen */
@media (max-width: 600px) {
  dialog#consent-modal {
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
  }
  dialog#consent-modal .cm-header { padding: 14px 16px !important; }
  dialog#consent-modal .cm-title { font-size: 15px !important; }
  dialog#consent-modal .cm-close { padding: 9px 16px !important; font-size: 13px !important; }
}

/* Salesperson card: assigned esthetician pill */
.appt-row .who .est-pill {
  display: inline-block; margin-top: 4px;
  font-size: 11px; font-weight: 600;
  background: rgba(245, 198, 107, 0.12);
  color: var(--gold);
  padding: 2px 8px; border-radius: 10px;
  border: 1px solid rgba(245, 198, 107, 0.4);
}
.appt-row .who .est-pill .good {
  color: var(--good); margin-left: 4px; font-weight: 700;
}