/* ============================================================
   QR CHECK-IN MODULE — Dashboard styles
   Append this block before the "mobile nav toggle" comment in
   the project's global stylesheet, per existing convention.
   ============================================================ */

/* This project has no global .hidden utility — scoped here since only the
   QR Check-in module's JS toggles it. */
.hidden{ display:none !important; }

/* Checkin module tokens — aliases onto the app's actual theme vars
   (base.css :root / [data-theme="dark"]) rather than a separate hardcoded
   palette. This is the only place these aliases are defined; every other
   rule in this file keeps using --ci-* so this stays a one-line fix per
   token if the base theme palette ever changes. */
:root{
  --ci-rose:var(--purple-500);
  --ci-rose-soft:var(--purple-50);
  --ci-sage:var(--green-600);
  --ci-sage-soft:var(--green-50);
  --ci-amber:var(--amber-600);
  --ci-amber-soft:var(--amber-50);
  /* Not aliased straight to --red-600 like the other tokens above: --red-600
     on --red-50 measures 4.41:1, just under WCAG AA's 4.5:1 for normal text
     (affects .ci-btn-danger and .ci-badge-expiring, both text-on-red-50).
     #c41e1e is the same red-600 family darkened one step, measuring 5.41:1
     on --red-50 — the same --red-600/--red-50 pair is reused in ~15 other
     places across base.css outside this module's scope, so those still
     carry the 4.41:1 ratio and would need the same fix separately. */
  --ci-red:#c41e1e;
  --ci-red-soft:var(--red-50);
  --ci-border:var(--border);
  --ci-muted:var(--ink-500);
  --ci-ink:var(--ink-900);
  --ci-card-bg:var(--card-bg);
  --ci-radius-lg:var(--radius-lg);
  --ci-radius-md:var(--radius-md);
  --ci-radius-sm:var(--radius-sm);
  --ci-shadow-md:var(--shadow-md);
}

/* ---------- Module header ---------- */
.ci-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:20px;
  flex-wrap:wrap;
}
.ci-header h2{ font-size:20px; font-weight:700; color:var(--ci-ink); }
.ci-header p{ font-size:13px; color:var(--ci-muted); margin-top:2px; }
/* Bell (sound toggle) + "+ Add to Queue" button — was a bare flex div with
   no gap, so the two sat edge-to-edge with zero breathing room. */
.ci-header-actions{ display:flex; align-items:center; gap:10px; }

.ci-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 16px;
  border-radius:10px;
  border:none;
  font-size:13.5px;
  font-weight:600;
  cursor:pointer;
  transition:opacity .15s ease, transform .1s ease;
}
.ci-btn:active{ transform:scale(0.98); }
.ci-btn-primary{ background:var(--ci-rose); color:#fff; }
.ci-btn-primary:hover{ opacity:0.92; }
.ci-btn-ghost{ background:var(--ci-card-bg); color:var(--ci-ink); border:1.5px solid var(--ci-border); }
.ci-btn-ghost:hover{ background:var(--ci-rose-soft); }
.ci-btn-danger{ background:var(--ci-red-soft); color:var(--ci-red); border:1.5px solid transparent; }
.ci-btn-danger:hover{ opacity:0.85; }
.ci-btn-sm{ padding:7px 12px; font-size:12.5px; }
.ci-btn:disabled{ opacity:0.5; cursor:not-allowed; }
/* Icon-only buttons (e.g. delete-submission trash icon): .ci-btn-sm's own
   padding renders far under the 44x44px minimum touch target. Rather than
   growing the visible icon, this pads the invisible hit area out to 44px
   via min-width/min-height + centering, so the icon stays visually compact
   inside a dense table row while the tap target stays accessible. */
.ci-icon-btn{
  min-width:44px; min-height:44px;
  padding:0;
  display:inline-flex; align-items:center; justify-content:center;
}

/* ---------- Tabs ----------
   Tab bar/buttons now use the app-wide .mkt-tabs/.mkt-tab component
   (see css/base.css) instead of a bespoke style, so this module matches
   Marketing/Business/GMB tab bars everywhere else. Only the count badge
   (a QR Check-in-specific pill inside the tab) stays custom here. */
#ciTabs .mkt-tab .ci-tab-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px;
  border-radius:999px;
  background:var(--ci-rose-soft); color:var(--ci-rose);
  font-size:11px; font-weight:700;
  margin-left:6px;
}

/* ---------- KPI cards (Overview) ---------- */
.ci-kpi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:12px;
  margin-bottom:24px;
}
.ci-kpi-card{
  background:var(--ci-card-bg);
  border:1px solid var(--ci-border);
  border-radius:14px;
  padding:16px;
}
.ci-kpi-label{ font-size:12px; color:var(--ci-muted); font-weight:600; margin-bottom:6px; }
.ci-kpi-value{ font-size:24px; font-weight:700; color:var(--ci-ink); }
.ci-kpi-sub{ font-size:11.5px; color:var(--ci-sage); margin-top:4px; font-weight:600; }
.ci-kpi-clickable{ cursor:pointer; transition:border-color .12s ease, transform .12s ease; min-height:44px; }
.ci-kpi-clickable:hover{ border-color:var(--ci-rose); }
.ci-kpi-clickable:active{ transform:scale(0.98); }
.ci-kpi-clickable:focus-visible{ outline:2px solid var(--ci-rose); outline-offset:2px; }

/* ---------- Section blocks ---------- */
.ci-section-title{
  font-size:14px; font-weight:700; color:var(--ci-ink);
  margin:24px 0 12px;
}
.ci-section-title:first-child{ margin-top:0; }
.ci-section-title-row{
  display:flex; align-items:center; justify-content:space-between;
  margin:24px 0 12px;
}
.ci-section-title-row .ci-section-title{ margin:0; }
.ci-view-all-link{
  font-size:12.5px; font-weight:600; color:var(--ci-rose); cursor:pointer;
  min-height:44px; display:flex; align-items:center;
}
.ci-view-all-link:hover{ text-decoration:underline; }

/* ---------- Cards (queue / submissions / QR) ---------- */
.ci-card-list{ display:flex; flex-direction:column; gap:10px; }

.ci-card{
  background:var(--ci-card-bg);
  border:1px solid var(--ci-border);
  border-radius:14px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  gap:14px;
}
.ci-card-avatar{
  width:38px; height:38px; border-radius:10px;
  background:var(--ci-rose-soft); color:var(--ci-rose);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px;
  flex-shrink:0;
}
.ci-card-main{ flex:1; min-width:0; }
.ci-card-title{ font-size:14px; font-weight:700; color:var(--ci-ink); }
.ci-card-sub{ font-size:12.5px; color:var(--ci-muted); margin-top:2px; }
.ci-card-meta{
  display:flex; flex-wrap:wrap; gap:6px 14px;
  margin-top:8px; font-size:12.5px; color:var(--ci-ink);
}
.ci-card-meta span b{ color:var(--ci-muted); font-weight:500; margin-right:3px; }
.ci-card-actions{ display:flex; gap:8px; flex-shrink:0; }

