/* ── hyCRM v1.1 ─────────────────────────────────────────────────────────── */

/* Design tokens — all backed by CSS vars */
:root{
  --crm-ink:var(--text);
  --crm-ink-dim:var(--muted);
  --crm-glass:color-mix(in srgb,var(--bg-card) 55%,transparent);
  --crm-glass-border:color-mix(in srgb,var(--accent) 16%,transparent);
  --retail-color:var(--accent);
  --retail-dim:color-mix(in srgb,var(--accent) 15%,transparent);
  --wholesale-color:var(--info);
  --wholesale-dim:color-mix(in srgb,var(--info) 15%,transparent);
  --missing-color:var(--warning);
  --missing-dim:color-mix(in srgb,var(--warning) 15%,transparent);
  --issue-color:var(--danger);
  --issue-dim:color-mix(in srgb,var(--danger) 15%,transparent);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg-deep);
  color:var(--crm-ink);
  font-family:var(--font-ios,-apple-system,BlinkMacSystemFont,system-ui,sans-serif);
  min-height:100vh;min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.wrap{
  max-width:900px;margin:0 auto;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 12px calc(env(safe-area-inset-bottom,0px) + 96px);
}

/* ── Topbar ─────────────────────────────────────────────────────────────── */
.topbar{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.topbar .brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:17px;color:var(--accent)}
.topbar .brand iconify-icon{color:var(--accent)}
.spacer{flex:1}
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;border-radius:14px;cursor:pointer;
  background:var(--crm-glass);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border:.5px solid var(--crm-glass-border);color:var(--accent);
  transition:transform .2s cubic-bezier(.2,.9,.3,1);
}
.icon-btn:active{transform:scale(.94)}
.store-select{
  width:auto;min-width:180px;max-width:260px;
  background:color-mix(in srgb,var(--bg-deep) 92%,transparent);
  border:.5px solid var(--crm-glass-border);
  border-radius:14px;min-height:44px;font-size:16px;font-family:inherit;
  color:var(--crm-ink);padding:11px 13px;outline:none;
}
@media(max-width:480px){
  .topbar .brand .brand-label{display:none}
  .store-select{order:3;flex-basis:100%;min-width:0;max-width:none;width:100%}
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card{
  background:var(--crm-glass);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border:.5px solid var(--crm-glass-border);border-radius:18px;padding:16px;margin-bottom:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 24px rgba(0,0,0,.4);
  overflow:hidden;
}
.card h2{font-size:14px;margin:0 0 12px;display:flex;align-items:center;gap:8px;color:var(--accent);letter-spacing:.02em;flex-wrap:wrap}
.card h2 .sub{margin-left:auto;font-size:11px;color:var(--crm-ink-dim);font-weight:500}
.muted{color:var(--crm-ink-dim);font-size:13px}

/* ── KPI grid ───────────────────────────────────────────────────────────── */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.kpi{background:color-mix(in srgb,var(--text) 4%,transparent);border:.5px solid var(--crm-glass-border);border-radius:14px;padding:12px;min-width:0}
.kpi .v{font-size:20px;font-weight:900;color:var(--accent);line-height:1;word-break:break-all}
.kpi .l{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--crm-ink-dim);margin-top:6px}
.kpi.warn .v{color:var(--issue-color)}
.kpi.info .v{color:var(--wholesale-color)}
.kpi.miss .v{color:var(--missing-color)}

/* ── Bottom tab bar ─────────────────────────────────────────────────────── */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  display:flex;gap:2px;padding:8px 10px calc(env(safe-area-inset-bottom,0px) + 8px);
  background:color-mix(in srgb,var(--bg-deep) 78%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);
  border-top:.5px solid var(--crm-glass-border);
}
.tabbar .tab{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  min-height:48px;justify-content:center;border:none;background:none;cursor:pointer;
  color:var(--crm-ink-dim);font-size:10px;font-weight:600;border-radius:12px;padding:4px;font-family:inherit;
}
.tabbar .tab iconify-icon{width:22px;height:22px}
.tabbar .tab.active{color:var(--accent);background:var(--accent-dim)}
.tabbar .tab .lbl{display:block}
@media(max-width:480px){.tabbar .tab .lbl{display:none}}
.screen{display:none}
.screen.active{display:block}

