/* ============================================================================
   wfollow.css — Wholesale › Follow-up. Phone first: one column of cards, big
   buttons for the thumb, the day's summary at the top. Built on tokens.css
   and the shared pieces in ucx.css (sheet, fields, badges, toast).
   ============================================================================ */

.wf { display: grid; gap: 14px; min-width: 0; }
.wf :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; }
.wf-title { margin: 0; font-family: var(--font-display); font-size: 21px; line-height: 1.25; }
.wf-date { margin: 2px 0 0; color: var(--ink-soft); font-size: 14px; }
.wf-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.wf-head-actions .btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }

.wf-who { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 15px; }
.wf-who-label { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.wf-who-select { min-width: 200px; }
.wf-team {
  display: inline-block; padding: 1px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700; background: var(--surface-alt); color: var(--ink-soft);
}
.wf-team.is-marketing { background: #E4ECFB; color: #1D3F8A; }
.wf-team.is-telesale { background: #EFE6FA; color: #56308F; }
.wf-team.is-retail { background: var(--accent-soft); color: var(--accent-deep); }
.wf-team.is-vansale { background: var(--warning-soft); color: var(--warning); }

/* --- summary tiles ------------------------------------------------------- */
.wf-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wf-tile {
  display: grid; gap: 2px; padding: 12px; min-height: 76px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); color: var(--ink); text-decoration: none;
}
.wf-tile-n { font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 1.1; }
.wf-tile-label { font-size: 13px; color: var(--ink-soft); line-height: 1.35; }
.wf-tile.is-late { background: var(--danger-soft); border-color: transparent; }
.wf-tile.is-late .wf-tile-n { color: var(--danger); }
.wf-tile.is-today { background: var(--accent-soft); border-color: transparent; }
.wf-tile.is-today .wf-tile-n { color: var(--accent-deep); }
.wf-tile.is-done .wf-tile-n { color: var(--accent); }

.wf-log-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; width: 100%; font-weight: 700; }

/* --- sections and cards -------------------------------------------------- */
.wf-section { display: grid; gap: 8px; scroll-margin-top: 12px; }
.wf-section-title {
  display: flex; align-items: center; gap: 8px; margin: 6px 0 0;
  font-size: 15px; font-weight: 800; color: var(--ink);
}
.wf-section-title.is-late { color: var(--danger); }
summary.wf-section-title { cursor: pointer; min-height: 44px; list-style-position: inside; }
.wf-count {
  padding: 0 8px; border-radius: 999px; background: var(--surface-alt);
  color: var(--ink-soft); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.wf-empty { margin: 0; padding: 14px; border: 1px dashed var(--border); border-radius: var(--radius-md); color: var(--ink-soft); font-size: 14px; text-align: center; }

.wf-card {
  display: flex; align-items: stretch; gap: 8px;
  padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface);
}
.wf-card.is-overdue { border-left: 4px solid var(--danger); }
.wf-card-main {
  flex: 1; min-width: 0; display: grid; gap: 3px; padding: 0;
  border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.wf-card-name { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.wf-card-sub { font-size: 13px; color: var(--ink-soft); overflow-wrap: anywhere; }
.wf-card-actions { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 8px; flex: none; }
.wf-start { min-height: 44px; min-width: 76px; }
.wf-call {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-deep); flex: none;
}
.wf-call:hover { background: var(--accent); color: #fff; }

.wf-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.wf-chip, .wf-tag, .wf-res {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.7; white-space: nowrap;
  background: var(--surface-alt); color: var(--ink-soft);
}
.wf-chip.is-visit { background: #E4ECFB; color: #1D3F8A; }
.wf-chip.is-call { background: var(--accent-soft); color: var(--accent-deep); }
.wf-chip.is-message { background: #EFE6FA; color: #56308F; }
.wf-tag.is-late { background: var(--danger-soft); color: var(--danger); }
.wf-tag.is-due { background: var(--warning-soft); color: var(--warning); }
.wf-res.is-order { background: var(--success-soft); color: var(--accent-deep); }
.wf-res.is-potential { background: #E4ECFB; color: #1D3F8A; }
.wf-res.is-noorder { background: var(--surface-alt); color: var(--ink-soft); }
.wf-res.is-nocontact { background: var(--warning-soft); color: var(--warning); }
.wf-last { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-faint); }

.wf-done-box > summary::-webkit-details-marker { color: var(--ink-faint); }
.wf-done-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.wf-done {
  display: flex; align-items: center; gap: 10px; min-height: 52px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
}
.wf-done.is-unknown { border-style: dashed; }
.wf-done-icon {
  display: grid; place-items: center; width: 32px; height: 32px; flex: none;
  border-radius: 50%; background: var(--surface-alt); color: var(--ink-soft);
}
.wf-done-text { flex: 1; min-width: 0; display: grid; gap: 1px; font-size: 13px; color: var(--ink-soft); }
.wf-done-text strong { font-size: 14.5px; color: var(--ink); overflow-wrap: anywhere; }
.wf-mini-remark { font-size: 12.5px; color: var(--ink-faint); overflow-wrap: anywhere; }

/* --- log form ------------------------------------------------------------ */
.wf-log-planned { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-alt); }
.wf-log-planned .wf-call { margin-left: auto; }
.wf-options { display: grid; gap: 8px; }
.wf-options.is-act { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wf-options.is-res { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wf-options.is-next { display: flex; flex-wrap: wrap; }
.wf-option {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 48px; padding: 8px 12px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
}
.wf-options.is-next .wf-option { min-height: 44px; flex: 1 1 auto; }
.wf-option.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); box-shadow: inset 0 0 0 1px var(--accent); }
.wf-option.is-order.is-on { border-color: var(--success); background: var(--success-soft); }
.wf-option.is-nocontact.is-on, .wf-option.is-noorder.is-on { border-color: var(--warning); background: var(--warning-soft); color: var(--warning); box-shadow: inset 0 0 0 1px var(--warning); }
.wf-remark { resize: vertical; min-height: 80px; }
.wf-next-custom { margin-top: 6px; }
.wf-mini-history { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-alt); }
.wf-mini-history ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13px; }
.wf-mini-history li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wf-mini-history .wf-mini-remark { flex-basis: 100%; }

/* --- find sheet ---------------------------------------------------------- */
.wf-find { display: grid; gap: 12px; }
.wf-find-list { display: grid; gap: 6px; }
.wf-quick { display: grid; gap: 6px; }
.wf-quick + .wf-quick { margin-top: 8px; }
.wf-find-row {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.wf-find-row:hover { background: var(--surface-alt); }
.wf-find-row.is-on { border-color: var(--accent); background: var(--accent-soft); }
.wf-find-row > svg { color: var(--ink-faint); flex: none; }
.wf-find-text { flex: 1; min-width: 0; display: grid; gap: 1px; font-size: 13px; color: var(--ink-soft); }
.wf-find-text strong { font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }
.wf-find-owner { color: var(--warning); font-size: 12px; }
.wf-tick { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-alt); color: var(--ink-soft); flex: none; }
.wf-find-row.is-on .wf-tick { background: var(--accent); color: #fff; }

/* --- shop sheet & timeline ----------------------------------------------- */
.wf-shop { display: grid; gap: 12px; }
.wf-shop-info { display: grid; gap: 6px; font-size: 14px; }
.wf-shop-info p { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; overflow-wrap: anywhere; }
.wf-tl { margin: 0; padding: 0; list-style: none; display: grid; }
.wf-tl-item { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; position: relative; padding-bottom: 14px; }
.wf-tl-item:not(:last-child)::before { content: ''; position: absolute; left: 14px; top: 30px; bottom: 0; width: 2px; background: var(--border); }
.wf-tl-dot { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--surface-alt); color: var(--ink-soft); }
.wf-tl-dot.is-order { background: var(--success-soft); color: var(--accent-deep); }
.wf-tl-dot.is-potential { background: #E4ECFB; color: #1D3F8A; }
.wf-tl-dot.is-nocontact { background: var(--warning-soft); color: var(--warning); }
.wf-tl-body { display: grid; gap: 2px; min-width: 0; }
.wf-tl-body p { margin: 0; }
.wf-tl-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 14px; }
.wf-tl-sub { font-size: 12.5px; color: var(--ink-soft); }
.wf-tl-remark { font-size: 13.5px; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--surface-alt); overflow-wrap: anywhere; }

/* --- history / filters --------------------------------------------------- */
.wf-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wf-filters .ucx-select { flex: 1 1 150px; min-width: 0; }
.wf-filters .btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.wf-day { display: grid; gap: 6px; }
.wf-day-title { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 14px; font-weight: 800; color: var(--ink-soft); }

/* --- segmented control (period, team, weekday) --------------------------- */
.wf-seg { display: flex; gap: 4px; padding: 4px; border-radius: var(--radius-md); background: var(--surface-alt); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-padding: 0 24px; }
.wf-seg::-webkit-scrollbar { display: none; }
.wf-seg-btn {
  flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 42px; padding: 6px 14px; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--ink-soft); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.wf-seg-btn.is-on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.wf-seg--small .wf-seg-btn { min-height: 36px; font-size: 13px; }
.wf-seg-n { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--border); font-size: 12px; }
.wf-seg-btn.is-on .wf-seg-n { background: var(--accent-soft); color: var(--accent-deep); }