.ci-badge{
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px;
  border-radius:999px;
  font-size:11.5px; font-weight:700;
}
.ci-badge-pending{ background:var(--ci-amber-soft); color:var(--ci-amber); }
.ci-badge-received{ background:var(--ci-sage-soft); color:var(--ci-sage); }
.ci-badge-expiring{ background:var(--ci-red-soft); color:var(--ci-red); }

.ci-stars{ color:var(--ci-rose); font-size:13px; letter-spacing:1px; }
.ci-stars-sm{ font-size:11px; }
.ci-stars-high{ color:var(--ci-sage); }
.ci-stars-mid{ color:var(--ci-amber); }
.ci-stars-low{ color:var(--ci-red); }

.ci-card-clickable{ cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease; }
.ci-card-clickable:hover{ border-color:var(--ci-rose); box-shadow:0 2px 10px rgba(167,59,86,0.08); }

/* ---------- New-arrival pulse (Pending tab) ---------- */
@keyframes ciPulse{
  0%{ box-shadow:0 0 0 0 var(--ci-rose-soft); }
  70%{ box-shadow:0 0 0 8px rgba(167,59,86,0); }
  100%{ box-shadow:0 0 0 0 rgba(167,59,86,0); }
}
.ci-pulse{ animation:ciPulse 1s ease-out 2; border-radius:8px; }

/* ---------- Submissions search ---------- */
.ci-search-wrap{ position:relative; margin-bottom:14px; }
.ci-search-wrap svg{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--ci-muted); pointer-events:none; }
.ci-search-input{
  width:100%; padding:10px 14px 10px 36px;
  border:1.5px solid var(--ci-border); border-radius:10px;
  font-size:13.5px; color:var(--ci-ink); background:var(--ci-card-bg);
}
.ci-search-input:focus{ outline:none; border-color:var(--ci-rose); }

/* ---------- Overview charts ---------- */
.ci-chart-row{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:14px; margin-bottom:24px;
}
.ci-chart-card{
  background:var(--ci-card-bg); border:1px solid var(--ci-border); border-radius:14px;
  padding:16px; position:relative;
}
.ci-chart-card h4{ font-size:12.5px; font-weight:700; color:var(--ci-ink); margin-bottom:10px; }
.ci-chart-card .ci-chart-canvas-wrap{ height:160px; position:relative; }
.ci-chart-empty{
  position:absolute; inset:38px 16px 16px; display:flex; align-items:center;
  justify-content:center; font-size:12px; color:var(--ci-muted); text-align:center;
}

/* ---------- Submission drawer extras ---------- */
.ci-drawer-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; }
.ci-drawer-actions .ci-btn{ text-decoration:none; }

/* ---------- Kpi suffix (colored stars next to avg rating) ---------- */
.ci-kpi-suffix{ font-size:13px; vertical-align:2px; }

/* ---------- Empty state ---------- */
.ci-empty{
  text-align:center;
  padding:48px 20px;
  color:var(--ci-muted);
}
.ci-empty .ci-empty-icon{ font-size:32px; margin-bottom:10px; }
.ci-empty .ci-empty-title{ font-size:14px; font-weight:700; color:var(--ci-ink); margin-bottom:4px; }
.ci-empty .ci-empty-sub{ font-size:13px; }