/* ── Forms ──────────────────────────────────────────────────────────────── */
select,input,textarea{
  font-size:16px;font-family:inherit;color:var(--crm-ink);
  background:color-mix(in srgb,var(--text) 5%,transparent);
  border:.5px solid var(--crm-glass-border);
  border-radius:12px;padding:11px 13px;outline:none;width:100%;min-height:44px;
}
select:focus,input:focus,textarea:focus{border-color:var(--accent)}
select{background:color-mix(in srgb,var(--bg-deep) 92%,transparent)}
textarea{min-height:90px;resize:vertical}
.fld{margin-bottom:12px}
.fld label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--crm-ink-dim);margin-bottom:5px}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:42px;padding:10px 15px;border-radius:13px;cursor:pointer;
  font-size:14px;font-weight:600;font-family:inherit;
  border:.5px solid var(--accent-glow,color-mix(in srgb,var(--accent) 30%,transparent));
  background:var(--accent-dim,color-mix(in srgb,var(--accent) 12%,transparent));
  color:var(--accent);
  transition:transform .2s cubic-bezier(.2,.9,.3,1);
}
.btn:active{transform:scale(.97)}
.btn.ghost{background:transparent;border-color:var(--crm-glass-border);color:var(--crm-ink-dim)}
.btn.danger{border-color:var(--issue-color);background:var(--issue-dim);color:var(--issue-color)}
.btn.warn{border-color:var(--missing-color);background:var(--missing-dim);color:var(--missing-color)}
.btn.full{width:100%}
.btn.sm{min-height:34px;font-size:12px;padding:6px 11px;border-radius:10px;gap:5px}

