/* ════════════════════════════════════════════════════════════════════════
   OrdersBrowser — shared, theme-agnostic, searchable/filterable/paginated
   EXPANDABLE order list. Used by store-hud.html, store-hud-solo.html,
   sales.html, and store-admin.html so every Pure/Micro order surface reads
   the same. All colors flow through --obx-* tokens that default to the
   Hypatia theme vars (var(--accent)…) with literal fallbacks, so it works on
   the dark HUD/SalesOS pages AND (via .obx-light) the light store-admin page.
   Scoped under .obx to avoid colliding with host-page CSS.
   ════════════════════════════════════════════════════════════════════════ */
.obx{
  --obx-accent: var(--accent, #00ffa3);
  --obx-gold:   var(--warning, #fad015);
  --obx-red:    var(--danger, #ff4d6d);
  --obx-blue:   var(--info, #3ac9ff);
  --obx-purple: var(--purple, #b47aff);
  --obx-text:   var(--text, #e8fff6);
  --obx-muted:  var(--muted, var(--text-dim, rgba(200,255,240,.6)));
  --obx-border: var(--border, rgba(255,255,255,.12));
  --obx-surface:var(--bg-surface, rgba(255,255,255,.04));
  --obx-card:   var(--bg-card, var(--bg-surface, rgba(255,255,255,.03)));
  --obx-input:  var(--input-bg, rgba(0,0,0,.25));
  --obx-hover:  var(--accent-dim, rgba(0,255,163,.08));
  font-family:inherit;color:var(--obx-text);
}
/* Light-mode remap for the store-admin page (white surfaces, dark text). */
.obx.obx-light{
  --obx-accent:var(--primary, #1E40AF); --obx-gold:var(--accent, #B45309); --obx-red:#B91C1C; --obx-blue:var(--primary, #0369A1);
  --obx-purple:#7C3AED; --obx-text:#0F172A; --obx-muted:#64748B;
  --obx-border:#E2E8F0; --obx-surface:#F8FAFC; --obx-card:#FFFFFF;
  --obx-input:#FFFFFF; --obx-hover:#F1F5F9;
}
.obx *{box-sizing:border-box;}
.obx iconify-icon{display:inline-block;vertical-align:-.125em;}

/* ── Toolbar: search + filters + sort ── */
.obx-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px;}
.obx-search{position:relative;flex:1 1 220px;min-width:160px;display:flex;align-items:center;}
.obx-search iconify-icon{position:absolute;left:10px;color:var(--obx-muted);font-size:16px;pointer-events:none;}
.obx-search input{width:100%;padding:8px 10px 8px 32px;border-radius:9px;border:1px solid var(--obx-border);
  background:var(--obx-input);color:var(--obx-text);font-size:13px;font-family:inherit;outline:none;}
.obx-search input:focus{border-color:var(--obx-accent);}
.obx-sel{padding:8px 10px;border-radius:9px;border:1px solid var(--obx-border);background:var(--obx-input);
  color:var(--obx-text);font-size:12px;font-family:inherit;outline:none;cursor:pointer;max-width:170px;}
.obx-sel:focus{border-color:var(--obx-accent);}
.obx-chip{display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border-radius:999px;border:1px solid var(--obx-border);
  background:var(--obx-surface);color:var(--obx-muted);font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;
  white-space:nowrap;transition:.15s;}
.obx-chip:hover{border-color:var(--obx-gold);color:var(--obx-text);}
.obx-chip.active{border-color:var(--obx-gold);color:var(--obx-gold);background:color-mix(in srgb,var(--obx-gold) 14%,transparent);}
.obx-chip .obx-chip-n{font-size:10px;opacity:.85;}
.obx-count{font-size:11px;color:var(--obx-muted);margin-left:auto;white-space:nowrap;align-self:center;}
/* ── Date range filter row ── */
.obx-daterow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:6px 2px 8px;border-bottom:1px solid var(--obx-border);margin-bottom:10px;}
.obx-date{padding:6px 9px;border-radius:9px;border:1px solid var(--obx-border);background:var(--obx-input);
  color:var(--obx-text);font-size:12px;font-family:inherit;outline:none;cursor:pointer;}
.obx-date:focus{border-color:var(--obx-accent);}
.obx-light .obx-date{color-scheme:light;}

/* ── List + rows ── */
.obx-list{display:flex;flex-direction:column;gap:6px;}
.obx-row{border:1px solid var(--obx-border);border-radius:11px;background:var(--obx-card);overflow:hidden;
  animation:obx-fadein .25s ease both;transition:border-color .15s,box-shadow .15s,opacity .3s,transform .3s;}
/* awaiting + confident: strong green glow — safe to mark paid immediately */
.obx-row.confident{border-left:4px solid var(--obx-accent);background:color-mix(in srgb,var(--obx-accent) 4%,var(--obx-card));animation:obx-fadein .25s ease both,obx-conf-glow 2.4s ease-in-out infinite;}
/* awaiting + ambiguous: gold pulse — needs manual review before clearing */
.obx-row.ambiguous{border-left:4px solid var(--obx-gold);background:color-mix(in srgb,var(--obx-gold) 4%,var(--obx-card));animation:obx-fadein .25s ease both,obx-ambi-glow 2.4s ease-in-out infinite;}
@keyframes obx-conf-glow{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--obx-accent) 30%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--obx-accent) 18%,transparent);}
  50%{box-shadow:0 0 18px 4px color-mix(in srgb,var(--obx-accent) 30%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--obx-accent) 24%,transparent);}
}
@keyframes obx-ambi-glow{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--obx-gold) 28%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--obx-gold) 16%,transparent);}
  50%{box-shadow:0 0 16px 4px color-mix(in srgb,var(--obx-gold) 28%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--obx-gold) 22%,transparent);}
}
.obx-row.removing{opacity:0;transform:translateX(40px);}
.obx-head{display:grid;grid-template-columns:24px 18px minmax(180px,1fr) minmax(150px,auto) minmax(70px,auto) minmax(180px,auto);grid-template-areas:"select caret who meta value act";gap:12px;align-items:center;
  padding:12px 14px;cursor:pointer;}