/* ---------- Filter chips ---------- */
.ci-filters{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.ci-filter-chip {
  border:1.5px solid var(--ci-border);
  background:var(--ci-card-bg);
  color:var(--ci-muted);
  cursor:pointer;
}
.ci-filter-chip.active{ background:var(--ci-ink); border-color:var(--ci-ink); color:#fff; }

/* ---------- Manage QR tab ---------- */
.ci-qr-card{
  background:var(--ci-card-bg);
  border:1px solid var(--ci-border);
  border-radius:16px;
  padding:20px;
  margin-bottom:16px;
}
.ci-qr-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.ci-qr-visual{
  width:120px; height:120px;
  border-radius:12px;
  background:var(--ci-card-bg);
  border:1px solid var(--ci-border);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.ci-qr-visual img{ width:100%; height:100%; object-fit:contain; border-radius:8px; }
.ci-qr-info{ flex:1; }
.ci-qr-type{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--ci-muted); }
.ci-qr-name{ font-size:15px; font-weight:700; color:var(--ci-ink); margin:3px 0 8px; }
.ci-qr-meta{ font-size:12.5px; color:var(--ci-muted); line-height:1.6; }
.ci-qr-actions{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }

.ci-toggle{
  position:relative; width:40px; height:22px;
  border-radius:999px; background:var(--ci-border);
  cursor:pointer; flex-shrink:0; transition:background .15s ease;
}
.ci-toggle.on{ background:var(--ci-sage); }
.ci-toggle.disabled{ opacity:0.4; cursor:not-allowed; }
.ci-toggle::after{
  content:''; position:absolute; top:2px; left:2px;
  width:18px; height:18px; border-radius:50%; background:var(--ci-card-bg);
  transition:transform .15s ease;
  box-shadow:0 1px 2px rgba(0,0,0,0.15);
}
.ci-toggle.on::after{ transform:translateX(18px); }

/* ---------- Settings tab ---------- */
.ci-settings-section-title{ font-size:13px; font-weight:700; color:var(--ci-ink); margin:22px 0 10px; }
.ci-settings-section-title:first-child{ margin-top:0; }
.ci-settings-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 16px;
  border:1px solid var(--ci-border);
  border-radius:12px;
  background:var(--ci-card-bg);
  margin-bottom:10px;
}
.ci-settings-row-title{ font-size:13.5px; font-weight:600; color:var(--ci-ink); }
.ci-settings-row-sub{ font-size:11.5px; color:var(--ci-muted); margin-top:3px; line-height:1.4; }
.ci-pixel-id-row input{
  flex:1; font-size:12.5px; padding:8px 10px;
  border:1px solid var(--ci-border); border-radius:8px;
  background:var(--ci-bg); color:var(--ci-ink);
}
.ci-utm-row{
  padding:14px 16px;
  border:1px solid var(--ci-border);
  border-radius:12px;
  background:var(--ci-card-bg);
  margin-bottom:10px;
}
.ci-utm-row-label{ font-size:13px; font-weight:700; color:var(--ci-ink); margin-bottom:10px; }
.ci-utm-row-fields{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }
.ci-utm-row-fields input{
  font-size:12.5px; padding:8px 10px;
  border:1px solid var(--ci-border); border-radius:8px;
  background:var(--ci-bg); color:var(--ci-ink);
  grid-column:span 1;
}
.ci-utm-row-fields input:last-child{ grid-column:1 / -1; }

/* ---------- Modal (Add to Queue / Create Temp QR) ---------- */
.ci-modal-overlay{
  position:fixed; inset:0; background:rgba(36,28,27,0.4);
  display:flex; align-items:center; justify-content:center;
  z-index:1000; padding:20px;
}
.ci-modal{
  background:var(--ci-card-bg); border-radius:18px; padding:24px;
  width:100%; max-width:420px;
  max-height:88vh; overflow-y:auto;
}
.ci-modal h3{ font-size:17px; font-weight:700; margin-bottom:4px; }
.ci-modal .ci-modal-sub{ font-size:13px; color:var(--ci-muted); margin-bottom:18px; }
.ci-modal-header{ display:flex; align-items:flex-start; gap:14px; margin-bottom:16px; }
.ci-modal-header-icon{
  width:52px; height:52px; border-radius:14px; flex-shrink:0;
  background:var(--ci-rose-soft); color:var(--ci-rose);
  display:flex; align-items:center; justify-content:center;
}
.ci-modal-header-text{ flex:1; min-width:0; padding-top:2px; }
.ci-modal-header-text h3{ margin-bottom:4px; }
.ci-modal-header-text .ci-modal-sub{ margin-bottom:0; }
.ci-modal-close{
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  border:1.5px solid var(--ci-border); background:var(--ci-card-bg); color:var(--ci-ink);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .12s ease;
}
.ci-modal-close:hover{ background:var(--ci-rose-soft); }
.ci-modal-divider{ height:1px; background:var(--ci-border); margin:0 -24px 18px; }
.ci-modal-field{ margin-bottom:14px; }
.ci-modal-field label{ display:block; font-size:12.5px; font-weight:700; color:var(--ci-ink); margin-bottom:6px; }
.ci-modal-hint{ font-size:11.5px; color:var(--ci-muted); margin-top:5px; }
.ci-modal-error{ font-size:11.5px; color:var(--ci-red); margin-top:5px; font-weight:600; }
/* Text-like fields only: checkboxes/radios (service ticks, QR cards) keep their own size. */
.ci-modal-field input:not([type="checkbox"]):not([type="radio"]), .ci-modal-field select{
  width:100%; padding:10px 12px;
  border:1.5px solid var(--ci-border); border-radius:9px;
  font-size:13.5px;
  /* Theme-aware: without these the browser default (white) shows in dark mode. */
  background:var(--ci-card-bg); color:var(--ci-ink);
}
.ci-modal-field input::placeholder{ color:var(--ci-muted); opacity:.85; }
.ci-modal-actions{ display:flex; gap:8px; margin-top:18px; }
.ci-modal-actions .ci-btn{ flex:1; justify-content:center; }

/* Field icon boxes (Customer name / Staff / Services / Amount / QR) —
   turns a plain field into an icon+content row, matching the modal header. */
.ci-modal-field-iconed{ display:flex; gap:12px; align-items:flex-start; }
.ci-modal-field-icon{
  width:38px; height:38px; border-radius:11px; flex-shrink:0; margin-top:1px;
  background:var(--ci-rose-soft); color:var(--ci-rose);
  display:flex; align-items:center; justify-content:center;
}
.ci-modal-field-body{ flex:1; min-width:0; }

.ci-service-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.ci-service-head label{ margin-bottom:0; }
.ci-add-custom-service{
  background:none; border:none; padding:0; font-family:inherit;
  color:var(--ci-rose); font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap;
}
.ci-add-custom-service:hover{ text-decoration:underline; }
.ci-custom-service-row{ display:flex; gap:6px; margin-top:8px; }
.ci-custom-service-row input{
  flex:1; min-width:0; padding:8px 10px;
  border:1.5px solid var(--ci-border); border-radius:8px; font-size:12.5px;
}

/* Touch-friendly service picker (replaces native <select multiple>) */
.ci-service-picker{
  display:flex; flex-direction:column; gap:6px;
  max-height:200px; overflow-y:auto;
  border:1.5px solid var(--ci-border); border-radius:9px;
  padding:6px;
}
.ci-service-chip{
  display:flex; align-items:center; gap:10px;
  padding:10px 8px;
  border-radius:7px;
  font-size:13.5px; font-weight:700;
  cursor:pointer;
  transition:background .12s ease;
}
.ci-service-chip:hover{ background:var(--ci-rose-soft); }
.ci-service-chip input[type="checkbox"]{
  width:18px; height:18px; flex-shrink:0; accent-color:var(--ci-rose); cursor:pointer;
}

/* Optional staff assignment in Add to Queue */
.ci-staff-empty{padding:10px 12px;border:1px dashed var(--ci-border);border-radius:9px;background:var(--ci-rose-soft);}

/* Goal selector chips (Add to Queue modal) */
.ci-goal-row{ display:flex; gap:8px; }
.ci-goal-chip{
  flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 10px; border-radius:12px;
  border:1.5px solid var(--ci-border); background:var(--ci-card-bg);
  font-size:12.6px; font-weight:600; color:var(--ci-ink);
  cursor:pointer; transition:all .12s ease;
}
.ci-goal-chip .ci-goal-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%; flex-shrink:0;
  color:var(--ci-ink); transition:all .12s ease;
}
.ci-goal-chip.active{ border-color:var(--ci-rose); background:var(--ci-rose-soft); color:var(--ci-rose); }
.ci-goal-chip.active .ci-goal-icon{ background:var(--ci-rose); color:#fff; }

/* Amount field — small recalc (calculator) button docked inside the input */
.ci-amount-input-wrap{ position:relative; }
.ci-amount-input-wrap input{ padding-right:38px; }
.ci-amount-calc-btn{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border:none; background:none; padding:0;
  color:var(--ci-muted); display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.ci-amount-calc-btn:hover{ color:var(--ci-rose); }

/* QR picker inside Add to Queue modal */
.ci-qr-picker-single{ font-size:12.5px; color:var(--ci-muted); padding:8px 10px; background:var(--ci-rose-soft); border-radius:8px; }
.ci-qr-picker-empty{ text-align:center; }
.ci-qr-picker-cards{ display:flex; gap:8px; flex-wrap:wrap; }
.ci-qr-pick-card{
  /* Radio used to be position:absolute over the label text with no
     reserved space for it, so long labels ("Temporary QR") overlapped
     the radio dot and the "Limited scans" sub-text at once on narrow
     screens. Laid out as a normal flex column instead — icon/radio take
     their own row, text wraps below, nothing can overlap regardless
     of label length or viewport width. */
  flex:1 1 150px; min-width:150px;
  display:flex; flex-direction:column; gap:8px;
  padding:12px; border:1.5px solid var(--ci-border); border-radius:12px;
  cursor:pointer; transition:all .12s ease;
}
.ci-qr-pick-card.selected{ border-color:var(--ci-rose); background:var(--ci-rose-soft); }
.ci-qr-pick-card-top{ display:flex; align-items:center; justify-content:space-between; }
.ci-qr-pick-icon{
  width:34px; height:34px; border-radius:9px; flex-shrink:0;
  background:var(--ci-rose-soft); color:var(--ci-rose);
  display:flex; align-items:center; justify-content:center;
}
.ci-qr-pick-card input[type="radio"]{
  /* 44px touch target (UX guideline: Touch Target Size) via padding
     around a visually smaller dot, instead of a bare 13px hit area. */
  width:20px; height:20px; margin:2px 0 0; flex-shrink:0; accent-color:var(--ci-rose); cursor:pointer;
}
.ci-qr-pick-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ci-qr-pick-label{ font-size:13px; font-weight:700; color:var(--ci-ink); word-break:break-word; }
.ci-qr-pick-sub{ font-size:11px; color:var(--ci-muted); }

/* Goal + confirmed badges */
.ci-badge-goal{ background:#EFEAF4; color:#6B4FA0; }
.ci-badge-confirmed{ background:var(--ci-sage-soft); color:var(--ci-sage); }
.ci-edit-link{ font-size:12.5px; font-weight:600; color:var(--ci-rose); cursor:pointer; margin:-6px 0 14px; }

@media (max-width: 640px){
  .ci-qr-top{ flex-direction:column; }
  .ci-card{ flex-wrap:wrap; }
  .ci-card-actions{ width:100%; justify-content:flex-end; }
}

/* "Scan now" modal after Add to Queue */
.ci-scan-now{ text-align:center; }
.ci-scan-now-qr {
  margin:18px auto;
  border:1.5px solid var(--ci-border);
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  background:#fff;
}
.ci-scan-now-qr img{ width:100%; height:100%; object-fit:contain; }

/* Branch filter (multi-branch salons only — hidden otherwise) */
.ci-branch-filter{ margin-bottom:12px; }
.ci-branch-filter select{ border:1.5px solid var(--ci-border); border-radius:10px; padding:8px 12px; background:#fff; font-weight:600; font-size:13px; }

/* Analytics tab */
#ciAnalyticsChartRow{ margin-top:16px; }
.ci-dash-row{ display:flex; justify-content:space-between; padding:6px 0; font-size:13px; border-bottom:1px dashed var(--ci-border); }
.ci-dash-row-empty{ padding:10px 0; font-size:13px; color:var(--ci-muted); }

/* Staff notification-sound toggle */
.ci-sound-toggle{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  font-size:12.5px; font-weight:600; color:var(--ci-muted);
  padding:6px 10px; border:1.5px solid var(--ci-border); border-radius:999px;
  margin-left:8px;
}
.ci-sound-toggle.on{ color:var(--ci-rose); border-color:var(--ci-rose); }

/* ---------- Live day plan ---------- */
.ci-day-plan-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; padding:14px 16px; border:1px solid var(--ci-border); border-radius:14px; background:linear-gradient(135deg,var(--ci-rose-soft),var(--ci-card-bg)); }
.ci-day-plan-copy{ margin:5px 0 0; color:var(--ci-muted); font-size:11.5px; line-height:1.45; max-width:560px; }
.ci-day-plan-live{ display:inline-flex; align-items:center; gap:6px; color:var(--ci-sage); font-size:11px; font-weight:800; white-space:nowrap; }
.ci-live-dot{ width:7px; height:7px; border-radius:50%; background:var(--ci-sage); box-shadow:0 0 0 3px var(--ci-sage-soft); }
.ci-day-lane{ margin-bottom:14px; border:1px solid var(--ci-border); border-radius:14px; background:var(--ci-card-bg); overflow:hidden; }
.ci-day-lane-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; background:var(--ci-rose-soft); border-bottom:1px solid var(--ci-border); }
.ci-day-lane-head h4{ margin:0; color:var(--ci-ink); font-size:13px; }
.ci-day-lane-head span{ display:block; margin-top:3px; color:var(--ci-muted); font-size:10.5px; }
.ci-day-lane-count{ margin:0!important; padding:5px 8px; border:1px solid var(--ci-border); border-radius:999px; background:var(--ci-card-bg); color:var(--ci-rose)!important; font-size:10px!important; font-weight:800; white-space:nowrap; }
.ci-day-lane-items{ display:grid; gap:8px; padding:10px; }
.ci-day-visit{ display:grid; grid-template-columns:70px minmax(0,1fr) auto; align-items:center; gap:12px; padding:11px 12px; border:1px solid var(--ci-border); border-radius:11px; background:var(--ci-card-bg); cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.ci-day-visit:hover{ border-color:var(--ci-rose); box-shadow:0 5px 14px rgba(124,58,237,.10); transform:translateY(-1px); }
.ci-day-visit time{ color:var(--ci-rose); font-size:12px; font-weight:800; }
.ci-day-visit-main{ min-width:0; }
.ci-day-visit-main b{ display:block; color:var(--ci-ink); font-size:12.5px; }
.ci-day-visit-main span{ display:block; margin-top:3px; color:var(--ci-muted); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ci-day-visit-meta{ display:flex; align-items:center; justify-content:flex-end; gap:8px; color:var(--ci-ink); font-size:11px; font-weight:700; white-space:nowrap; }

/* ---------- Live floor snapshot ---------- */
.ci-floor-snapshot{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:16px; }
.ci-floor-card{ display:flex; align-items:center; gap:10px; min-height:66px; padding:11px 12px; border:1px solid var(--ci-border); border-radius:12px; background:var(--ci-card-bg); }
.ci-floor-value{ min-width:30px; font-size:22px; line-height:1; font-weight:800; color:var(--ci-ink); }
.ci-floor-label{ font-size:12px; line-height:1.2; font-weight:800; color:var(--ci-ink); }
.ci-floor-hint{ margin-top:3px; color:var(--ci-muted); font-size:10.5px; line-height:1.2; }
.ci-floor-awaiting{ border-color:#ead4a0; background:#fffaf0; }
.ci-floor-live{ border-color:#d5c6ed; background:#faf7ff; }
.ci-floor-completed{ border-color:#c4e2d0; background:#f6fcf8; }
.ci-floor-attention{ border-color:#efc7c7; background:#fff7f7; }
.ci-floor-error{ margin-bottom:16px; padding:12px 14px; border:1px dashed var(--ci-border); border-radius:12px; color:var(--ci-muted); font-size:12px; }

/* ---------- Live visit stage controls ---------- */
.ci-stage-panel{
  margin-top:18px; padding:14px; border:1px solid var(--ci-border);
  border-radius:14px; background:linear-gradient(135deg,var(--ci-rose-soft),#fff);
}
.ci-stage-panel-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.ci-stage-title{ color:var(--ci-ink); font-size:13px; font-weight:800; }
.ci-stage-copy{ color:var(--ci-muted); font-size:11.5px; line-height:1.45; margin-top:4px; max-width:240px; }
.ci-stage-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:13px; }
.ci-stage-actions .ci-btn{ flex:1 1 130px; justify-content:center; min-height:40px; }
@media (max-width:900px){
  .ci-floor-snapshot{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
  .ci-floor-snapshot{ grid-template-columns:1fr; }
  .ci-day-plan-head{ flex-direction:column; }
  .ci-day-visit{ grid-template-columns:58px minmax(0,1fr); }
  .ci-day-visit-meta{ grid-column:2; justify-content:flex-start; flex-wrap:wrap; }
  .ci-stage-panel-head{ flex-direction:column; }
  .ci-stage-copy{ max-width:none; }
  .ci-stage-actions .ci-btn{ flex-basis:100%; }
}

/* Handover Center: staff-to-customer lifecycle cues */
.ci-handoff-card .ci-card-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:7px}
.ci-handoff-next{font-size:11px;color:var(--text-muted,#76627a);line-height:1.35}
.ci-handoff-meta{margin-top:5px;color:var(--ci-muted);font-size:10.5px;line-height:1.4;overflow-wrap:anywhere}
.ci-handoff-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ci-handoff-actions .ci-btn{white-space:nowrap}
.ci-badge-expiring{font-weight:800}
@media (max-width:720px){
  .ci-handoff-card{align-items:flex-start}
  .ci-handoff-actions{grid-column:1 / -1;width:100%;padding-top:4px}
  .ci-handoff-actions .ci-btn{flex:1;min-width:110px}
  .ci-handoff-next{flex-basis:100%}
}

/* Handover Center header and lifecycle legend */
.ci-handoff-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:0 0 16px;padding:0 0 14px;border-bottom:1px solid var(--ci-border)}
.ci-handoff-intro .ci-section-title{margin:0 0 4px}
.ci-handoff-help{font-size:12px;line-height:1.45;color:var(--ci-muted);max-width:520px}
.ci-handoff-legend{font-size:11px;font-weight:700;color:var(--ci-rose);white-space:nowrap}
@media (max-width:720px){.ci-handoff-intro{align-items:flex-start;flex-direction:column;gap:8px}.ci-handoff-legend{white-space:normal}}


/* ---------- Staff mobile-first operations ---------- */
.ci-mobile-quick-actions{display:none}
@media (max-width:720px){
  #view-checkin{padding-top:2px;}
  .ci-header{
    align-items:flex-start; gap:12px; margin-bottom:12px;
    padding:2px 0 4px;
  }
  .ci-header h2{font-size:19px; letter-spacing:-.02em;}
  .ci-header p{font-size:11.5px; line-height:1.35; max-width:240px;}
  .ci-header-actions{width:100%; gap:8px;}
  .ci-header-actions .ci-btn-primary{flex:1; justify-content:center; min-height:44px; font-size:13px;}
  .ci-sound-toggle{min-width:44px; min-height:44px; justify-content:center; margin-left:0; padding:0;}
  .ci-branch-filter{margin:0 0 10px;}
  .ci-branch-filter select{width:100%; min-height:44px; justify-content:space-between;}
  .ci-mobile-quick-actions{
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px;
    margin:0 0 12px;
  }
  .ci-mobile-quick-action{
    min-height:48px; border:1px solid var(--ci-border); border-radius:12px;
    background:var(--ci-card-bg); color:var(--ci-ink); display:flex; align-items:center;
    justify-content:center; gap:5px; padding:8px 7px; font:600 11px/1.1 inherit;
    position:relative; cursor:pointer;
  }
  .ci-mobile-quick-action:active{transform:scale(.98);}
  .ci-mobile-quick-primary{background:var(--ci-rose); border-color:var(--ci-rose); color:#fff;}
  .ci-mobile-quick-icon{font-size:16px; font-weight:800; line-height:1;}
  .ci-mobile-quick-count{
    min-width:18px; height:18px; padding:0 5px; border-radius:999px;
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--ci-rose-soft); color:var(--ci-rose); font-size:10px; font-weight:800;
  }
  .ci-mobile-quick-primary .ci-mobile-quick-count{background:rgba(255,255,255,.2); color:#fff;}
  #ciTabs.mkt-tabs{
    gap:2px; margin:0 -12px 14px; padding:0 12px;
    border-bottom:1px solid var(--ci-border); scrollbar-width:none;
  }
  #ciTabs.mkt-tabs::-webkit-scrollbar{display:none}
  #ciTabs .mkt-tab{min-height:46px; padding:11px 13px; font-size:12.5px; display:inline-flex; align-items:center;}
  #ciTabs .mkt-tab .ci-tab-count{height:17px; min-width:17px; font-size:10px; margin-left:4px;}
  .ci-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:18px;}
  .ci-kpi-card{padding:12px; border-radius:12px; min-height:74px;}
  .ci-kpi-label{font-size:10.5px; line-height:1.25; margin-bottom:5px;}
  .ci-kpi-value{font-size:20px;}
  .ci-kpi-sub{font-size:10.5px;}
  .ci-section-title{font-size:13px; margin:18px 0 9px;}
  .ci-card-list{gap:8px;}
  .ci-card{
    display:grid; grid-template-columns:36px minmax(0,1fr); align-items:start;
    gap:10px; padding:13px 12px; border-radius:13px;
  }
  .ci-card-avatar{width:36px; height:36px; border-radius:10px; font-size:13px;}
  .ci-card-title{font-size:13.5px; line-height:1.25;}
  .ci-card-sub{font-size:11.5px; line-height:1.35; margin-top:3px;}
  .ci-card-meta{gap:5px 8px; margin-top:7px; font-size:11.5px;}
  .ci-card-actions{grid-column:1 / -1; width:100%; gap:7px; padding-top:2px;}
  .ci-card-actions .ci-btn{flex:1; min-height:42px; justify-content:center; padding:8px 9px; font-size:11.5px;}
  .ci-handoff-actions{display:grid; grid-template-columns:1.25fr 1fr 1fr;}
  .ci-handoff-actions .ci-btn{min-width:0;}
  .ci-handoff-next{font-size:11px; line-height:1.4;}
  .ci-handoff-meta{font-size:10px; line-height:1.35;}
  .ci-search-wrap{margin-bottom:9px;}
  .ci-search-input{min-height:46px; font-size:13px; border-radius:12px;}
  .ci-filters{display:flex; gap:6px; overflow-x:auto; margin:0 -2px 12px; padding:1px 2px 3px; scrollbar-width:none;}
  .ci-filters::-webkit-scrollbar{display:none;}
  .ci-filter-chip{min-height:44px; display:inline-flex; align-items:center; white-space:nowrap; padding:8px 12px; font-size:11.5px;}
  .ci-goal-chip{min-height:44px; display:inline-flex; align-items:center; justify-content:center;}
  /* Was hitting checkboxes too: every service tick was 46px tall, so only ~2 services fit on screen. */
  .ci-modal-field input:not([type="checkbox"]):not([type="radio"]), .ci-modal-field select{min-height:46px;}
  .ci-modal-actions{z-index:2; border-top:1px solid var(--ci-border); padding-bottom:calc(4px + env(safe-area-inset-bottom, 0px));}
  .ci-modal-actions .ci-btn{min-height:46px;}
  .ci-service-chip{min-height:44px;}
  .ci-qr-pick-card{min-height:64px;}

  .ci-floor-snapshot{grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;}
  .ci-floor-card{min-height:68px; padding:10px; gap:8px; border-radius:11px;}
  .ci-floor-value{min-width:25px; font-size:20px;}
  .ci-floor-label{font-size:10.5px;}
  .ci-floor-hint{font-size:9.5px;}
  .ci-chart-row{grid-template-columns:1fr; gap:10px;}
  .ci-chart-card{padding:12px; border-radius:12px;}
  .ci-qr-card{padding:14px; border-radius:13px;}
  .ci-qr-top{gap:12px;}
  .ci-qr-visual{width:96px; height:96px;}
  .ci-day-plan-head{padding:12px; margin-bottom:10px; border-radius:12px;}
  .ci-day-plan-head h2{font-size:17px;}
  .ci-day-plan-copy{font-size:11px;}
  .ci-day-lane{border-radius:12px; margin-bottom:10px;}
  .ci-day-visit{grid-template-columns:52px minmax(0,1fr); gap:9px; padding:10px;}
  .ci-day-visit-meta{grid-column:2; justify-content:flex-start; flex-wrap:wrap;}
  .ci-stage-panel{padding:12px; border-radius:12px;}
  .ci-stage-actions .ci-btn{min-height:44px; flex-basis:100%;}
  .ci-modal{max-width:none; max-height:92vh; border-radius:20px 20px 0 0; padding:18px 14px 20px;}
  .ci-modal-divider{margin:0 -14px 18px;}
  .ci-modal-actions{position:sticky; bottom:0; background:var(--ci-card-bg); padding-top:10px;}
}
@media (max-width:390px){
  .ci-header h2{font-size:18px;}
  .ci-header p{max-width:210px;}
  .ci-mobile-quick-action{font-size:10.5px; padding-inline:5px;}
  #ciTabs .mkt-tab{padding-inline:11px;}
  .ci-handoff-actions{grid-template-columns:1fr 1fr;}
  .ci-handoff-actions .ci-resend-handoff{grid-column:1 / -1;}
}

/* ---------- Manage Portal settings ---------- */
.ci-portal-hero{
  display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
  padding:20px; margin-bottom:12px; border:1px solid var(--ci-border); border-radius:16px;
  background:linear-gradient(135deg,var(--ci-card-bg),var(--ci-rose-soft));
}
.ci-portal-hero-copy{min-width:0;}
.ci-settings-eyebrow{font-size:10px; font-weight:800; letter-spacing:.12em; color:var(--ci-muted); margin-bottom:6px;}
.ci-portal-hero h3{font-size:21px; line-height:1.15; margin:0 0 5px; color:var(--ci-ink);}
.ci-portal-hero p{font-size:12px; line-height:1.45; color:var(--ci-muted); margin:0; max-width:520px;}
.ci-portal-hero-actions{display:flex; gap:8px; flex-shrink:0;}
.ci-portal-status{display:flex; align-items:center; gap:10px; padding:11px 14px; margin-bottom:18px; border:1px solid var(--ci-border); border-radius:12px; background:var(--ci-card-bg);}
.ci-portal-status.is-live{border-color:rgba(22,163,74,.22); background:var(--ci-sage-soft);}
.ci-portal-status.is-limited{background:var(--ci-card-bg);}
.ci-portal-status-dot{width:8px; height:8px; border-radius:50%; flex:0 0 auto; background:var(--ci-muted);}
.ci-portal-status.is-live .ci-portal-status-dot{background:var(--ci-sage); box-shadow:0 0 0 4px rgba(22,163,74,.12);}
.ci-portal-status b,.ci-portal-status span{display:block;}
.ci-portal-status b{font-size:12.5px; color:var(--ci-ink);}
.ci-portal-status div span{font-size:11px; color:var(--ci-muted); margin-top:2px;}
.ci-portal-setting-row{min-height:70px;}
.ci-portal-payment-row{min-height:70px; margin-bottom:0; border-bottom-left-radius:0; border-bottom-right-radius:0;}
.ci-portal-amount-row{align-items:flex-end; margin-top:-1px; border-top:1px dashed var(--ci-border); border-top-left-radius:0; border-top-right-radius:0; background:color-mix(in srgb,var(--ci-card-bg) 94%,var(--ci-rose-soft));}
.ci-portal-inline-field{display:flex; flex-direction:column; gap:5px; flex:1; min-width:0;}
.ci-portal-inline-field .form-label{margin:0; font-size:12px;}
.ci-portal-input{width:100%; min-height:38px; padding:8px 10px; border:1px solid var(--ci-border); border-radius:8px; background:var(--ci-card-bg); color:var(--ci-ink); font-size:13px;}
.ci-portal-input:focus{outline:none; border-color:var(--ci-rose); box-shadow:0 0 0 3px color-mix(in srgb,var(--ci-rose) 15%,transparent);}
.ci-portal-checklist{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.ci-portal-checklist>div{display:flex; align-items:flex-start; gap:9px; padding:12px; border:1px solid var(--ci-border); border-radius:12px; background:var(--ci-card-bg);}
.ci-portal-check{display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; flex:0 0 auto; border-radius:50%; background:var(--ci-border); color:var(--ci-muted); font-size:12px; font-weight:800;}
.ci-portal-check.on{background:var(--ci-sage-soft); color:var(--ci-sage);}
.ci-portal-checklist b,.ci-portal-checklist small{display:block;}
.ci-portal-checklist b{font-size:11.5px; color:var(--ci-ink); line-height:1.25;}
.ci-portal-checklist small{font-size:10.5px; color:var(--ci-muted); line-height:1.4; margin-top:3px;}
.ci-portal-loading{display:flex; align-items:center; justify-content:center; gap:9px; min-height:140px; color:var(--ci-muted); font-size:12px;}
.ci-loading-dot{width:8px; height:8px; border-radius:50%; background:var(--ci-rose); box-shadow:0 0 0 5px var(--ci-rose-soft); animation:ciPortalPulse 1.1s ease-in-out infinite;}
@keyframes ciPortalPulse{50%{opacity:.45; transform:scale(.82)}}
@media (max-width:640px){
  .ci-portal-hero{flex-direction:column; gap:14px; padding:16px;}
  .ci-portal-hero-actions{width:100%;}
  .ci-portal-hero-actions .ci-btn{flex:1; justify-content:center; min-height:42px;}
  .ci-settings-row{align-items:flex-start; padding:13px 14px;}
  .ci-portal-setting-row{min-height:76px;}
  .ci-portal-amount-row{align-items:stretch; flex-direction:column; gap:10px;}
  .ci-portal-amount-row .ci-btn{width:100%; justify-content:center; min-height:42px;}
  .ci-portal-checklist{grid-template-columns:1fr; gap:8px;}
}
@media (prefers-reduced-motion:reduce){.ci-loading-dot{animation:none;}}
/* END Manage Portal settings */

/* Customer picker (Add to Queue) — search saved customers or type a walk-in name */
.ci-cust-picker{ position:relative; }
.ci-cust-results{
  position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:20;
  background:var(--ci-card-bg,#fff); border:1.5px solid var(--ci-border); border-radius:10px;
  box-shadow:0 10px 28px rgba(0,0,0,.12); max-height:240px; overflow-y:auto; padding:4px;
}
.ci-cust-option{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:9px 8px; border:none; background:none; border-radius:8px;
  font-family:inherit; cursor:pointer; min-height:44px;
}
.ci-cust-option:hover, .ci-cust-option:focus-visible{ background:var(--ci-rose-soft); outline:none; }
.ci-cust-option-avatar, .ci-cust-selected-avatar{
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  background:var(--ci-rose-soft); color:var(--ci-rose);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px;
}
.ci-cust-option-text, .ci-cust-selected-text{ display:flex; flex-direction:column; min-width:0; flex:1; }
.ci-cust-option-text strong, .ci-cust-selected-text strong{
  font-size:13.5px; color:var(--ci-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ci-cust-option-text span, .ci-cust-selected-text span{ font-size:11.5px; color:var(--ci-muted); }
.ci-cust-note{ padding:10px 8px; font-size:12px; color:var(--ci-muted); }
.ci-cust-selected{
  display:flex; align-items:center; gap:10px; padding:8px 10px;
  border:1.5px solid var(--ci-rose); border-radius:10px; background:var(--ci-rose-soft);
}
.ci-cust-clear{
  width:40px; height:40px; flex-shrink:0; border:none; background:none; border-radius:8px;
  color:var(--ci-muted); cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.ci-cust-clear:hover{ color:var(--ci-ink); background:rgba(0,0,0,.06); }

/* Pinned to the bottom of the list so the walk-in escape hatch is always visible,
   however many saved customers match. */
.ci-cust-walkin{
  position:sticky; bottom:-4px; margin-top:4px; padding-top:11px;
  background:var(--ci-card-bg); border-top:1px solid var(--ci-border); border-radius:0 0 8px 8px;
}
.ci-cust-walkin:hover, .ci-cust-walkin:focus-visible{ background:var(--ci-rose-soft); }
.ci-cust-walkin-icon{ background:transparent; border:1.5px dashed var(--ci-border); color:var(--ci-muted); font-size:16px; }

/* Avatar inside the selected chip sits on rose-soft, so use the card colour for contrast */
.ci-cust-selected-avatar{ background:var(--ci-card-bg); border:1.5px solid var(--ci-rose); }

/* ---- Add to Queue: form-level error, success screen ---- */
.ci-form-error{
  margin:12px 0 0; padding:10px 12px; border-radius:10px;
  background:var(--ci-red-soft); color:var(--ci-red);
  font-size:13px; font-weight:600; line-height:1.4;
}
.ci-success-badge{
  width:44px; height:44px; margin:0 auto 8px; border-radius:50%;
  background:var(--ci-sage-soft); color:var(--ci-sage);
  display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800;
}
.ci-scan-who{ display:flex; flex-direction:column; gap:2px; margin:6px 0 8px; }
.ci-scan-who strong{ font-size:15px; color:var(--ci-ink); }
.ci-scan-who span{ font-size:12.5px; color:var(--ci-muted); }
.ci-scan-expiry{ font-size:12px; color:var(--ci-muted); max-width:300px; margin:0 auto; }
.ci-scan-now-qr{ width:auto; height:auto; max-width:264px; }
.ci-scan-now-qr svg{ display:block; width:100%; height:auto; max-width:240px; }
.ci-scan-now-qr-fallback{ font-size:13px; color:var(--ci-muted); padding:12px; }
/* Toasts must sit above open modals, or "Link copied" etc. are hidden behind the backdrop. */
#toast.toast{ z-index:1100; }

/* Success screen buttons: Done is full width so labels never wrap. */
.ci-scan-now .ci-modal-actions{ flex-wrap:wrap; }
.ci-scan-now .ci-modal-actions .ci-btn{ white-space:nowrap; flex:1 1 40%; }
.ci-scan-now .ci-modal-actions #ciScanNowClose{ flex-basis:100%; order:3; }

/* `.ci-modal-field label {display:block; margin-bottom:6px}` was also flattening the service rows and
   QR cards (they are <label>s), leaving each row ~84px tall with the tick floating above the text. */
.ci-modal-field label.ci-service-chip{ display:flex; margin-bottom:0; font-size:13.5px; }
.ci-modal-field label.ci-qr-pick-card{ display:flex; margin-bottom:0; }
.ci-amount-calc-btn{ -webkit-tap-highlight-color:transparent; }
@media (max-width:640px){
  /* 26px was a hard target to hit with a thumb. */
  .ci-amount-calc-btn{ width:40px; height:40px; right:3px; border-radius:8px; }
}
.ci-service-chip, .ci-goal-chip, .ci-qr-pick-card, .ci-cust-option{ -webkit-tap-highlight-color:transparent; }

/* Locked total (front-desk staff while services are ticked): look read-only, not broken. */
.ci-modal-field input:not([type="checkbox"]):not([type="radio"])[readonly]{ background:var(--ci-rose-soft); color:var(--ci-ink); border-style:dashed; cursor:not-allowed; }

/* ---- Live updates ---- */
.ci-live-status{
  display:inline-flex; align-items:center; align-self:center; padding:6px 10px; border-radius:999px;
  font-size:12px; font-weight:700; white-space:nowrap;
  background:var(--ci-rose-soft); color:var(--ci-muted);
}
.ci-live-status.is-live{ background:var(--ci-sage-soft); color:var(--ci-sage); }
.ci-live-pill{
  display:flex; align-items:center; justify-content:center; gap:8px; margin:10px auto 6px; padding:8px 12px;
  border-radius:999px; font-size:13px; font-weight:600; max-width:330px; line-height:1.3;
  background:var(--ci-rose-soft); color:var(--ci-ink);
}
.ci-live-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; background:var(--ci-rose); animation:ciLivePulse 1.4s ease-in-out infinite; }
.ci-live-pill[data-state="opened"]{ background:var(--ci-amber-soft, var(--ci-rose-soft)); }
.ci-live-pill[data-state="opened"] .ci-live-dot, .ci-live-pill[data-state="busy"] .ci-live-dot{ background:var(--ci-amber, var(--ci-rose)); }
.ci-live-pill[data-state="done"]{ background:var(--ci-sage-soft); color:var(--ci-sage); }
.ci-live-pill[data-state="done"] .ci-live-dot{ background:var(--ci-sage); animation:none; }
.ci-live-pill[data-state="dead"]{ background:var(--ci-red-soft); color:var(--ci-red); }
.ci-live-pill[data-state="dead"] .ci-live-dot{ background:var(--ci-red); animation:none; }
@keyframes ciLivePulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(.75); } }
@media (prefers-reduced-motion: reduce){ .ci-live-dot{ animation:none; } }
.ci-scan-now-qr.is-dead{ opacity:.25; filter:grayscale(1); }
.ci-scan-now-qr.is-done{ border-color:var(--ci-sage); }
.ci-scan-done{
  width:100%; min-height:200px; display:flex; align-items:center; justify-content:center;
  font-size:96px; font-weight:800; color:var(--ci-sage);
}

/* ---- Settings: Queue timing & limits ---- */
.ci-qs{ display:flex; flex-direction:column; gap:14px; margin-bottom:22px; }
.ci-qs-summary{ padding:12px 14px; border-radius:12px; background:var(--ci-rose-soft); color:var(--ci-ink); font-size:13.5px; line-height:1.5; }
.ci-qs-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; }
.ci-qs-field label{ display:block; font-size:13px; font-weight:700; color:var(--ci-ink); margin-bottom:6px; }
.ci-qs-input{ display:flex; align-items:center; gap:8px; }
.ci-qs-input input{
  width:100%; max-width:140px; padding:10px 12px; border:1.5px solid var(--ci-border); border-radius:9px;
  font-size:14px; background:var(--ci-card-bg); color:var(--ci-ink);
}
.ci-qs-input input:disabled{ opacity:.65; cursor:not-allowed; }
.ci-qs-input span{ font-size:12.5px; color:var(--ci-muted); }
.ci-qs-actions{ display:flex; gap:10px; flex-wrap:wrap; }
@media (max-width:640px){ .ci-qs-input input{ min-height:46px; max-width:none; } .ci-qs-actions .ci-btn{ flex:1 1 40%; } }

/* QR screen: compact on phones so the link box is not pushed under the button bar; tiny when finished. */
.ci-scan-now-qr.is-done{ min-height:0; padding:4px; }
.ci-scan-now-qr.is-done .ci-scan-done{ min-height:96px; font-size:64px; }
@media (max-width:640px){
  .ci-success-badge{ width:36px; height:36px; font-size:18px; margin-bottom:4px; }
  .ci-scan-now h3{ margin:4px 0 2px; }
  .ci-scan-now-qr{ padding:10px; }
  .ci-scan-now-qr svg{ max-width:210px; }
  .ci-qs-input input{ max-width:160px; }
}

/* Submission whose typed phone differs from the saved customer's */
.ci-phone-warn{
  margin-top:6px; padding:6px 10px; border-radius:8px; font-size:12px; font-weight:600; line-height:1.35;
  background:var(--ci-amber-soft); color:var(--ci-amber);
}

/* Empty hint lines (instruction text removed) must not leave a gap. */
.ci-modal-hint:empty{ display:none; }

/* ---------- Add to Queue modal: roomier, less crowded ---------- */
.ci-modal{ max-width:540px; padding:28px; }
.ci-modal-divider{ margin:0 -28px 22px; }
.ci-modal-field{ margin-bottom:20px; }
.ci-modal-field label{ margin-bottom:8px; }
.ci-modal-header{ margin-bottom:20px; }
.ci-modal-actions{ margin-top:24px; gap:10px; }

/* Services picker: much bigger, two columns on desktop */
.ci-service-picker{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;
  max-height:min(340px,42vh); padding:10px; border-radius:12px;
  background:var(--ci-card-bg);
}
.ci-service-picker > .ci-empty-sub{ grid-column:1 / -1; }
.ci-service-chip{
  padding:12px 12px; min-height:48px; border-radius:10px;
  border:1.5px solid var(--ci-border); line-height:1.3;
}
.ci-service-chip span{ min-width:0; overflow-wrap:anywhere; }
.ci-service-chip:has(input:checked){ border-color:var(--ci-rose); background:var(--ci-rose-soft); }
.ci-service-head{ margin-bottom:8px; }
.ci-custom-service-row{ margin-top:10px; }

@media (max-width:640px){
  .ci-modal{ padding:20px 16px 22px; }
  .ci-modal-divider{ margin:0 -16px 18px; }
  .ci-modal-field{ margin-bottom:18px; }
  /* Icon boxes eat ~50px of a 390px screen — drop them so fields get full width. */
  .ci-modal-field-icon{ display:none; }
  .ci-modal-field-iconed{ display:block; }
  .ci-service-picker{ grid-template-columns:1fr; max-height:46vh; padding:8px; }
  .ci-service-chip{ min-height:50px; }
  .ci-goal-row{ gap:6px; }
  .ci-goal-chip{ flex:1 1 0; min-width:0; padding:10px 4px; font-size:12px; text-align:center; }
  .ci-goal-chip .ci-goal-icon{ display:none; }
}

/* ---------- Check-in list rows: one consistent action-button size ---------- */
.ci-card-actions{ align-items:center; gap:8px; }
.ci-card-actions .ci-btn{ min-height:38px; height:38px; padding:0 14px; justify-content:center; white-space:nowrap; font-size:12.5px; }
.ci-card-actions .ci-icon-btn{ width:38px; min-width:38px; padding:0; flex:0 0 38px; }
.ci-card-actions .ci-icon-btn svg{ width:16px; height:16px; }
.ci-card-actions .ci-badge{ height:38px; display:inline-flex; align-items:center; padding:0 12px; }
@media (max-width:640px){
  .ci-card-actions{ justify-content:flex-end; }
  .ci-card-actions .ci-btn{ min-height:42px; height:42px; flex:1 1 auto; font-size:12.5px; }
  .ci-card-actions .ci-icon-btn{ width:42px; min-width:42px; flex:0 0 42px; padding:0; }
  .ci-card-actions .ci-badge{ height:42px; }
}