/* ── Filter row ─────────────────────────────────────────────────────────── */
.filter-row{display:flex;gap:8px;margin-bottom:10px;align-items:center;flex-wrap:wrap}
.filter-row input{flex:1;min-width:120px}
.filter-row select{width:auto;min-width:120px;flex-shrink:0}
.customer-workspace{display:grid;gap:10px;margin-bottom:12px}
.customer-search-row{display:flex;gap:8px;align-items:center}
.customer-search{display:flex;align-items:center;gap:8px;flex:1;min-width:0;padding:0 12px;border:.5px solid var(--crm-glass-border);border-radius:13px;background:color-mix(in srgb,var(--text) 5%,transparent)}
.customer-search iconify-icon{color:var(--crm-ink-dim);flex-shrink:0}
.customer-search input{border:0;background:transparent;padding:10px 0;min-width:0}
.customer-search input:focus{border-color:transparent}
.customer-filter-panel{padding:10px;border:.5px solid var(--crm-glass-border);border-radius:14px;background:color-mix(in srgb,var(--text) 3%,transparent)}
.saved-views,.customer-filter-chips{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.workspace-label{font-size:10px;color:var(--crm-ink-dim);font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-right:2px}
.saved-view,.filter-chip,.reset-filters{min-height:30px;border-radius:999px;border:.5px solid var(--crm-glass-border);background:transparent;color:var(--crm-ink-dim);padding:4px 9px;font:600 11px/1 var(--font-ios,-apple-system,BlinkMacSystemFont,system-ui,sans-serif);cursor:pointer}
.saved-view:hover,.saved-view.active{border-color:var(--accent);background:var(--accent-dim,color-mix(in srgb,var(--accent) 12%,transparent));color:var(--accent)}
.filter-chip{display:inline-flex;align-items:center;gap:5px;background:color-mix(in srgb,var(--accent) 10%,transparent);border-color:color-mix(in srgb,var(--accent) 35%,transparent);color:var(--accent)}
.filter-chip span{font-size:15px;line-height:9px}
.reset-filters{border-color:transparent;text-decoration:underline}
.customer-insights{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:0 0 12px}
.customer-insight{min-width:0;padding:8px;border:.5px solid var(--crm-glass-border);border-radius:11px;background:color-mix(in srgb,var(--text) 3%,transparent);color:var(--crm-ink-dim);font-size:10px;display:flex;gap:6px;align-items:center}
.customer-insight iconify-icon{color:var(--accent);flex-shrink:0}
.customer-insight strong{color:var(--crm-ink);font-size:13px}
.customer-review-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── Pills / chips ──────────────────────────────────────────────────────── */
.pill{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;font-size:10px;font-weight:700;white-space:nowrap}
.pill.ok{background:var(--accent-dim,color-mix(in srgb,var(--accent) 12%,transparent));color:var(--accent)}
.pill.warn{background:var(--issue-dim);color:var(--issue-color)}
.pill.miss{background:var(--missing-dim);color:var(--missing-color)}
.pill.dim{background:color-mix(in srgb,var(--text) 6%,transparent);color:var(--crm-ink-dim)}
.pill.proc{background:color-mix(in srgb,var(--info) 18%,transparent);color:var(--info)}
.pill.retail{background:var(--retail-dim);color:var(--retail-color)}
.pill.wholesale{background:var(--wholesale-dim);color:var(--wholesale-color)}
.store-chip{display:inline-block;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:600;border:.5px solid var(--crm-glass-border);color:var(--crm-ink-dim);margin:1px;white-space:nowrap}
.store-chip.pp{border-color:var(--retail-color);color:var(--retail-color);background:var(--retail-dim)}
.store-chip.mp{border-color:var(--wholesale-color);color:var(--wholesale-color);background:var(--wholesale-dim)}

/* ── Tables ─────────────────────────────────────────────────────────────── */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--crm-ink-dim);padding:6px 8px;border-bottom:.5px solid var(--crm-glass-border);position:sticky;top:0;background:color-mix(in srgb,var(--bg-deep) 60%,transparent)}
.tbl td{padding:9px 8px;border-bottom:.5px solid color-mix(in srgb,var(--text) 5%,transparent);vertical-align:middle}
.tbl tr.clickable{cursor:pointer}
.tbl tr.clickable:hover{background:color-mix(in srgb,var(--accent) 4%,transparent)}
.tbl tr.clickable:active{background:var(--accent-dim,color-mix(in srgb,var(--accent) 12%,transparent))}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.tbl .nm{font-weight:700;color:var(--crm-ink)}
.tbl .em{font-size:11px;color:var(--crm-ink-dim)}
.scroll-y{max-height:420px;overflow-y:auto;-webkit-overflow-scrolling:touch;overflow-x:hidden}
.scroll-x{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}

/* ── Pagination ─────────────────────────────────────────────────────────── */
.pager{display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap;margin-top:10px}
.pager button{min-width:34px;min-height:34px;padding:4px 9px;border:.5px solid var(--crm-glass-border);background:color-mix(in srgb,var(--text) 5%,transparent);color:var(--crm-ink);border-radius:10px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;transition:.15s}
.pager button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.pager button:disabled{opacity:.35;cursor:default}
.pager .pg-cur{background:var(--accent-dim,color-mix(in srgb,var(--accent) 12%,transparent));color:var(--accent);border-color:var(--accent)}
.pager .pg-ellipsis{padding:0 4px;color:var(--crm-ink-dim)}
.pg-meta{font-size:11px;margin:8px 2px 0;text-align:center;color:var(--crm-ink-dim)}
.customer-load-more{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;min-height:38px;margin-top:10px;text-align:center}
.customer-load-more .muted{font-size:11px}
.customer-page-picker{display:inline-flex;align-items:center;gap:6px;color:var(--crm-ink-dim);font-size:11px;white-space:nowrap}
.customer-page-picker select{width:auto;min-width:138px;min-height:34px;padding:5px 8px;font-size:12px}