.obx-head:hover{background:var(--obx-hover);}
.obx-caret{color:var(--obx-muted);font-size:18px;font-weight:700;transition:transform .2s;flex-shrink:0;line-height:1;}
.obx-caret{grid-area:caret;}
.obx-row-select,.obx-row-select-spacer{grid-area:select;}
.obx-who{grid-area:who;}.obx-meta{grid-area:meta;}.obx-value{grid-area:value;}.obx-head-actions{grid-area:act;}
.obx-row.expanded .obx-caret{transform:rotate(90deg);color:var(--obx-accent);}
.obx-who{min-width:0;}
.obx-name{font-size:13px;font-weight:700;color:var(--obx-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.obx-sub{font-size:10.5px;color:var(--obx-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px;}
.obx-value{display:flex;flex-direction:column;align-items:flex-end;gap:2px;white-space:nowrap;}
.obx-value strong{font-size:14px;line-height:1;color:var(--obx-gold);}
.obx-value span{font-size:10px;color:var(--obx-muted);font-weight:700;text-transform:uppercase;letter-spacing:.05em;}
.obx-head-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}

/* ── Pills ── */
.obx-pill{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:9px;font-weight:800;
  text-transform:uppercase;letter-spacing:.04em;border:1px solid;white-space:nowrap;line-height:1.5;}
.obx-pill.paid,.obx-pill.delivered{color:var(--obx-accent);border-color:color-mix(in srgb,var(--obx-accent) 45%,transparent);background:color-mix(in srgb,var(--obx-accent) 12%,transparent);}
.obx-pill.awaiting{color:var(--obx-gold);border-color:color-mix(in srgb,var(--obx-gold) 45%,transparent);background:color-mix(in srgb,var(--obx-gold) 13%,transparent);}
.obx-pill.refunded,.obx-pill.cancelled{color:var(--obx-red);border-color:color-mix(in srgb,var(--obx-red) 45%,transparent);background:color-mix(in srgb,var(--obx-red) 12%,transparent);}
.obx-pill.shipped,.obx-pill.processing{color:var(--obx-blue);border-color:color-mix(in srgb,var(--obx-blue) 45%,transparent);background:color-mix(in srgb,var(--obx-blue) 12%,transparent);}
.obx-pill.unfulfilled,.obx-pill.dim{color:var(--obx-muted);border-color:var(--obx-border);background:var(--obx-surface);}
.obx-pill.new{color:var(--obx-accent);border-color:color-mix(in srgb,var(--obx-accent) 50%,transparent);background:color-mix(in srgb,var(--obx-accent) 16%,transparent);}
.obx-pill.store-pure{color:var(--obx-accent);border-color:color-mix(in srgb,var(--obx-accent) 40%,transparent);background:color-mix(in srgb,var(--obx-accent) 10%,transparent);}
.obx-pill.store-micro{color:var(--obx-blue);border-color:color-mix(in srgb,var(--obx-blue) 40%,transparent);background:color-mix(in srgb,var(--obx-blue) 10%,transparent);}
.obx-age{display:inline-block;padding:2px 7px;border-radius:6px;font-size:9px;font-weight:800;white-space:nowrap;}
.obx-age.age-new{color:var(--obx-muted);background:var(--obx-surface);border:1px solid var(--obx-border);}
.obx-age.age-warn{color:var(--obx-gold);background:color-mix(in srgb,var(--obx-gold) 12%,transparent);border:1px solid color-mix(in srgb,var(--obx-gold) 40%,transparent);}
.obx-age.age-crit{color:var(--obx-red);background:color-mix(in srgb,var(--obx-red) 12%,transparent);border:1px solid color-mix(in srgb,var(--obx-red) 40%,transparent);}

/* ── Action buttons (dynamic mark-paid etc.) ── */
.obx-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:32px;padding:5px 11px;border-radius:8px;border:1px solid var(--obx-border);
  background:var(--obx-surface);color:var(--obx-text);font-size:10.5px;font-weight:700;cursor:pointer;font-family:inherit;
  white-space:nowrap;transition:.15s;}
.obx-btn:hover{border-color:var(--obx-accent);}
.obx-btn:disabled{opacity:.5;cursor:not-allowed;}
/* Confident mark-paid: strong green pulse — safe to clear immediately */
.obx-btn.mark{color:var(--obx-accent);border-color:color-mix(in srgb,var(--obx-accent) 70%,transparent);background:color-mix(in srgb,var(--obx-accent) 16%,transparent);font-weight:800;animation:obx-mark-pulse 2s ease-in-out infinite;}
.obx-btn.mark:hover{background:color-mix(in srgb,var(--obx-accent) 26%,transparent);animation:none;box-shadow:0 0 16px color-mix(in srgb,var(--obx-accent) 50%,transparent);}
@keyframes obx-mark-pulse{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--obx-accent) 50%,transparent);}
  50%{box-shadow:0 0 14px 5px color-mix(in srgb,var(--obx-accent) 35%,transparent);}
}
/* Review mark-paid: gold pulse — needs manual verification first */
.obx-btn.review{color:var(--obx-gold);border-color:color-mix(in srgb,var(--obx-gold) 70%,transparent);background:color-mix(in srgb,var(--obx-gold) 16%,transparent);font-weight:800;animation:obx-review-pulse 2s ease-in-out infinite;}
.obx-btn.review:hover{background:color-mix(in srgb,var(--obx-gold) 26%,transparent);animation:none;box-shadow:0 0 16px color-mix(in srgb,var(--obx-gold) 50%,transparent);}
@keyframes obx-review-pulse{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--obx-gold) 50%,transparent);}
  50%{box-shadow:0 0 14px 5px color-mix(in srgb,var(--obx-gold) 35%,transparent);}
}
/* Details button in row head */
.obx-btn-details{font-size:10px;padding:4px 9px;color:var(--obx-muted);border-color:var(--obx-border);opacity:.8;}
.obx-btn-details:hover{opacity:1;border-color:var(--obx-accent);color:var(--obx-accent);}
.obx-btn.danger{color:var(--obx-red);border-color:color-mix(in srgb,var(--obx-red) 50%,transparent);}
.obx-btn.blue{color:var(--obx-blue);border-color:color-mix(in srgb,var(--obx-blue) 50%,transparent);}
.obx-btn.refund{color:var(--obx-purple);border-color:color-mix(in srgb,var(--obx-purple) 50%,transparent);background:color-mix(in srgb,var(--obx-purple) 8%,transparent);}
.obx-btn.payment-link{color:var(--obx-blue);border-color:color-mix(in srgb,var(--obx-blue) 48%,transparent);background:color-mix(in srgb,var(--obx-blue) 8%,transparent);}
.obx-btn-delete{min-width:40px;}