/* --- reports -------------------------------------------------------------- */
.wf-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.wf-stat { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); }
.wf-stat-n { font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1.15; }
.wf-stat-label { font-size: 12.5px; color: var(--ink-soft); }
.wf-stat.is-ok .wf-stat-n { color: var(--accent); }
.wf-stat.is-info .wf-stat-n { color: #1D3F8A; }
.wf-stat.is-late { background: var(--danger-soft); border-color: transparent; }
.wf-stat.is-late .wf-stat-n { color: var(--danger); }
.wf-total { display: grid; gap: 8px; padding: 12px; border-radius: var(--radius-md); background: var(--surface-alt); }
.wf-total .wf-stat { background: var(--surface); }
.wf-people { display: grid; gap: 8px; }
.wf-person {
  display: grid; gap: 6px; width: 100%; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface);
  color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.wf-person:hover { border-color: var(--accent); }
.wf-person-head { display: flex; align-items: center; gap: 8px; font-size: 15.5px; }
.wf-person-head > svg { margin-left: auto; color: var(--ink-faint); }
.wf-person-line { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13.5px; font-weight: 600; }
.wf-person-line.is-muted { color: var(--ink-soft); font-weight: 500; }
.wf-person-line .is-ok { color: var(--accent); }
.wf-person-line .is-late { color: var(--danger); }
.wf-person-sheet { display: grid; gap: 10px; }

/* --- plan / assign ------------------------------------------------------- */
.wf-days .wf-seg-btn { flex: 1 1 0; min-width: 0; padding: 6px 2px; flex-direction: column; gap: 2px; min-height: 52px; }
.wf-plan-list { display: grid; gap: 10px; }
.wf-plan-items { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.wf-plan-item {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; align-items: center; gap: 8px;
  min-height: 56px; padding: 6px 6px 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
}
.wf-plan-no { font-size: 13px; font-weight: 800; color: var(--ink-faint); text-align: center; }
.wf-plan-shop { display: grid; min-width: 0; font-size: 12.5px; color: var(--ink-soft); }
.wf-plan-shop strong { font-size: 14.5px; color: var(--ink); overflow-wrap: anywhere; }
.wf-mini-seg { display: inline-flex; padding: 2px; border-radius: var(--radius-sm); background: var(--surface-alt); }
.wf-mini-btn {
  display: inline-flex; align-items: center; gap: 5px; height: 40px; padding: 0 10px; border: 0; border-radius: 6px;
  background: none; color: var(--ink-soft); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.wf-mini-btn.is-on { background: var(--surface); color: var(--accent-deep); box-shadow: var(--shadow-sm); }
.wf-savebar { margin: 4px 0 0; border-radius: var(--radius-md); border: 1px solid var(--border); }
.wf-assign-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.wf-assign-bar .btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }

/* --- notes, new shops, closed shops -------------------------------------- */
.wf-note { display: block; margin-top: 3px; padding: 4px 8px; border-radius: 6px; background: var(--warning-soft); color: var(--warning); font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; }
p.wf-note { margin: 0; }
.wf-tag.is-new { background: #E4ECFB; color: #1D3F8A; margin-left: 6px; }
.wf-tag.is-ok { background: var(--success-soft); color: var(--accent-deep); }
.wf-card.is-closed, .wf-done.is-closed, .wf-plan-item.is-closed { opacity: .6; }
.wf-new-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin-top: 6px; border-style: dashed; }
.wf-close-btn { justify-self: start; min-height: 44px; margin-top: 4px; }
.wf-clash { display: grid; gap: 6px; padding: 10px; border-radius: var(--radius-sm); background: var(--warning-soft); }
.wf-log-btn.btn--primary { box-shadow: var(--shadow-sm); }

/* --- import preview ------------------------------------------------------ */
.wfi { display: grid; gap: 14px; }
.wfi-foot { display: flex; justify-content: flex-end; gap: 10px; width: 100%; }
.wfi-foot .btn { min-height: 44px; }
.wfi-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.wfi-bar .btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }
.wfi-people { display: grid; gap: 10px; }
.wfi-person { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.wfi-person.is-off { background: var(--surface-alt); }
.wfi-person-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.wfi-sheet { margin: 0; font-weight: 800; font-size: 15px; }
.wfi-meta { margin: 2px 0 0; font-size: 13px; color: var(--ink-soft); }
.wfi-person-pick { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; }
.wfi-person-pick .ucx-select { width: 100%; }
.wfi-counts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.wfi-st { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--surface-alt); color: var(--ink-soft); white-space: nowrap; }
.wfi-st.is-ok { background: var(--success-soft); color: var(--accent-deep); }
.wfi-st.is-warn { background: var(--warning-soft); color: var(--warning); }
.wfi-st.is-info { background: #E4ECFB; color: #1D3F8A; }
.wfi-detail > summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; font-weight: 700; font-size: 14px; color: var(--accent-deep); }
.wfi-table-wrap { max-height: 360px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.wfi-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.wfi-table th, .wfi-table td { padding: 7px 9px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.wfi-table th { position: sticky; top: 0; background: var(--surface-alt); z-index: 1; }
.wfi-table .is-num { font-variant-numeric: tabular-nums; color: var(--ink-faint); }
.wfi-table tr.is-guess { background: color-mix(in srgb, var(--warning-soft) 60%, transparent); }
.wfi-as { display: block; font-size: 12px; color: var(--accent-deep); }
.wfi-remark { display: block; font-size: 12px; color: var(--warning); }
.wfi-options { display: grid; gap: 8px; }
.wfi-small { color: var(--ink-soft); font-size: 12.5px; }
.wfi-options .ucx-check { align-items: flex-start; }
.wfi-options .ucx-check input { margin-top: 3px; }

@media (max-width: 640px) {
  .wfi-foot .btn { flex: 1; }
  .wfi-person-pick { grid-template-columns: minmax(0, 1fr); }
  .wfi-table { font-size: 12.5px; }
}

/* a visit takes the location */
.wf-loc-note { margin: 6px 0 0; padding: 8px 10px; border-radius: var(--radius-sm); background: #E4ECFB; color: #1D3F8A; font-size: 13px; line-height: 1.5; }
/* No place came for a visit: said before anything is saved, with the two ways on. */
.wf-loc-problem { margin: 8px 0 0; padding: 10px 12px; border-radius: var(--radius-sm); background: #FEF3C7; border: 1px solid #F59E0B; color: #78350F; }
.wf-loc-problem-title { margin: 0; font-weight: 700; font-size: 13.5px; line-height: 1.5; }
.wf-loc-problem-how { margin: 4px 0 0; font-size: 12.5px; line-height: 1.6; }
.wf-loc-problem-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.wf-loc-problem-actions .btn { min-height: 40px; }

/* Way Check: the whole day */
.way-day-dialog { width: min(760px, calc(100vw - 24px)); max-height: 86vh; }
.way-day-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.way-day-wrap { overflow: auto; margin-top: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.way-day-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.way-day-table th { position: sticky; top: 0; background: var(--surface-alt); text-align: left; padding: 8px 10px; font-size: 12.5px; color: var(--ink-soft); }
.way-day-table td { padding: 8px 10px; border-top: 1px solid var(--border); vertical-align: top; }
.way-day-table td.is-num { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-soft); }

/* --- phone ----------------------------------------------------------------- */
@media (max-width: 640px) {
  .wf-head { align-items: stretch; flex-direction: column; }
  .wf-who { width: 100%; }
  .wf-who-select { flex: 1; min-width: 0; }
  .wf-tile { padding: 10px; min-height: 70px; }
  .wf-tile-n { font-size: 24px; }
  .wf-tile-label { font-size: 12px; }
  .wf-plan-item { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "shop close" "acts acts"; padding: 8px 6px 8px 10px; }
  .wf-plan-no { display: none; }
  .wf-plan-shop { grid-area: shop; }
  .wf-plan-item > .ucx-icon-btn { grid-area: close; }
  .wf-mini-seg { grid-area: acts; justify-self: start; }
  .wf-assign-bar { grid-template-columns: minmax(0, 1fr); }
  .wf-savebar { position: sticky; bottom: 0; margin: 0; padding-left: 12px; padding-right: 12px; }
  .wf-savebar .acx-savebar-actions { width: 100%; }
  .wf-savebar .acx-savebar-actions .btn { flex: 1; }
  .wf-filters .btn { width: 100%; justify-content: center; }
}

/* plan import: the week, day by day */
.wfp-day { padding: 6px 0; border-top: 1px solid var(--border); }
.wfp-day .ucx-label { margin: 0 0 2px; }
.wfp-shops { margin: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.6; }

/* ============================================================================
   Wholesale Daily Sale — today's entry (.wsx)
   ============================================================================ */
.wsx { display: grid; gap: 14px; min-width: 0; }
.wsx :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wsx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.wsx-title { margin: 0; font-family: var(--font-display); font-size: 21px; }
.wsx-sub { margin: 2px 0 0; color: var(--ink-soft); font-size: 14px; }

.wsx-card {
  display: grid; gap: 12px; padding: 16px;
  border-radius: var(--radius-lg); color: #fff;
  background: linear-gradient(135deg, var(--accent-deep), var(--accent));
  box-shadow: var(--shadow-md);
}
.wsx-card.is-done { background: linear-gradient(135deg, #1D3357, #10203A); }
.wsx-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.wsx-who { display: grid; gap: 4px; min-width: 0; flex: 1; }
.wsx-label { font-size: 12.5px; font-weight: 600; opacity: .85; }
.wsx-who-name { font-size: 17px; }
.wsx-who-select { background: rgba(255, 255, 255, .95); color: var(--ink); max-width: 320px; }
.wsx-status { padding: 3px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 800; background: rgba(255, 255, 255, .18); white-space: nowrap; }
.wsx-status.is-done { background: #fff; color: var(--ink); }
.wsx-total { display: grid; gap: 2px; }
.wsx-total-n { font-family: var(--font-display); font-size: 34px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.wsx-total-n small { font-size: 16px; font-weight: 600; opacity: .85; }
.wsx-count { font-size: 13px; opacity: .9; }

.wsx-list { display: grid; gap: 10px; }
.wsx-add { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; width: 100%; font-size: 16px; font-weight: 700; border-radius: var(--radius-md); }
.wsx-orders { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.wsx-order {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
  width: 100%; min-height: 64px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface);
  color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.wsx-order:hover:not(:disabled) { border-color: var(--accent); }
.wsx-order:disabled { cursor: default; opacity: 1; }
.wsx-order > svg { color: var(--ink-faint); }
.wsx-order-no {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface-alt); color: var(--ink-soft); font-size: 12.5px; font-weight: 800;
}
.wsx-order-text { display: grid; gap: 2px; min-width: 0; }
.wsx-order-text strong { font-size: 15px; overflow-wrap: anywhere; }
.wsx-order-text span { font-size: 12.5px; color: var(--ink-soft); overflow-wrap: anywhere; }
.wsx-order-amt { font-family: var(--font-display); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wsx-empty { padding: 28px 16px; }

.wsx-bar:empty { display: none; }
.wsx-bar-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.wsx-bar-total { display: grid; font-size: 12.5px; color: var(--ink-soft); }
.wsx-bar-total strong { font-family: var(--font-display); font-size: 20px; color: var(--ink); font-variant-numeric: tabular-nums; }
.wsx-bar-inner .btn { min-height: 48px; padding-left: 22px; padding-right: 22px; }

/* the order sheet */
.wsx-results { display: grid; gap: 4px; max-height: 280px; overflow: auto; margin-top: 4px; padding: 4px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-md); }
.wsx-result { display: grid; gap: 1px; min-height: 48px; padding: 8px 10px; border: 0; border-radius: 6px; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.wsx-result:hover, .wsx-result:focus-visible { background: var(--accent-soft); }
.wsx-result span { font-size: 12.5px; color: var(--ink-soft); }
.wsx-amount { font-family: var(--font-display); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.wsx-del { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }

@media (max-width: 640px) {
  .wsx-title { font-size: 19px; }
  .wsx-total-n { font-size: 30px; }
  .wsx-who-select { max-width: none; width: 100%; }
  .wsx-order { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .wsx-order > svg { display: none; }
  /* total and Submit under the thumb */
  .wsx-bar { position: sticky; bottom: 0; z-index: 5; margin: 0 -4px; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .wsx-bar-inner { border-radius: var(--radius-md) var(--radius-md) 0 0; box-shadow: 0 -6px 18px rgba(16, 32, 58, .10); }
  .wsx-list { padding-bottom: 4px; }
}

/* Daily Sale — the month */
.wsx-month-nav { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 4px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.wsx-month-nav .ucx-icon-btn:disabled { opacity: .35; cursor: default; }
.wsx-month-label { flex: 1; text-align: center; font-weight: 800; font-size: 16px; }
.wsx-month-body { display: grid; gap: 14px; }
.wsx-card--month { gap: 4px; }
.wsx-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wsx-tile { display: grid; gap: 2px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.wsx-tile-label { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }
.wsx-tile-n { font-family: var(--font-display); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wsx-section { display: grid; gap: 8px; }
.wsx-h3 { margin: 4px 0 0; font-size: 15px; font-weight: 800; }
.wsx-people { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.wsx-person {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 16px; align-items: center; gap: 10px;
  width: 100%; min-height: 68px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.wsx-person:hover { border-color: var(--accent); }
.wsx-person > svg { color: var(--ink-faint); }
.wsx-rank { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-deep); font-weight: 800; font-size: 13px; }
.wsx-person-text { display: grid; gap: 3px; min-width: 0; }
.wsx-person-text strong { font-size: 15px; overflow-wrap: anywhere; }
.wsx-person-text > span:not(.wsx-share) { font-size: 12.5px; color: var(--ink-soft); }
.wsx-share { display: block; height: 6px; border-radius: 3px; background: var(--surface-alt); overflow: hidden; }
.wsx-share i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.wsx-person-amt { display: grid; justify-items: end; gap: 1px; }
.wsx-person-amt strong { font-family: var(--font-display); font-size: 17px; font-variant-numeric: tabular-nums; }
.wsx-person-amt span { font-size: 12px; color: var(--ink-soft); }
.wsx-day { display: grid; gap: 6px; }
.wsx-day + .wsx-day { margin-top: 6px; }
.wsx-day-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0; font-size: 14px; font-weight: 800; }
.wsx-day-sum { font-family: var(--font-display); font-variant-numeric: tabular-nums; color: var(--accent-deep); }
.wsx-orders--flat { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); gap: 0; overflow: hidden; }
.wsx-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 8px 12px; border-top: 1px solid var(--border); }
.wsx-line:first-child { border-top: 0; }
@media (max-width: 640px) {
  .wsx-tile-n { font-size: 18px; }
  .wsx-person { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .wsx-person > svg { display: none; }
}
.wsx-views { justify-self: start; }
.wsx-line-btn { width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.wsx-line-btn:hover { background: var(--surface-alt); }
.wsx-line-btn > svg { color: var(--ink-faint); flex: none; }
.wsx-orders--flat > li + li .wsx-line-btn { border-top: 1px solid var(--border); }
.wsx-orders--flat > li:first-child .wsx-line-btn { border-top: 0; }

/* --- Wholesale Daily Sale from the POS file (2026-10-31) ------------------ */
.wso-tools { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin: 4px 0 8px; }
.wso-tools .field { display: grid; gap: 6px; margin: 0; min-width: 160px; }
.wso-list { display: grid; gap: 8px; margin-top: 10px; }
.wso-man { border: 1px solid var(--pt-line, #e2e8f0); border-radius: 12px; background: var(--surface, #fff); }
.wso-man > summary { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 14px; cursor: pointer; list-style: none; }
.wso-man > summary::-webkit-details-marker { display: none; }
.wso-rank { width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; background: var(--pt-green-50, #ecfdf5); color: var(--pt-green-700, #047857); font-size: 12px; font-weight: 700; }
.wso-name { min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.wso-name small { display: block; font-weight: 500; color: var(--ink-soft, #64748b); font-size: 12.5px; }
.wso-net { font-variant-numeric: tabular-nums; font-size: 16px; }
.wso-invoices { list-style: none; margin: 0; padding: 0 14px 12px; display: grid; gap: 4px; }
.wso-invoices li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 6px 0; border-top: 1px dashed var(--pt-line, #e2e8f0); font-size: 13px; }
.wso-doc { font-family: var(--font-mono, monospace); color: var(--ink-soft, #64748b); }
.wso-cust { min-width: 0; overflow-wrap: anywhere; }
.wso-cust em { font-style: normal; color: var(--ink-soft, #64748b); }
.wso-amt { font-variant-numeric: tabular-nums; font-weight: 700; }

/* One person's day in a box (Way Check › Detail, 2026-10-31): the map, then every place. */
.way-person-dialog { display: none; }
.way-person-dialog[open] { display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.way-person-dialog .way-day-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.way-person-map { flex: none; height: min(38vh, 320px); border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); }
.way-person-map .way-map { height: 100%; }
.way-person-list { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }

/* Daily Sale › Lark (2026-11-01). */
.wsl { display: grid; gap: 14px; }
.wsl-groups { display: grid; gap: 8px; }
.wsl-group { display: grid; grid-template-columns: auto minmax(120px, 1fr) minmax(200px, 2fr) auto; gap: 8px; align-items: center; }
.wsl-auto { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.wsl-tick { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.wsl-preview { margin: 0; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-alt, #f8fafc); white-space: pre-wrap; font: 14px/1.6 var(--font-mono, ui-monospace, monospace); max-height: 320px; overflow: auto; }
.wsl-state { margin: 0; white-space: pre-line; font-size: 13px; color: var(--ink-soft); }
.wsl-state:empty { display: none; }
.wsl-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .wsl-group { grid-template-columns: auto 1fr auto; }
  .wsl-group input[type="url"] { grid-column: 1 / -1; }
}

/* New Shop: a photo from the camera or the gallery (2026-11-02) */
.wf-new-addr { resize: vertical; min-height: 60px; }
.wf-photo { display: grid; gap: 10px; }
.wf-photo-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.wf-photo-btns .btn { flex: 1 1 160px; }
.wf-photo-shot { display: grid; gap: 6px; justify-items: start; }
.wf-photo-shot img { max-width: 100%; max-height: 260px; border-radius: 12px; border: 1px solid var(--border); object-fit: contain; background: var(--surface-alt); }

/* Follow-up Lark: who is @mentioned (2026-11-02) */
.wf-mentions { display: grid; gap: 8px; }
.wf-mention-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 8px; align-items: center; }
.wf-mention-row .is-bad { border-color: var(--danger); }
.wf-mention-all { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.wf-mentions > .btn { justify-self: start; }