/* ── Empty / loading ────────────────────────────────────────────────────── */
.empty{text-align:center;color:var(--crm-ink-dim);padding:34px 16px}
.empty iconify-icon{font-size:42px;color:var(--crm-glass-border);display:block;margin:0 auto 10px}
.empty .lead{font-size:15px;color:var(--crm-ink);font-weight:600;margin-bottom:4px}
.loading-line{height:14px;border-radius:7px;background:color-mix(in srgb,var(--text) 7%,transparent);margin:6px 0;animation:shimmer 1.4s infinite}
@keyframes shimmer{0%{opacity:.5}50%{opacity:1}100%{opacity:.5}}

/* ── Modals / drawers ───────────────────────────────────────────────────── */
.modal-bg{display:none;position:fixed;inset:0;z-index:600;background:color-mix(in srgb,var(--bg-deep) 70%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);align-items:flex-end;justify-content:center}
.modal-bg.open{display:flex}
.modal{
  width:100%;max-width:680px;max-height:92vh;overflow-y:auto;overflow-x:hidden;
  background:color-mix(in srgb,var(--bg-deep) 97%,transparent);
  border:.5px solid var(--accent-glow,color-mix(in srgb,var(--accent) 30%,transparent));
  border-radius:22px 22px 0 0;padding:20px 16px calc(env(safe-area-inset-bottom,0px) + 20px);
}
.modal h3{font-size:16px;margin:0 0 6px;display:flex;align-items:center;gap:8px;color:var(--accent)}
.modal-close{position:absolute;right:16px;top:16px}
.modal-section{margin-top:16px}
.modal-section h4{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--crm-ink-dim);margin:0 0 8px;display:flex;align-items:center;gap:6px}
.note{font-size:12px;color:var(--crm-ink-dim);background:color-mix(in srgb,var(--text) 4%,transparent);border:.5px solid var(--crm-glass-border);border-radius:12px;padding:10px 12px;margin:8px 0}