/* ── Expandable detail panel (grid-rows 0fr→1fr for smooth height) ── */
.obx-expand{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease;}
.obx-row.expanded .obx-expand{grid-template-rows:1fr;}
.obx-expand-inner{overflow:hidden;}
.obx-detail{padding:4px 14px 14px;border-top:1px dashed var(--obx-border);}
.obx-flag-note{font-size:11px;color:var(--obx-gold);
  background:color-mix(in srgb,var(--obx-gold) 9%,transparent);border:1px solid color-mix(in srgb,var(--obx-gold) 30%,transparent);
  border-radius:8px;padding:8px 12px;margin:10px 0;line-height:1.6;}
.obx-row.confident .obx-flag-note{color:var(--obx-accent);background:color-mix(in srgb,var(--obx-accent) 7%,transparent);border-color:color-mix(in srgb,var(--obx-accent) 28%,transparent);}
/* Evidence line — always visible on awaiting rows, no expand needed */
.obx-evidence-line{padding:2px 14px 8px 36px;font-size:10.5px;line-height:1.5;}
.obx-row.confident .obx-evidence-line{color:color-mix(in srgb,var(--obx-accent) 85%,var(--obx-text));}
.obx-row.ambiguous .obx-evidence-line{color:var(--obx-gold);}
/* Gmail link in evidence line */
.obx-gmail-link{color:var(--obx-blue);text-decoration:none;font-weight:700;transition:.12s;}
.obx-gmail-link:hover{text-decoration:underline;color:color-mix(in srgb,var(--obx-blue) 80%,#fff);}
.obx-dgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px;}
.obx-progress{margin:10px 0 2px;padding:10px 12px;border:1px solid var(--obx-border);border-radius:10px;background:var(--obx-surface);}
.obx-progress .obx-dsec-lbl{margin-bottom:7px;}
.obx-timeline{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;}
.obx-timeline li{padding:18px 3px 0;text-align:center;font-size:10px;line-height:1.25;}
.obx-timeline li::before{left:50%;top:4px;transform:translateX(-50%);}
.obx-dsec-lbl{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--obx-muted);margin:0 0 5px;}
.obx-items{width:100%;border-collapse:collapse;font-size:11.5px;}
.obx-items td{padding:4px 6px;border-bottom:1px solid var(--obx-border);}
.obx-items td.r{text-align:right;color:var(--obx-gold);font-weight:700;white-space:nowrap;}
.obx-items tr:last-child td{border-bottom:none;}
.obx-kv{font-size:12px;line-height:1.7;}
.obx-kv b{color:var(--obx-text);}
.obx-timeline{list-style:none;padding:0;margin:0;}
.obx-timeline li{position:relative;padding:3px 0 3px 18px;font-size:11.5px;color:var(--obx-muted);}
.obx-timeline li::before{content:'';position:absolute;left:2px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--obx-border);}
.obx-timeline li.done{color:var(--obx-text);}
.obx-timeline li.done::before{background:var(--obx-accent);box-shadow:0 0 6px var(--obx-accent);}
.obx-progress .obx-timeline{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin:0;list-style:none;padding:0;}
.obx-progress .obx-timeline li{padding:18px 3px 0;text-align:center;font-size:10px;line-height:1.25;}
.obx-progress .obx-timeline li::before{left:50%;top:4px;transform:translateX(-50%);}
.obx-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;}
.obx-note-box{font-size:11.5px;color:var(--obx-text);background:var(--obx-surface);border:1px solid var(--obx-border);
  border-radius:8px;padding:8px 10px;margin-top:6px;white-space:pre-wrap;word-break:break-word;}

