@import url('/design-tokens.css');

/* Scale-independent arrow-Q; the PNG is only a fallback for browsers without masks. */
.brand-mark { display:inline-block; flex:none; width:40px; height:40px; background:url('/brand/turnq-icon-192.png') center/contain no-repeat; border-radius:9px; }
@supports (mask-image:url('')) or (-webkit-mask-image:url('')) {
  .brand-mark { background:var(--accent); border-radius:0; -webkit-mask:url('/brand/turnq-symbol.svg') center/contain no-repeat; mask:url('/brand/turnq-symbol.svg') center/contain no-repeat; mask-mode:alpha; }
}
.header-left > .brand-mark { margin-left:-4px; margin-right:-2px; }
.brand-lockup { display:flex; align-items:center; justify-content:center; gap:8px; }
.brand-lockup .brand-mark { width:64px; height:64px; }
.brand-wordmark { font-family:var(--font-ui); font-size:40px; font-weight:650; font-style:normal; letter-spacing:-1.8px; line-height:1.1; color:var(--ink); }
.brand-tagline { margin-top:9px; color:var(--ink-muted); font-size:11px; font-weight:450; letter-spacing:0; line-height:1.5; text-align:center; }
.checkin-logo.brand-mark { display:block; border-radius:0; }

/* A single finish for the existing app. Workflow-specific layout stays in style.src.css. */
body { background:var(--surface-canvas); font-family:var(--font-ui); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; }
button,input,select,textarea { font-family:inherit; }
button,a,input,select,textarea,summary { touch-action:manipulation; }
button { font-weight:600; }
button:disabled { cursor:not-allowed; }
button:not(:disabled),a,summary { transition:background-color 120ms ease,border-color 120ms ease,color 120ms ease; }
:is(button,a,input,select,textarea,summary):focus-visible { outline:2px solid var(--focus); outline-offset:3px; }
h1,h2,h3 { text-wrap:balance; }
[hidden] { display:none !important; }
.skip-link { position:fixed; top:8px; left:12px; z-index:1000; padding:10px 16px; border-radius:8px; color:#fff; background:var(--accent-strong); transform:translateY(-150%); }
.skip-link:focus { transform:translateY(0); }
.content { scroll-margin-top:80px; }
.header,body.light .header { background:var(--surface-base); box-shadow:none; }
.header-brand-text { gap:3px; }
.header-title { letter-spacing:-.5px; }
.header .app-version { display:none; }
.sync-status { font-size:11px; font-weight:500; margin:0; }
.header-actions { gap:12px; }
.user-pill { min-height:38px; padding:5px 12px 5px 5px; background:var(--surface-base); border-color:var(--line); }
.user-pill:hover { background:var(--surface-raised); }
.user-pill .avatar { width:26px; height:26px; }
.workspace-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; min-width:0; margin-bottom:4px; }
.workspace-heading h1,.clientele-list-heading { font-size:25px; line-height:1.3; letter-spacing:-.75px; font-weight:650; margin:0; }
.workspace-heading p { margin:5px 0 0; color:var(--ink-muted); font-size:13px; }
.workspace-heading .sales-department-switcher { width:auto; min-width:200px; margin:0; padding:0; border:0; background:transparent; }
.workspace-heading .sales-department-switcher span { font-size:12px; text-transform:none; letter-spacing:0; }
.workspace-heading .sales-department-switcher select { min-height:40px; }
.workspace-tools { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.workspace-tools .phone-reorder-toggle { display:inline-flex; align-items:center; justify-content:center; gap:7px; width:auto; margin:0; min-height:40px; padding:8px 12px; border:1px solid var(--line); border-radius:8px; background:transparent; font:inherit; font-size:12px; }
.content-rotation .reorder-arrows,.content-guests .reorder-arrows { display:none; }
.rotation-reorder-mode .content-rotation .reorder-arrows,.guest-reorder-mode .content-guests .reorder-arrows { display:flex; }
.section { box-shadow:var(--shadow-sm); }
.section-header,.section-label { font-size:12px; line-height:1.5; letter-spacing:0; text-transform:none; font-weight:650; }
.section-header { padding:12px 18px; color:var(--ink-secondary); }
.section.purple-section,.section.purple-section .section-header { border-color:var(--line); }
.section.purple-section .section-header { color:var(--ink-secondary); }
.badge { background:var(--surface-raised); color:var(--ink-secondary); border-radius:6px; min-width:24px; text-align:center; font-variant-numeric:tabular-nums; }
.view-tab,.app-shell .view-tab { font-weight:550; }
.view-tab-icon,.app-shell .view-tab-icon,.app-shell .view-tab.active .view-tab-icon { background:transparent; color:inherit; }
.tab-count,.tab-count.waitlist-count,.tab-count.clientele-count,.view-tab.active .tab-count.waitlist-count,.view-tab.active .tab-count { background:var(--surface-raised); color:var(--ink-secondary); font-size:11px; border-radius:6px; }
.view-tab.active .tab-count { background:var(--surface-base); color:var(--accent); }
.bottom-bar { background:var(--surface-base); }
.bottom-btn,.bottom-btn.active,.bottom-btn.gw-active { color:var(--ink-muted); background:transparent; border-color:transparent; }
.bottom-btn.manager-selected { color:var(--accent); background:var(--accent-soft); }
.bottom-btn-label { font-weight:550; }
.guest-waiting-strip { color:var(--warning); background:var(--warning-soft); border-color:var(--line); border-radius:8px; box-shadow:none; }
.guest-waiting-strip > span { display:flex; align-items:center; gap:8px; }
.guest-waiting-strip strong { font-weight:600; }
.guest-strip-cta { font-size:12px; }
.app-product-meta { font-size:11px; opacity:.85; }

/* Controls share size, weight, focus and surface; blue marks the primary action. */
:is(.btn-sm,.btn-submit,.btn-cancel,.btn-danger,.btn-take-up,.btn-change-status,.btn-return,.btn-restore,.btn-closeout,.btn-phone-sale,.btn-undo,.btn-sso,.admin-login-link) { min-height:40px; border-radius:8px; padding:9px 14px; font-size:13px; line-height:20px; font-weight:600; box-shadow:none; }
:is(.btn-sm,.btn-cancel,.btn-return,.btn-restore,.btn-change-status,.btn-closeout,.btn-undo) { background:var(--surface-base); color:var(--ink-secondary); border:1px solid var(--control-line); }
:is(.btn-sm,.btn-cancel,.btn-return,.btn-restore,.btn-change-status,.btn-closeout,.btn-undo):not(:disabled):hover { background:var(--surface-raised); border-color:var(--ink-muted); }
:is(.btn-submit,.btn-take-up,.btn-phone-sale) { background:var(--accent-strong); color:#fff; border:1px solid transparent; }
:is(.btn-submit,.btn-take-up,.btn-phone-sale):not(:disabled):hover { background:var(--accent-hover); }
.btn-sm.primary { border-color:var(--control-line); background:var(--surface-base); color:var(--accent); }
.btn-sm.danger,.btn-danger { color:var(--danger); border-color:var(--line); }
.btn-sm.danger:not(:disabled):hover,.btn-danger:not(:disabled):hover { background:var(--danger-soft); }
.btn-close { color:var(--ink-muted); background:transparent; width:40px; height:40px; border:0; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; }
.btn-close:hover { background:var(--surface-raised); }
label { font-size:12px; font-weight:550; color:var(--ink-secondary); text-transform:none; letter-spacing:0; }
input:not([type=checkbox]):not([type=radio]),select,textarea { background:var(--surface-base); color:var(--ink); border:1px solid var(--control-line); border-radius:8px; min-height:42px; font-size:14px; line-height:20px; padding:10px 12px; }
input::placeholder,textarea::placeholder { color:var(--ink-muted); opacity:1; }
.required-label,.optional-label { font-size:11px; color:var(--ink-muted); letter-spacing:0; text-transform:none; font-weight:400; }
.modal,.modal.manager-panel,.rep-stats-modal { background:var(--surface-base); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-dialog); }
.modal-overlay { background:var(--overlay); backdrop-filter:none; }
.modal-header { padding:18px 22px; border-bottom:1px solid var(--line); }
.modal-header h2 { font-size:19px; line-height:1.4; font-weight:650; letter-spacing:-.4px; display:flex; gap:10px; align-items:center; }
.modal-body { padding:22px; gap:18px; }
.modal-footer { padding:16px 22px; gap:10px; background:var(--surface-base); border-top:1px solid var(--line); }
.modal-footer .btn-submit,.modal-footer .btn-cancel { flex:0 1 auto; min-width:120px; }
.modal-footer { justify-content:flex-end; }
.modal :is(.section-label,.edit-up-info) { font-size:12px; }
.sale-details { background:var(--surface-raised); border-color:var(--line); border-radius:10px; }
.product-interest { border-color:var(--line); border-radius:8px; padding:12px; }
.product-interest summary { font-size:13px; font-weight:600; }
.reason-btn { background:var(--surface-base); color:var(--ink-secondary); border-color:var(--control-line); border-radius:8px; font-weight:550; }
.reason-btn:hover { background:var(--surface-raised); }
.reason-btn.selected { background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }

/* Sales: quiet ordered rows, a clear next-up state, no full-panel status colors. */
.next-up-card,body.light .next-up-card,.next-up-card:not(.empty),body.light .next-up-card:not(.empty) { background:var(--surface-base); border-color:var(--line); border-top:3px solid var(--accent-strong); box-shadow:none; }
.next-up-label,.next-up-card:not(.empty) .next-up-label { color:var(--accent); letter-spacing:.7px; font-size:11px; }
.next-up-name,body.light .next-up-name { color:var(--ink); font-size:23px; font-weight:650; line-height:1.3; }
.next-up-actions .btn-take-up { background:var(--accent-strong); }
.next-up-status { background:var(--success-soft); border:0; color:var(--success); font-weight:550; }
.rep-card { min-height:72px; padding:14px 18px; gap:14px; }
.rep-card.is-phone,body.light .rep-card.is-phone,.rep-card.with-cust { background:var(--surface-base); border-left:0; }
.rep-card.off-floor { opacity:1; }
.rep-name { font-size:14px; font-weight:600; }
button.rep-name { border:0; padding:3px 0; background:none; color:var(--ink); text-align:left; cursor:pointer; }
button.rep-name:hover { color:var(--accent); }
.avatar { width:34px; height:34px; font-size:12px; font-weight:600; letter-spacing:0; }
.queue-position { color:var(--ink-muted); background:transparent; border:0; box-shadow:none; min-width:24px; padding:0; font-weight:500; }
.off-floor-label { color:var(--ink-muted); font-weight:400; }
.phone-badge,body.light .rep-card.is-phone .phone-badge { color:var(--ink-muted); font-weight:500; }
.rep-card.off-floor[data-reason="on_phone"] .off-floor-label { color:var(--status-on-phone); }
.timer,.status-chip.active-up { color:var(--accent); font-weight:500; letter-spacing:0; }
.phone-reorder-toggle { border:0; background:transparent; color:var(--ink-muted); font-size:12px; }
.phone-reorder-toggle:hover { color:var(--accent); background:var(--accent-soft); }
.floor-sales-summary { background:var(--surface-base); border-color:var(--line); padding:18px; }
.floor-sales-summary strong { font-size:24px; font-weight:600; color:var(--ink); }
.floor-sales-manager-row { background:var(--surface-base); padding:16px 18px; border-color:var(--line); }
.floor-sales-manager-row > span { font-size:10px; letter-spacing:.2px; border:0; padding:4px 7px; border-radius:5px; }
.floor-sales-manager-row.available > span { background:var(--success-soft); color:var(--success); }
.floor-sales-manager-row.busy > span { background:var(--accent-soft); color:var(--accent); }
.floor-sales-overview .floor-sales-manager-board { padding:0; }
.floor-sales-manager-board { gap:0; }
.floor-sales-manager-row,.floor-sales-manager-row.busy,.floor-sales-manager-row.claiming,.floor-sales-manager-row.not-staffed { border:0; border-bottom:1px solid var(--line); border-radius:0; background:var(--surface-base); }
.floor-sales-manager-row:last-child { border-bottom:0; }
.appointment-strip { background:var(--surface-base); border-color:var(--line); color:var(--ink-secondary); }
.appointment-strip > span { display:flex; align-items:center; gap:7px; }
.appointment-strip strong,.appointment-strip-next { font-weight:550; }

/* Clientele consumes the same tokens as every other screen. */
:is(.clientele-page,.clientele-editor,.clientele-dialog,.clientele-section),
body.light :is(.clientele-page,.clientele-editor,.clientele-dialog,.clientele-section) {
  --clientele-canvas:var(--surface-canvas); --clientele-surface:var(--surface-base); --clientele-raised:var(--surface-raised);
  --clientele-text:var(--ink); --clientele-text-muted:var(--ink-muted); --clientele-border:var(--line); --clientele-control-border:var(--control-line);
  --clientele-accent:var(--accent); --clientele-accent-hover:var(--accent-hover); --clientele-accent-soft:var(--accent-soft); --clientele-on-accent:#fff;
  --clientele-warning:var(--warning); --clientele-warning-soft:var(--warning-soft); --clientele-danger:var(--danger); --clientele-danger-soft:var(--danger-soft);
  --clientele-success:var(--success); --clientele-success-soft:var(--success-soft); --clientele-focus:var(--focus); --clientele-shadow:var(--shadow-sm);
  font-family:var(--font-ui);
}
.clientele-page { background:transparent; gap:20px; }
.clientele-page .clientele-hero { align-items:center; gap:16px; padding:0; }
.clientele-page .clientele-hero-actions { width:auto; display:flex; flex-wrap:wrap; gap:8px; }
.clientele-page .clientele-hero-actions > button { flex:0 0 auto; width:auto; }
.clientele-page .clientele-list-heading { font-size:25px; line-height:1.3; font-weight:650; }
:is(.clientele-page,.clientele-editor,.clientele-dialog,.clientele-section) :is(button,.btn-sm,.btn-submit,.btn-cancel) { font-weight:550; border-radius:8px; padding:9px 12px; }
:is(.clientele-page,.clientele-editor,.clientele-dialog,.clientele-section) :is(.btn-submit,.btn-sm.primary) { background:var(--accent-strong); border-color:var(--accent-strong); color:#fff; }
.clientele-page .clientele-summary { background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; gap:0; }
.clientele-page .clientele-summary > button { display:flex; flex-direction:row; align-items:center; justify-content:center; gap:8px; background:transparent; border:0; border-bottom:2px solid transparent; border-radius:0; padding:9px 8px; box-shadow:none; }
.clientele-page .clientele-summary > button.selected { background:transparent; border-bottom-color:var(--accent); box-shadow:none; }
.clientele-page .clientele-summary strong { font-size:17px; font-weight:600; color:var(--ink); }
.clientele-page .clientele-summary span { font-size:12px; font-weight:500; color:var(--ink-muted); }
.clientele-page .clientele-summary > button.selected span,.clientele-page .clientele-summary > button.selected strong { color:var(--accent); }
.clientele-page .clientele-summary .overdue strong { color:var(--danger); }
.clientele-page .clientele-summary .due strong { color:var(--warning); }
.app-shell .clientele-page .clientele-filters { display:grid; grid-template-columns:minmax(220px,1.5fr) repeat(3,minmax(130px,1fr)); align-items:end; gap:12px; padding:0; }
.app-shell .clientele-page .clientele-filters:not(:has(.sales-team-filter)) { grid-template-columns:minmax(220px,2fr) minmax(160px,1fr); }
.clientele-page .clientele-filter-field { grid-column:auto; }
.clientele-page .clientele-filter-field label,.clientele-page .sales-team-filter label { font-size:11px; font-weight:500; text-transform:none; letter-spacing:0; }
.clientele-page :is(input:not([type=checkbox]),select,textarea) { font-size:13px; }
.clientele-page .clientele-list { display:flex; flex-direction:column; gap:0; border:1px solid var(--line); border-radius:12px; background:var(--surface-base); }
.clientele-page .clientele-card { grid-template-columns:minmax(180px,.8fr) minmax(0,1.4fr); padding:22px; gap:16px 24px; border:0; border-bottom:1px solid var(--line); border-radius:0; box-shadow:none; background:transparent; }
.clientele-page .clientele-card:last-child { border-bottom:0; }
.clientele-page .clientele-card-head { gap:10px; }
.clientele-page .clientele-card-head > div { gap:8px; }
.clientele-page .clientele-card-head h2 { font-size:15px; line-height:22px; font-weight:650; }
.clientele-page .clientele-card-head small { font-size:12px; font-weight:400; }
.clientele-page .clientele-detail-icon { width:28px; height:28px; min-width:28px; min-height:28px; padding:3px; border:0; border-radius:5px; color:var(--ink-muted); order:2; }
.clientele-page .clientele-card-head > div:first-child { width:100%; align-items:flex-start; justify-content:space-between; }
.clientele-page .clientele-card-head > div:first-child > div { flex:1; min-width:0; }
.clientele-page .clientele-status { font-size:11px; line-height:16px; font-weight:550; padding:3px 8px; border-radius:5px; }
.clientele-page .clientele-identity-contact { display:flex; flex-direction:column; gap:5px; width:100%; margin-top:4px; }
.clientele-page .clientele-contact-meta { color:var(--ink-muted); font-size:12px; line-height:19px; overflow-wrap:anywhere; }
.clientele-contact-meta .clientele-icon { width:14px; height:14px; margin-right:3px; }
.clientele-page .clientele-context { gap:12px; }
.clientele-page .clientele-card-meta { gap:5px; font-size:12px; line-height:18px; }
.clientele-page .clientele-detail-group { padding:0; border:0; border-radius:0; background:transparent; }
.clientele-page .clientele-detail-group h3 { margin:0 0 4px; color:var(--ink-muted); font-size:11px; line-height:16px; font-weight:550; }
.clientele-page .clientele-detail-group p { font-size:13px; line-height:20px; color:var(--ink-secondary); }
.clientele-page .clientele-detail-group h3 svg { display:none; }
.clientele-page .clientele-card-actions { grid-column:1/-1; }
.clientele-page .clientele-workflow-actions { flex-direction:row; align-items:center; gap:8px; }
.clientele-page .clientele-primary-action-row { flex:1; gap:12px; }
.clientele-page .clientele-scheduling-actions { margin-left:auto; }
.clientele-page .clientele-contact-actions,.clientele-page .clientele-scheduling-actions { gap:6px; }
.clientele-page .clientele-card-actions .btn-sm { min-height:36px; padding:7px 10px; font-size:12px; line-height:20px; }
.clientele-page .clientele-more { align-self:center; }
.clientele-page .clientele-more-trigger { min-width:36px; }
.clientele-page .clientele-more-menu { max-width:none; box-shadow:var(--shadow-dialog); background:var(--surface-base); }
.clientele-page .appointment-agenda { border:1px solid var(--line); border-radius:8px; background:var(--surface-base); }
.clientele-page .appointment-agenda-head { background:transparent; color:var(--ink-secondary); padding:12px 16px; border:0; border-radius:0; }
.clientele-page .appointment-agenda-head > div { display:flex; flex-direction:row; align-items:center; gap:10px; }
.clientele-page .appointment-agenda-head strong { font-size:12px; font-weight:600; }
.clientele-page .appointment-agenda-head span { font-size:11px; font-weight:400; }
.clientele-page .appointment-agenda-list > button { padding:10px 16px; border:0; border-top:1px solid var(--line); border-radius:0; }
.clientele-page .appointment-time,.clientele-page .appointment-person strong { font-size:12px; font-weight:600; }
.clientele-page .appointment-person small,.clientele-page .appointment-timing { font-size:11px; }
.clientele-page .clientele-retention-note { font-size:11px; line-height:17px; color:var(--ink-muted); }
.clientele-page .clientele-archive-toggle { align-self:flex-start; border:0; background:transparent; padding-left:0; color:var(--ink-muted); }
.office-appointments-page .clientele-hero .section-header { font-size:25px; padding:0; border:0; color:var(--ink); }
.office-appointments-page .clientele-hero p { font-size:13px; color:var(--ink-muted); }
.office-appointment-controls { grid-template-columns:repeat(3,minmax(0,1fr)); padding:0; border:0; background:transparent; gap:12px; }
.office-appointment-controls label { font-weight:500; }

/* Guest operations, reports, settings and account screens. */
.guest-department-heading { background:var(--surface-raised); color:var(--ink-secondary); border-color:var(--line); font-size:12px; letter-spacing:0; text-transform:none; }
.guest-card,.guest-card.assigned,.guest-card.notified { background:var(--surface-base); border-color:var(--line); border-left:0; padding:18px; }
.guest-position { color:var(--ink-muted); background:transparent; border:0; font-weight:500; font-size:14px; }
.guest-name-line strong { font-size:15px; font-weight:600; }
.guest-name-line > span,.guest-meta { font-size:12px; color:var(--ink-muted); }
.guest-actions { gap:8px; margin-top:12px; }
.guest-countdown { background:var(--surface-raised); color:var(--ink-secondary); border:0; border-radius:5px; font-weight:500; font-variant-numeric:tabular-nums; }
.guest-countdown.overdue { background:var(--warning-soft); color:var(--warning); }
.guest-name-help { display:none; }
.guest-add-form { padding:18px; gap:16px; }
.guest-retention-note,.guest-log-item span { font-size:11px; color:var(--ink-muted); }
.guest-left { border-color:var(--line); background:transparent; color:var(--danger); }
.guest-start,.guest-claim { background:var(--accent-strong); color:#fff; border-color:transparent; }
.guest-claim:not(:disabled):hover,
.guest-claim:not(:disabled):focus-visible { background:var(--accent-strong); color:#fff; border-color:transparent; }
.guest-edit-link { min-height:40px; color:var(--ink-muted); }

.app-shell .content-guests > .section:has(> .guest-card) > .guest-department-heading { border:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); border-radius:0; background:var(--surface-raised); margin:0; padding:10px 18px; }
.app-shell .content-guests > .section:has(> .guest-card) > .guest-card { border-left:0; border-right:0; border-radius:0; margin:0; }
.app-shell .content-guests > .section:has(> .guest-card) > .guest-card:last-child { border-bottom:0; border-radius:0; }
.guest-add-section.is-collapsed { background:var(--surface-base); border-color:var(--line); }
.guest-add-section.is-collapsed .guest-form-toggle { font-weight:600; letter-spacing:0; }
.guest-department-heading strong { border-radius:5px; font-weight:500; }
.guest-list-tools { margin:0; }
.workspace-tools .guest-list-tools label { flex-direction:row; align-items:center; gap:8px; width:auto; }
.workspace-tools .guest-list-tools select { width:auto; min-width:160px; }
.guest-card .guest-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.guest-card .guest-contact-actions { display:flex; width:auto; }
.guest-card .guest-secondary-actions { display:flex; width:auto; margin-left:auto; }
.guest-card .guest-secondary-actions > button,body.light .guest-card .guest-secondary-actions > button { min-height:40px; width:auto; padding:9px 12px; font-size:12px; font-weight:550; color:var(--ink-secondary); border-color:var(--control-line); background:var(--surface-base); }
.guest-card .guest-contact-actions .btn-sm { font-size:12px; }
.guest-form-toggle,.guest-log-toggle { text-transform:none; letter-spacing:0; font-weight:600; }
.manager-inline-wrap { background:transparent; border:0; box-shadow:none; }
.manager-inline-wrap .modal-body { padding:0; }
.manager-phone-tabs { display:flex; position:static; background:transparent; border:0; border-bottom:1px solid var(--line); padding:0; gap:24px; border-radius:0; }
.manager-phone-section { display:none; flex-direction:column; gap:20px; }
.manager-phone-section.active { display:flex; }
.manager-phone-section[data-manager-section="today"] > div:first-child { max-width:280px; }
.manager-phone-tabs button { background:transparent; color:var(--ink-muted); border:0; border-bottom:2px solid transparent; border-radius:0; min-height:44px; font-weight:550; padding:10px 4px; }
.manager-phone-tabs button.active { color:var(--accent); background:transparent; border-bottom-color:var(--accent); }
.stat-card,.stat-card.primary,.stat-card.green,.stat-card.orange { background:var(--surface-base); border:1px solid var(--line); border-radius:10px; text-align:left; padding:20px; box-shadow:none; }
.stat-value,.stat-card.green .stat-value,.stat-card.orange .stat-value { font-size:28px; font-weight:600; letter-spacing:-.8px; color:var(--ink); font-variant-numeric:tabular-nums; }
.stat-label { color:var(--ink-muted); font-size:12px; font-weight:450; text-transform:none; letter-spacing:0; }
.stat-chip { background:transparent; border:0; font-size:12px; }
.stat-chip .chip-label { font-size:12px; text-transform:none; letter-spacing:0; }
.stats-secondary { gap:16px; }
.attachment-totals,.attachment-rates { color:var(--ink-muted); background:transparent; border-color:var(--line); }
.attachment-totals > span { padding:0; border:0; border-radius:0; background:transparent; }
.export-btn { min-height:40px; background:transparent; color:var(--accent); border:1px solid var(--control-line); border-radius:8px; font-size:12px; font-weight:550; }
.manager-phone-section > .export-btn { display:inline-flex; align-self:flex-start; width:auto; gap:8px; align-items:center; padding:9px 14px; }
.manager-roster,.admin-form-card,.admin-users-card { border-color:var(--line); box-shadow:none; border-radius:10px; background:var(--surface-base); }
.manager-roster summary { font-weight:600; color:var(--ink); }
.manager-roster-item { padding:14px 16px; border-color:var(--line); }
.manager-staffing-tools,.secure-migration-card { background:var(--surface-raised); border-color:var(--line); }
.rep-table th { background:var(--surface-raised); color:var(--ink-muted); font-weight:500; letter-spacing:0; text-transform:none; font-size:12px; }
.rep-table td { border-color:var(--line); padding-top:14px; padding-bottom:14px; font-size:13px; font-variant-numeric:tabular-nums; }
.rep-table tbody tr:hover { background:var(--surface-raised); }
.admin-dashboard { max-width:1120px; gap:24px; }
.admin-dashboard-head h1 { font-size:25px; letter-spacing:-.5px; font-weight:650; }
.admin-dashboard-head p { font-size:13px; }
.admin-user-list { gap:0; }
.admin-user-row { background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:16px 0; }
.admin-user-row:last-child { border-bottom:0; padding-bottom:0; }
.admin-users-card > .section-label,.admin-section-heading .section-label { font-size:14px; color:var(--ink); }
.admin-section-heading { gap:16px; flex-wrap:wrap; }
.admin-section-heading > div { flex:1 1 200px; }
.admin-sale-field { background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:12px 0; }
.admin-users-card .form-note { max-width:760px; }
.admin-users-card > .btn-submit { width:auto; margin-top:12px; }
.department-rule-card { background:var(--surface-base); }
.department-rule-card summary { font-weight:550; }
.department-rule-row { border:0; border-bottom:1px solid var(--line); border-radius:0; }
.admin-settings-tabs { border:0; background:transparent; border-bottom:1px solid var(--line); border-radius:0; padding:0; }
.admin-settings-tabs button { border:0; border-bottom:2px solid transparent; border-radius:0; font-weight:550; }
.admin-settings-tabs button.active { border-bottom-color:var(--accent); background:transparent; color:var(--accent); }
.login-gate { background:var(--surface-canvas); align-items:center; padding:32px 20px; }
.login-gate-card { background:var(--surface-base); border:1px solid var(--line); border-radius:14px; padding:32px; box-shadow:var(--shadow-sm); }
.login-brand { width:240px; max-width:100%; margin:0 auto 28px; }
.login-gate-card > p { font-size:13px; line-height:20px; }
.secure-login-form { gap:16px; }
.secure-login-form input { font-size:16px; }
.secure-login-form .btn-submit { margin-top:4px; }
.btn-sso { border-color:var(--control-line); color:var(--ink-secondary); }
.btn-sso:hover { background:var(--surface-raised); }
.admin-login-link { border:0; color:var(--ink-muted); margin-top:12px; }
.admin-login-link:hover { background:var(--surface-raised); }
.login-theme { display:inline-flex; align-items:center; gap:8px; border:0; font-size:12px; margin-top:12px; }
.login-product-meta { font-size:10px; margin-top:14px; }
#reset-status { margin-top:12px; font-size:12px; color:var(--ink-muted); }
.empty-state,.activity-empty { padding:32px 24px; font-size:13px; line-height:21px; color:var(--ink-muted); }
.checkin-shell { padding:32px 20px; background:var(--surface-canvas); }
.checkin-card { max-width:480px; padding:30px; background:var(--surface-base); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-sm); }
.checkin-logo { width:56px; height:56px; border-radius:12px; margin-bottom:22px; }
.checkin-card h1 { font-size:25px; font-weight:650; letter-spacing:-.5px; }
.checkin-card .intro { font-size:14px; color:var(--ink-muted); line-height:22px; }
.checkin-card label { font-size:13px; font-weight:550; }
.checkin-card label:not(.consent) { display:block; }
.checkin-card label:not(.consent) > :is(input,select) { display:block; width:100%; margin-top:7px; font-weight:450; }
.checkin-card label span { color:var(--ink-muted); font-size:11px; font-weight:400; text-transform:none; }
.checkin-card :is(input,select) { font-size:16px; }
.checkin-card button { background:var(--accent-strong); color:#fff; border-radius:8px; font-size:14px; font-weight:600; }
.checkin-card button:not(:disabled):hover { background:var(--accent-hover); }
.checkin-card .optional-contact { border-color:var(--line); background:var(--surface-base); border-radius:8px; }
.checkin-card .optional-contact summary { font-weight:550; }
.checkin-card .optional-contact summary::after { color:var(--accent); }
.checkin-card .location-badge { color:var(--accent); border-color:var(--line); background:var(--accent-soft); }
.checkin-card .privacy { font-size:11px; line-height:17px; color:var(--ink-muted); }
.checkin-card .success > div { color:var(--success); background:var(--success-soft); }

@media (min-width:768px) {
  .app-shell { --workspace-nav-width:208px; }
  .app-shell .header { height:64px; padding:10px 24px; box-shadow:none; }
  .app-shell .header-left img { width:32px !important; height:32px !important; border-radius:7px !important; }
  .app-shell .view-tabs { padding:26px 12px 160px; gap:5px; border-bottom:0; overflow-y:auto; }
  .app-shell .view-tabs::before { content:'Workspace'; font-size:10px; font-weight:550; letter-spacing:.9px; padding:0 12px 12px; }
  .app-shell .view-tab { min-height:44px; padding:10px 12px; font-size:13px; gap:10px; border:0; border-radius:7px; }
  .app-shell .view-tab.active { color:var(--accent); background:var(--accent-soft); border:0; }
  .app-shell .view-tab.active.is-background-view { color:var(--ink-secondary); background:transparent; }
  .app-shell .view-tab-icon { width:20px; height:20px; border-radius:0; }
  .app-shell .upcoming-standalone-btn { position:static; width:100%; margin:24px 0 0; min-height:44px; border:0; border-top:1px solid var(--line); border-radius:0; padding-top:18px; }
  .app-shell .content { max-width:1320px; padding:94px 32px 32px; gap:22px; }
  .app-shell .guest-waiting-strip { width:auto; max-width:1256px; margin:84px 32px 0 calc(var(--workspace-nav-width) + 32px); padding:9px 14px; }
  .app-shell .guest-waiting-strip + .content { padding-top:24px; }
  .app-shell .content-rotation > .rotation-queue-continuation { margin-top:-22px; }
  .app-shell .content-rotation > .next-up-card { padding:20px; min-height:110px; }
  .app-shell .content-rotation .next-up-name { font-size:24px; }
  .app-shell .app-product-meta { max-width:1320px; padding:0 32px 24px; text-align:left; }
  .app-shell .bottom-bar { padding:12px; gap:2px; border-top:0; }
  .app-shell .bottom-btn { background:transparent; border:0; padding:10px; }
  .app-shell .bottom-btn:hover { background:var(--surface-raised); }
  .app-shell .bottom-btn.manager-selected { background:var(--accent-soft); }
  .app-shell .clientele-page { gap:20px; }
  .app-shell .clientele-list { display:flex; gap:0; }
  .app-shell .clientele-card { padding:22px; }
  .clientele-more-trigger > span,.clientele-more-trigger > svg:last-child { display:none; }
  .clientele-more-trigger { width:36px; padding:7px !important; }
  .clientele-page .clientele-summary .summary-wide-label { display:none; }
  .clientele-page .clientele-summary .summary-phone-label { display:inline; }
  .clientele-page .appointment-agenda.is-collapsed { display:grid; grid-template-columns:minmax(185px,.65fr) minmax(0,2fr); align-items:stretch; }
  .clientele-page .appointment-agenda.is-collapsed .appointment-agenda-head { padding:12px 16px; }
  .clientele-page .appointment-agenda.is-collapsed .appointment-agenda-head > div { flex-direction:column; align-items:flex-start; gap:2px; }
  .clientele-page .appointment-agenda.is-collapsed .appointment-agenda-toggle { font-size:0; }
  .clientele-page .appointment-agenda.is-collapsed .appointment-agenda-list > button { height:100%; border:0; border-left:1px solid var(--line); }
  .clientele-page .appointment-agenda.is-collapsed .appointment-agenda-list > button:not(:first-child) { display:none; }
  .clientele-page .clientele-card-actions .clientele-contact-actions .btn-sm { height:36px; min-height:36px; }
}
@media (min-width:1200px) {
  .clientele-page .clientele-card { grid-template-columns:minmax(190px,.8fr) minmax(0,1.35fr) minmax(220px,.85fr); gap:24px; }
  .clientele-page .clientele-card-actions { grid-column:auto; }
  .clientele-page .clientele-workflow-actions { flex-direction:column; align-items:stretch; height:100%; }
  .clientele-page .clientele-primary-action-row { flex:0 0 auto; flex-direction:column; gap:10px; }
  .clientele-page .clientele-scheduling-actions { margin-left:0; display:flex; flex-direction:column; align-items:stretch; }
  .clientele-page .clientele-contact-actions { display:flex; flex-wrap:wrap; }
  .clientele-page .clientele-contact-actions > button { flex:1; }
  .clientele-page .clientele-more { align-self:flex-end; margin-top:auto; }
}
@media (min-width:768px) and (max-width:1099px) {
  .app-shell { --workspace-nav-width:168px; }
  .app-shell .content { padding-left:24px; padding-right:24px; }
  .app-shell .guest-waiting-strip { margin-left:calc(var(--workspace-nav-width) + 24px); margin-right:24px; }
  .app-shell .clientele-page .clientele-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .clientele-page .clientele-hero { flex-wrap:wrap; }
  .clientele-page .clientele-card { gap:16px; }
  .clientele-page .clientele-scheduling-actions { margin-left:0; }
  .workspace-heading { flex-wrap:wrap; }
}
@media (max-width:767px) {
  .header { padding:10px 16px; min-height:64px; }
  .user-pill { min-height:44px; }
  .view-tabs { position:sticky; top:64px; z-index:90; padding:0 12px; gap:12px; background:var(--surface-base); }
  .view-tabs .view-tab { flex:1 1 auto; min-height:48px; padding:10px 6px; display:flex; align-items:center; justify-content:center; gap:6px; border:0; border-bottom:2px solid transparent; border-radius:0; font-size:13px; }
  .view-tabs .view-tab.active { border-bottom-color:var(--accent); background:transparent; color:var(--accent); }
  .view-tabs .view-tab-icon { display:flex; width:18px; }
  .view-tabs .upcoming-standalone-btn { display:none; }
  .content { max-width:none; padding:24px 16px 32px; gap:18px; }
  .workspace-heading { align-items:flex-start; flex-direction:column; gap:16px; }
  .workspace-heading h1,.clientele-page .clientele-list-heading { font-size:24px; }
  .workspace-heading .sales-department-switcher { width:100%; }
  .workspace-tools { width:100%; }
  .workspace-tools .sales-department-switcher { flex:1 1 160px; width:auto; min-width:0; }
  .workspace-tools .phone-reorder-toggle { min-height:44px; }
  .workspace-tools .guest-list-tools { flex:1; }
  .workspace-tools .guest-list-tools label { flex:1; }
  .workspace-tools .guest-list-tools select { width:100%; min-width:0; font-size:16px; }
  .workspace-tools .guest-list-tools label > span { display:none; }
  .guest-waiting-strip { margin:16px 16px 0; padding:10px 12px; font-size:12px; flex-direction:row; align-items:center; min-height:44px; width:auto; }
  .guest-strip-cta { font-size:0; gap:0 !important; }
  .guest-strip-cta svg { width:18px; height:18px; }
  .bottom-bar { padding:8px 12px calc(8px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); gap:6px; }
  .bottom-btn { min-height:46px; gap:2px; border-radius:8px; }
  .bottom-btn-label { font-size:10px; }
  .app-product-meta { padding:0 16px calc(92px + env(safe-area-inset-bottom)); font-size:10px; }
  :is(.btn-sm,.btn-submit,.btn-cancel,.btn-danger,.btn-take-up,.btn-change-status,.btn-return,.btn-restore,.btn-closeout,.btn-phone-sale,.btn-close) { min-height:44px; }
  input:not([type=checkbox]):not([type=radio]),select,textarea { font-size:16px; min-height:44px; }
  .login-gate .admin-login-link { min-height:44px; }
  .next-up-card:not(.empty) { padding:18px; gap:16px; }
  .next-up-name { font-size:22px; }
  .rep-card { padding:14px 12px; gap:10px; min-height:72px; }
  .rep-card .avatar { width:30px; height:30px; font-size:11px; }
  .rep-name { font-size:14px; }
  .queue-position { min-width:18px; }
  .waiting-change-status { min-height:44px; padding:8px 12px; }
  .rep-card.with-cust { flex-wrap:wrap; }
  .rep-card.with-cust .rep-actions { margin-left:auto; }
  .rep-card.with-cust .rotation-action-column { margin-left:0; }
  .clientele-page,.app-shell .clientele-page { gap:16px; }
  .clientele-page .clientele-hero { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:14px 8px; }
  .clientele-page .clientele-hero-actions { display:contents; }
  .clientele-page .clientele-hero-actions .clientele-add { margin:0; width:auto; grid-column:2; grid-row:1; justify-self:end; }
  .clientele-page .clientele-hero-actions .clientele-upcoming-btn { grid-column:1/-1; grid-row:2; width:100%; }
  .clientele-page:not(.office-appointments-page) .clientele-hero-actions > button:not(.clientele-add) { grid-row:2; width:100%; }
  .clientele-page:not(.office-appointments-page) .clientele-hero-actions > button:not(.clientele-add):not(.clientele-upcoming-btn) { grid-row:3; }
  .clientele-page .clientele-hero-actions > button { font-size:12px; padding:10px; }
  .clientele-page .clientele-summary > button { flex-direction:column; gap:2px; padding:8px 3px; min-width:0; }
  .clientele-page .clientele-summary strong { font-size:18px; }
  .clientele-page .clientele-summary span { font-size:10px; }
  .clientele-page .clientele-filter-toggle { display:flex; min-height:44px; padding:10px 12px; color:var(--ink-muted); background:var(--surface-base); }
  .app-shell .clientele-page .clientele-filters,.app-shell .clientele-page .clientele-filters:not(:has(.sales-team-filter)) { display:none; grid-template-columns:minmax(0,1fr); }
  .app-shell .clientele-page .clientele-filters.phone-expanded { display:grid; }
  .clientele-page :is(input:not([type=checkbox]),select,textarea) { font-size:16px; }
  .office-appointment-controls { grid-template-columns:minmax(0,1fr); }
  .clientele-page .clientele-card { grid-template-columns:minmax(0,1fr); gap:16px; padding:18px 16px; }
  .clientele-page .clientele-card-head { gap:8px; }
  .clientele-page .clientele-card-head h2 { font-size:16px; }
  .clientele-page .clientele-detail-icon { min-width:44px; min-height:44px; margin-top:-6px; padding:10px; }
  .clientele-page .clientele-identity-contact { gap:3px; }
  .clientele-page .clientele-contact-meta { font-size:12px; }
  .clientele-page .clientele-card-actions { grid-column:auto; }
  .clientele-page .clientele-card-actions .btn-sm { min-height:44px; font-size:13px; }
  .clientele-page .clientele-actions-toggle { background:transparent; border-color:var(--line); }
  .clientele-page .clientele-workflow-actions { flex-direction:column; align-items:stretch; }
  .clientele-page .clientele-primary-action-row { flex-direction:column; }
  .clientele-page .clientele-contact-actions { display:grid; width:100%; }
  .clientele-page .clientele-scheduling-actions { margin:0; display:grid; width:100%; }
  .clientele-page .clientele-more { align-self:stretch; }
  .clientele-page .clientele-more-menu { box-shadow:none; }
  .clientele-page .appointment-agenda-head { padding:11px 12px; }
  .clientele-page .appointment-agenda-head > div { align-items:flex-start; flex-direction:column; gap:2px; }
  .clientele-page .appointment-agenda-list > button { padding:10px 12px; }
  .clientele-page .appointment-timing { display:none; }
  .clientele-page .appointment-agenda.is-collapsed { display:grid; grid-template-columns:minmax(130px,.8fr) minmax(0,1fr); }
  .clientele-page .appointment-agenda.is-collapsed .appointment-agenda-head { gap:4px; }
  .clientele-page .appointment-agenda.is-collapsed .appointment-agenda-head strong { font-size:11px; }
  .clientele-page .appointment-agenda.is-collapsed .appointment-agenda-toggle { font-size:0; }
  .clientele-page .appointment-agenda.is-collapsed .appointment-agenda-list > button { display:flex; flex-wrap:wrap; align-content:center; gap:2px 6px; border:0; border-left:1px solid var(--line); height:100%; width:100%; }
  .clientele-page .appointment-agenda.is-collapsed .appointment-agenda-list > button:not(:first-child) { display:none; }
  .clientele-page .appointment-agenda.is-collapsed .appointment-time { font-size:11px; }
  .clientele-page .appointment-agenda.is-collapsed .appointment-person { flex:1 1 100%; min-width:0; width:100%; }
  .clientele-page .appointment-agenda.is-collapsed .appointment-person :is(strong,small) { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .modal,.modal.manager-panel { border-radius:16px 16px 0 0; }
  .modal-header { padding:14px 18px; }
  .modal-body { padding:18px; }
  .modal-footer { padding:14px 18px calc(14px + env(safe-area-inset-bottom)); }
  .modal-footer .btn-submit,.modal-footer .btn-cancel { flex:1; min-width:0; }
  .manager-phone-tabs { gap:8px; }
  .manager-phone-tabs button { flex:1; font-size:12px; padding:10px 3px; }
  .guest-card .guest-secondary-actions { width:100%; margin-left:0; }
  .guest-card .guest-secondary-actions > button,body.light .guest-card .guest-secondary-actions > button { min-height:44px; flex:1; }
  .guest-card .guest-contact-actions { flex:1; }
  .guest-card .guest-contact-actions > button { flex:1; }
  .stat-card,.stat-card.primary { padding:16px 12px; }
  .stat-value { font-size:24px; }
  .stat-label { font-size:11px; }
  .floor-sales-manager-row { flex-wrap:wrap; padding:16px; }
  .floor-sales-manager-row .manager-roster-actions { margin-left:auto; }
  .login-gate-card { padding:26px 22px; }
  .checkin-shell { padding:20px 16px; }
  .checkin-card { min-height:0; padding:24px 20px; }
}
@media (max-width:359px) {
  .view-tabs { gap:8px; }
  .view-tabs .view-tab { font-size:12px; }
  .view-tabs .view-tab-icon { display:none; }
  .modal .guest-form-row { grid-template-columns:minmax(0,1fr); }
  .clientele-page .clientele-summary span { font-size:9px; letter-spacing:-.1px; white-space:nowrap; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* Mineral Current: optically refined approved Q with a lighter live wordmark. */
.brand-wordmark { display:inline-flex; align-items:center; font-weight:500; letter-spacing:-1.5px; }
.brand-wordmark .brand-mark { width:1.25em; height:1.25em; margin-left:-.14em; margin-right:-.14em; }
.header-title { font-weight:500; }
.header-title .brand-wordmark { font-size:24px; letter-spacing:-.8px; }
.header-left > .brand-mark { display:none; }
body { color-scheme:dark; }
body.light { color-scheme:light; }
body.app-authenticated,body.light.app-authenticated { background:var(--surface-canvas); }
.section { box-shadow:none; }
.workspace-heading h1,.clientele-page .clientele-list-heading { font-weight:600; }
.next-up-card:not(.empty),body.light .next-up-card:not(.empty) {
  background:var(--accent-strong); border-color:var(--accent-strong); border-radius:12px;
}
.next-up-card:not(.empty) .next-up-name,
body.light .next-up-card:not(.empty) .next-up-name,
.next-up-card:not(.empty) .next-up-label { color:#fff; }
.next-up-card:not(.empty) .next-up-label { text-transform:none; letter-spacing:0; font-size:12px; }
.next-up-card:not(.empty) .btn-take-up { background:#fff; color:#285b7e; border-color:#fff; }
.next-up-card:not(.empty) .btn-take-up:hover { background:#eaf1f5; }
.next-up-card:not(.empty) .btn-change-status { background:transparent; color:#fff; border-color:#b7d0e0; }
.next-up-card:not(.empty) .btn-change-status:hover { background:#214d6a; }
.next-up-card:not(.empty) :focus-visible { outline-color:#fff; }
.section.rotation-queue-continuation { border:0; background:transparent; border-radius:0; }
.app-shell .content-rotation > .rotation-queue-continuation { margin-top:0; }
.rotation-queue-continuation .rep-card,
body.light .rotation-queue-continuation .rep-card.is-phone { background:transparent; }
.rotation-queue-continuation .queue-position {
  display:flex; align-items:center; justify-content:center; width:30px; height:30px;
  flex:none; border-radius:50%; background:var(--accent-soft); color:var(--accent); font-weight:600;
}
.rep-card.with-cust { border-left:3px solid var(--success); }
.rep-card.off-floor { border-left:3px solid var(--warning); }
.appointment-strip { background:var(--accent-soft); border-color:var(--line); border-radius:10px; }
.clientele-page .clientele-summary { background:var(--accent-soft); border:0; border-radius:10px; padding:4px; }
.clientele-page .clientele-summary > button { border-radius:7px; }
.clientele-page .clientele-summary > button.active { background:var(--surface-base); }
.clientele-page .appointment-agenda { border-radius:10px; }
.clientele-page .appointment-agenda-head { background:var(--accent-soft); }
.stat-card.primary { border-top:3px solid var(--accent); }
.modal-body { overscroll-behavior:contain; }
@media (min-width:768px) {
  .app-shell .view-tabs,.app-shell .bottom-bar { background:#2b6287; border-right:0; }
  .app-shell .view-tabs::before { color:#d4e3ee; }
  .app-shell .view-tab,.app-shell .bottom-btn,
  .app-shell .view-tab.active.is-background-view { color:#fff; }
  body.light .app-shell .view-tab { color:#fff; }
  .app-shell .view-tab.active,.app-shell .view-tab:hover,
  .app-shell .bottom-btn:hover,.app-shell .bottom-btn.manager-selected {
    background:#214d6a; color:#fff;
  }
  .app-shell .view-tabs .tab-count { background:#fff; color:#285b7e; }
  .app-shell .view-tabs :focus-visible,.app-shell .bottom-bar :focus-visible { outline-color:#fff; }
  .app-shell .upcoming-standalone-btn { border-top-color:#7196ae; }
  .app-shell .view-tabs { padding-bottom:180px; }
}
@media (max-width:767px) {
  .view-tabs { position:relative; top:auto; gap:4px; }
  .view-tabs .view-tab { white-space:normal; font-size:.8125rem; }
  .view-tabs .view-tab.active { background:var(--accent-soft); border-radius:8px 8px 0 0; }
  .header-title { font-size:1.125rem; }
  .rep-name { font-size:.9375rem; }
  .rep-info,.next-up-copy { min-width:0; }
  .next-up-name,.rep-name { overflow-wrap:anywhere; }
  .clientele-page .clientele-summary span { font-size:.6875rem; }
  .clientele-page .clientele-hero { grid-template-columns:minmax(0,1fr) auto; }
}