/* ── Toast ──────────────────────────────────────────────────────────────── */
.toast{position:fixed;left:50%;bottom:78px;transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;
  background:color-mix(in srgb,var(--bg-deep) 96%,transparent);
  border:.5px solid var(--accent);color:var(--crm-ink);padding:11px 16px;border-radius:13px;font-size:13px;z-index:700;transition:.25s;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{border-color:var(--issue-color);color:var(--issue-color)}

/* ── Identity badges ────────────────────────────────────────────────────── */
.id-card{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.id-card .avatar{width:54px;height:54px;border-radius:16px;background:var(--crm-glass);border:.5px solid var(--crm-glass-border);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900;color:var(--accent);flex-shrink:0}
.id-card .info{flex:1;min-width:160px}
.id-card .info .name{font-size:16px;font-weight:800;color:var(--crm-ink);margin-bottom:3px}
.id-card .info .email{font-size:12px;color:var(--crm-ink-dim);word-break:break-all}
.id-card .info .meta{font-size:11px;color:var(--crm-ink-dim);margin-top:4px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}

/* ── Timeline ───────────────────────────────────────────────────────────── */
.timeline{display:flex;flex-direction:column;gap:0}
.tl-item{display:flex;gap:12px;padding:8px 0;position:relative}
.tl-item:not(:last-child)::after{content:"";position:absolute;left:15px;top:32px;bottom:0;width:1px;background:var(--crm-glass-border)}
.tl-icon{width:30px;height:30px;border-radius:50%;background:var(--crm-glass);border:.5px solid var(--crm-glass-border);display:flex;align-items:center;justify-content:center;flex-shrink:0;z-index:1}
.tl-body{flex:1;min-width:0}
.tl-body .tl-what{font-size:13px;font-weight:600;color:var(--crm-ink)}
.tl-body .tl-when{font-size:11px;color:var(--crm-ink-dim);margin-top:2px}
.tl-body .tl-detail{font-size:12px;color:var(--crm-ink-dim);margin-top:3px}

/* ── Integrity check rows ───────────────────────────────────────────────── */
.check-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;border:.5px solid var(--crm-glass-border);background:color-mix(in srgb,var(--text) 3%,transparent);margin-bottom:8px;flex-wrap:wrap}
.check-row .check-icon{flex-shrink:0}
.check-row .check-body{flex:1;min-width:0}
.check-row .check-title{font-size:13px;font-weight:700;color:var(--crm-ink)}
.check-row .check-desc{font-size:11px;color:var(--crm-ink-dim);margin-top:2px}
.check-row.pass{border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.check-row.fail{border-color:var(--issue-color);background:var(--issue-dim)}
.check-row.warn{border-color:var(--missing-color);background:var(--missing-dim)}

/* ── Completion queue rows ──────────────────────────────────────────────── */
.cq-row{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;border:.5px solid var(--crm-glass-border);background:color-mix(in srgb,var(--text) 3%,transparent);margin-bottom:8px;flex-wrap:wrap}
.cq-row .cq-info{flex:1;min-width:140px}
.cq-row .cq-name{font-size:13px;font-weight:700;color:var(--crm-ink)}
.cq-row .cq-missing{font-size:11px;color:var(--missing-color);margin-top:3px}
.cq-row .cq-actions{display:flex;gap:6px;flex-shrink:0;flex-wrap:wrap}

/* ── Enrichment signal rows ─────────────────────────────────────────────── */
.sig-row{padding:12px;border-radius:14px;border:.5px solid var(--crm-glass-border);background:color-mix(in srgb,var(--text) 3%,transparent);margin-bottom:8px}
.sig-row .sig-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.sig-row .sig-field{font-size:12px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.05em}
.sig-row .sig-val{font-size:13px;color:var(--crm-ink)}
.sig-row .sig-meta{font-size:11px;color:var(--crm-ink-dim);margin-top:4px}
.conf-bar{height:6px;border-radius:3px;overflow:hidden;background:color-mix(in srgb,var(--text) 8%,transparent);margin:6px 0}
.conf-bar>i{display:block;height:100%;border-radius:3px;background:var(--accent)}

/* ── Automation / cadence rows ──────────────────────────────────────────── */
.auto-row{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;border:.5px solid var(--crm-glass-border);background:color-mix(in srgb,var(--text) 3%,transparent);margin-bottom:8px;flex-wrap:wrap}
.auto-row .auto-info{flex:1;min-width:120px}
.auto-row .auto-name{font-size:13px;font-weight:700;color:var(--crm-ink)}
.auto-row .auto-desc{font-size:11px;color:var(--crm-ink-dim);margin-top:2px}

/* ── Sheet menu ─────────────────────────────────────────────────────────── */
.sheet-menu{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.sheet-menu .btn{justify-content:flex-start}

/* ── Cross-store identity card ───────────────────────────────────────────── */
.xstore-card{padding:12px;border-radius:12px;border:.5px solid var(--crm-glass-border);background:color-mix(in srgb,var(--text) 3%,transparent);margin-bottom:8px}
.xstore-card .xs-store{font-size:12px;font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.xstore-card .xs-row{display:flex;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--crm-ink-dim)}

/* ── Confirm gate banner ─────────────────────────────────────────────────── */
.confirm-gate{background:var(--missing-dim);border:.5px solid var(--missing-color);border-radius:12px;padding:12px 14px;font-size:12px;color:var(--missing-color);margin:10px 0;display:flex;gap:10px;align-items:flex-start}
.confirm-gate iconify-icon{flex-shrink:0;margin-top:2px}

/* ── v2 additions: modal tabs, store chips, pipeline, lifecycle ─── */

/* Store chips — all 7 stores */
.store-chip.pe{border-color:#eab308;color:#eab308;background:color-mix(in srgb,#eab308 12%,transparent)}
.store-chip.ct{border-color:#a855f7;color:#a855f7;background:color-mix(in srgb,#a855f7 12%,transparent)}
.store-chip.bw{border-color:#f97316;color:#f97316;background:color-mix(in srgb,#f97316 12%,transparent)}
.store-chip.bd{border-color:#ec4899;color:#ec4899;background:color-mix(in srgb,#ec4899 12%,transparent)}
.store-chip.lb{border-color:#f43f5e;color:#f43f5e;background:color-mix(in srgb,#f43f5e 12%,transparent)}

/* Modal tab strip */
.crm-tab{
  padding:6px 12px;border-radius:8px;border:none;background:transparent;
  color:var(--crm-ink-dim);font-size:12px;font-weight:600;cursor:pointer;
  font-family:inherit;white-space:nowrap;transition:.15s;
}
.crm-tab:hover{color:var(--crm-ink);background:rgba(255,255,255,.05)}
.crm-tab.active{color:var(--accent);background:var(--accent-dim,color-mix(in srgb,var(--accent) 12%,transparent))}

/* Pipeline stage bars */
.pl-stage{cursor:pointer;transition:background .15s}
.pl-stage:hover{background:rgba(255,255,255,.06)!important}

/* Lifecycle chip colors (via pill variants) */
.pill.vip{background:color-mix(in srgb,#3ac9ff 18%,transparent);color:#3ac9ff}

/* Quick action bar */
.qa-bar{display:flex;gap:6px;flex-wrap:wrap;padding:10px 0}

/* Ticket rows in 360 */
.ticket-row{padding:10px 12px;border-radius:12px;border:.5px solid var(--crm-glass-border);background:rgba(255,255,255,.03);margin-bottom:6px}

/* System links button row */
.sys-links{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}

/* ── v3 additions ─────────────────────────────────────────────────────────── */

/* Task rows */
.task-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:.5px solid var(--crm-glass-border);background:color-mix(in srgb,var(--text) 3%,transparent);margin-bottom:6px;flex-wrap:wrap}
.task-row .task-info{flex:1;min-width:120px}
.task-row .task-subject{font-size:13px;font-weight:600;color:var(--crm-ink)}
.task-row .task-meta{font-size:11px;color:var(--crm-ink-dim);margin-top:2px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.task-row .task-actions{display:flex;gap:6px;flex-shrink:0}
.task-section-title{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--crm-ink-dim);margin:14px 0 6px;padding-bottom:4px;border-bottom:.5px solid var(--crm-glass-border)}

/* Task type icons */
.task-type-icon{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;flex-shrink:0}
.task-type-icon.call{background:color-mix(in srgb,var(--info) 15%,transparent);color:var(--info)}
.task-type-icon.email{background:var(--accent-dim,color-mix(in srgb,var(--accent) 12%,transparent));color:var(--accent)}
.task-type-icon.meeting{background:color-mix(in srgb,#a855f7 15%,transparent);color:#a855f7}
.task-type-icon.visit{background:color-mix(in srgb,#f97316 15%,transparent);color:#f97316}
.task-type-icon.demo{background:color-mix(in srgb,#22c55e 15%,transparent);color:#22c55e}

/* Due date badges */
.due-badge{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;white-space:nowrap}
.due-badge.overdue{background:var(--issue-dim);color:var(--issue-color)}
.due-badge.soon{background:var(--missing-dim);color:var(--missing-color)}
.due-badge.ok{background:var(--accent-dim,color-mix(in srgb,var(--accent) 12%,transparent));color:var(--accent)}

/* Owner / assignee chip */
.owner-chip{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;font-size:10px;font-weight:800;flex-shrink:0;border:.5px solid var(--crm-glass-border);cursor:default}
.owner-chip.unassigned{background:color-mix(in srgb,var(--text) 6%,transparent);color:var(--crm-ink-dim);cursor:pointer}
.owner-chip.unassigned:hover{border-color:var(--accent);color:var(--accent)}

/* Follow-up badge */
.touch-badge{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:999px;font-size:10px;font-weight:600;white-space:nowrap}
.touch-badge.overdue{background:var(--issue-dim);color:var(--issue-color)}
.touch-badge.soon{background:var(--missing-dim);color:var(--missing-color)}
.touch-badge.future{background:var(--accent-dim,color-mix(in srgb,var(--accent) 10%,transparent));color:var(--accent)}

/* Account profile form */
.account-form{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
@media(max-width:480px){.account-form{grid-template-columns:1fr}}
.account-form .fld{margin-bottom:0}

/* Completion bar */
.completion-bar{height:6px;border-radius:3px;overflow:hidden;background:color-mix(in srgb,var(--text) 8%,transparent);margin:4px 0 10px}
.completion-bar>div{height:100%;border-radius:3px;background:var(--accent);transition:width .4s}
.completion-pct{font-size:11px;color:var(--crm-ink-dim);margin-bottom:2px}

/* Activity type / outcome chips */
.activity-type-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:10px;border:.5px solid var(--crm-glass-border);background:transparent;color:var(--crm-ink-dim);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:.15s;white-space:nowrap}
.activity-type-chip:hover,.activity-type-chip.active{border-color:var(--accent);color:var(--accent);background:var(--accent-dim,color-mix(in srgb,var(--accent) 12%,transparent))}
.outcome-chip{display:inline-flex;align-items:center;padding:4px 11px;border-radius:10px;border:.5px solid var(--crm-glass-border);background:transparent;color:var(--crm-ink-dim);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:.15s;white-space:nowrap}
.outcome-chip.active,.outcome-chip:hover{border-color:var(--info);color:var(--info);background:color-mix(in srgb,var(--info) 12%,transparent)}

/* Milestone bar */
.milestone-bar{height:8px;border-radius:4px;overflow:hidden;background:color-mix(in srgb,var(--text) 8%,transparent);margin:6px 0}
.milestone-bar>div{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--accent),var(--info));transition:width .5s}

/* Sequence cards */
.seq-card{padding:12px;border-radius:12px;border:.5px solid var(--crm-glass-border);background:color-mix(in srgb,var(--text) 3%,transparent);margin-bottom:8px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.seq-card .seq-info{flex:1;min-width:0}
.seq-card .seq-name{font-size:13px;font-weight:700;color:var(--crm-ink)}
.seq-card .seq-desc{font-size:11px;color:var(--crm-ink-dim);margin-top:2px}

/* Activity log items in timeline */
.tl-activity{border-left:2px solid var(--accent);padding-left:8px}
.tl-meeting{border-left:2px solid #a855f7;padding-left:8px}

/* Customer workspace: dense desktop records become readable mobile cards. */
@media(min-width:769px){
  #cust-tbl{table-layout:fixed}
  #cust-tbl th:nth-child(1){width:18%}
  #cust-tbl th:nth-child(2){width:9%}
  #cust-tbl th:nth-child(3){width:11%}
  #cust-tbl th:nth-child(4){width:9%}
  #cust-tbl th:nth-child(5),#cust-tbl th:nth-child(6){width:7%}
  #cust-tbl th:nth-child(7),#cust-tbl th:nth-child(8){width:7%}
  #cust-tbl th:nth-child(9){width:9%}
  #cust-tbl th:nth-child(10){width:11%}
  #cust-tbl td{overflow-wrap:anywhere}
}
@media(max-width:768px){
  .wrap{max-width:100%;padding-left:10px;padding-right:10px}
  .card{padding:13px}
  .customer-search-row{align-items:stretch}
  .customer-search-row>.btn{flex-shrink:0}
  .customer-filter-panel select{width:100%;min-width:0}
  .customer-insights{grid-template-columns:repeat(2,minmax(0,1fr))}
  .customer-insight{padding:7px}
  #screen-customers .scroll-y{max-height:none;overflow:visible}
  #cust-tbl,#cust-tbl tbody,#cust-tbl tr,#cust-tbl td{display:block;width:100%}
  #cust-tbl thead{display:none}
  #cust-tbl tbody{display:grid;gap:9px}
  #cust-tbl tr.customer-record{padding:12px;border:.5px solid var(--crm-glass-border);border-radius:14px;background:color-mix(in srgb,var(--text) 3%,transparent)}
  #cust-tbl tr.customer-record td{border:0;padding:4px 0;min-height:0;display:grid;grid-template-columns:minmax(74px,.6fr) minmax(0,1.4fr);gap:8px;align-items:center;text-align:left}
  #cust-tbl tr.customer-record td::before{content:attr(data-label);font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--crm-ink-dim)}
  #cust-tbl tr.customer-record td:first-child{display:block;padding:0 0 8px;margin-bottom:5px;border-bottom:.5px solid var(--crm-glass-border)}
  #cust-tbl tr.customer-record td:first-child::before{display:none}
  #cust-tbl tr.customer-record td:last-child{display:flex;justify-content:flex-end;padding-top:8px;margin-top:5px;border-top:.5px solid var(--crm-glass-border)}
  #cust-tbl tr.customer-record td:last-child::before{margin-right:auto;align-self:center}
  #cust-tbl .num{text-align:left}
  .modal,.scroll-y,.scroll-x{max-width:100%;overflow-x:hidden}
}


/* Additive operator-layout repairs */
.store-chip.geneos-company{cursor:pointer;font-family:inherit;background:color-mix(in srgb,var(--info) 12%,transparent);border-color:var(--info);color:var(--info)}
@media (min-width:1025px){.wrap{max-width:1540px;width:calc(100% - 64px);padding-left:0;padding-right:0}.card{padding:20px}.scroll-y{max-height:560px}}
@media (max-width:1024px){.wrap{max-width:none;width:calc(100% - 40px);padding-left:0;padding-right:0}.card{padding:16px}.tbl th,.tbl td{padding:8px 7px}.scroll-y{overflow-x:auto}}
@media (max-width:768px){.wrap{width:100%;padding:calc(env(safe-area-inset-top,0px) + 10px) 16px calc(env(safe-area-inset-bottom,0px) + 100px)}.filter-row{display:grid;grid-template-columns:1fr 1fr}.filter-row input{grid-column:1/-1;min-width:0}.filter-row select{width:100%;min-width:0}.customer-search-row .btn,.filter-row .btn{min-height:44px}.scroll-y{max-height:none;overflow:visible}.scroll-y .tbl,.scroll-y .tbl tbody,.scroll-y .tbl tr,.scroll-y .tbl td{display:block;width:100%}.scroll-y .tbl thead{display:none}.scroll-y .tbl tr{margin:0 0 10px;padding:10px;border:.5px solid var(--crm-glass-border);border-radius:14px;background:color-mix(in srgb,var(--text) 3%,transparent)}.scroll-y .tbl td{display:flex;justify-content:space-between;gap:12px;padding:8px 2px;border:0;text-align:right}.scroll-y .tbl td::before{content:attr(data-label);color:var(--crm-ink-dim);font-size:10px;font-weight:700;letter-spacing:.06em;text-align:left;text-transform:uppercase}.customer-insights{grid-template-columns:repeat(2,minmax(0,1fr))}.tabbar{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 10px)}}
@media (max-width:768px){#ord-tbl td:nth-child(1)::before{content:"Order ID"}#ord-tbl td:nth-child(2)::before{content:"Customer"}#ord-tbl td:nth-child(3)::before{content:"Store"}#ord-tbl td:nth-child(4)::before{content:"Total"}#ord-tbl td:nth-child(5)::before{content:"Payment"}#ord-tbl td:nth-child(6)::before{content:"Status"}#ord-tbl td:nth-child(7)::before{content:"Date"}}