/* ── Pager ── */
.obx-pager{display:flex;gap:5px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:14px;}
.obx-page{min-width:32px;height:32px;padding:0 9px;border-radius:8px;border:1px solid var(--obx-border);background:var(--obx-surface);
  color:var(--obx-text);font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;
  justify-content:center;transition:.12s;}
.obx-page:hover:not(:disabled){border-color:var(--obx-accent);}
.obx-page.active{background:var(--obx-accent);border-color:var(--obx-accent);color:#021;}
.obx-page:disabled{opacity:.4;cursor:not-allowed;}
.obx-page-ell{color:var(--obx-muted);padding:0 2px;}

/* ── States ── */
.obx-empty,.obx-loading{text-align:center;padding:26px 14px;color:var(--obx-muted);font-size:12px;}
.obx-empty.good{color:var(--obx-accent);font-weight:700;}

@keyframes obx-fadein{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}

/* ── Mobile: rows collapse to a stacked, readable layout ── */
@media(max-width:720px){
  .obx-head{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"caret who value" "caret meta meta" "caret act act";row-gap:8px;padding:13px 14px;}
  .obx-caret{grid-area:caret;align-self:start;margin-top:2px;}
  .obx-who{grid-area:who;}
  .obx-value{grid-area:value;}
  .obx-head .obx-meta{grid-area:meta;display:flex;gap:5px;flex-wrap:wrap;align-items:center;}
  .obx-head-actions{grid-area:act;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px;scrollbar-width:none;}
  .obx-head-actions::-webkit-scrollbar{display:none;}
  /* Keep the one consequential action thumb-safe; compact navigation actions
     so the rail does not become a stack of equal-weight giant buttons. */
  .obx-head-actions .obx-btn{min-height:36px!important;flex:0 0 auto;padding:6px 10px;font-size:10px;}
  .obx-head-actions .obx-btn.mark,
  .obx-head-actions .obx-btn.review,
  .obx-head-actions .obx-btn.danger{min-height:44px!important;padding-inline:13px;font-size:10.5px;}
  .obx-head-actions .obx-btn.payment-link,
  .obx-head-actions .obx-btn-details{min-height:36px!important;min-width:36px;padding-inline:8px;}
  .obx-dgrid{grid-template-columns:1fr;}
  .obx-progress .obx-timeline{grid-template-columns:repeat(5,minmax(54px,1fr));overflow-x:auto;scrollbar-width:none;}
  .obx-progress .obx-timeline::-webkit-scrollbar{display:none;}
  .obx-sel{flex:1 1 calc(50% - 8px);max-width:none;}
}
/* Desktop keeps payment + fulfillment pills inline in the meta slot */
.obx-meta{display:flex;gap:5px;align-items:center;flex-wrap:wrap;}


/* ── Bulk selection (order admin only) ── */
.obx-select-all,.obx-row-select{display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:var(--obx-muted);font-size:11px;font-weight:700;white-space:nowrap;}
.obx-select-all input,.obx-row-select input{width:18px;height:18px;accent-color:var(--obx-accent);cursor:pointer;flex:0 0 auto;}
.obx-row-select{padding:3px;margin:-3px 0;}
.obx-bulk{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 12px;margin:0 0 10px;border:1px solid color-mix(in srgb,var(--obx-red) 40%,var(--obx-border));border-radius:10px;background:color-mix(in srgb,var(--obx-red) 7%,var(--obx-card));color:var(--obx-text);}
.obx-bulk strong{margin-right:auto;font-size:12px;}
@media(max-width:720px){.obx-select-all{min-height:44px}.obx-row-select{min-height:32px}.obx-bulk .obx-btn{min-height:44px;flex:1 1 140px;justify-content:center;}}

/* Orders UX remediation — selection state, density, and safe mobile reading. */
.obx-bulk[hidden]{display:none!important;}
.obx-row.expanded{min-height:0;}
.obx-row.expanded .obx-detail{padding-bottom:14px;}
.obx-dgrid{align-items:start;}
@media(max-width:720px){
  #panel-orders{padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))!important;}
  .obx-toolbar{gap:8px;}
  .obx-search{flex-basis:100%;}
  .obx-sel{min-height:44px;font-size:16px;}
  .obx-head{grid-template-columns:24px 18px minmax(0,1fr) auto;grid-template-areas:"select caret who total" "select caret meta meta" "select caret act act";padding:12px 14px;}
  .obx-row-select{grid-area:select;align-self:start;margin:1px 0 0;padding:0;min-height:44px;}
  .obx-caret{grid-area:caret;align-self:start;margin-top:5px;}
  /* Final cascade: only consequential actions retain a full thumb target. */
  .obx-head-actions .obx-btn{min-height:36px;flex:0 0 auto;justify-content:center;padding:6px 10px;font-size:10px;}
  .obx-head-actions .obx-btn.mark,
  .obx-head-actions .obx-btn.review,
  .obx-head-actions .obx-btn.danger{min-height:44px;padding-inline:13px;font-size:10.5px;}
  .obx-head-actions .obx-btn-details{min-width:36px;padding-inline:8px;}
  .obx-evidence-line{padding:5px 14px 10px 56px;line-height:1.55;}
  .obx-detail{padding:8px 14px 16px;}
  .obx-dgrid{gap:14px;}
  .obx-kv{line-height:1.65;overflow-wrap:anywhere;}
  .obx-items{font-size:12px;}
  .obx-bulk{position:sticky;top:0;z-index:4;box-shadow:0 8px 18px rgba(0,0,0,.08);}
}