/* ─────────────────────────────────────────────────────────────────
   Online Retail — redesigned Overview panel
   Spec: Obsidian › 02 Domain Modules › Online Retail › Online_Retail_Dashboard_Redesign
   Scoped under .or-overview to avoid leaking styles to other tabs.
   Uses existing theme tokens — no new CSS variables introduced.
   ───────────────────────────────────────────────────────────────── */

.or-overview { color: var(--app-text-primary, #E6EBFF); }

/* ---------- 1. AI briefing strip ---------- */
.or-brief {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  align-items: flex-start;
  background: linear-gradient(135deg,
    rgba(124, 92, 255, .18),
    rgba(79, 70, 229, .10) 45%,
    rgba(245, 158, 11, .10));
  border: 1px solid rgba(184, 204, 255, .24);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 18px;
  box-shadow: var(--surface-shadow-md, 0 16px 34px rgba(2, 5, 16, .28));
  position: relative;
  overflow: hidden;
}
.or-brief::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  pointer-events: none;
  background: conic-gradient(from 0deg,
    rgba(124, 92, 255, .45),
    rgba(245, 158, 11, .45),
    rgba(34, 211, 238, .45),
    rgba(124, 92, 255, .45));
  filter: blur(22px);
  opacity: .30;
  z-index: 0;
}
.or-brief > * { position: relative; z-index: 1; }
.or-brief .orb {
  width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #a9b3ff, #7c5cff 50%, #4f46e5 90%);
  box-shadow: 0 0 24px rgba(124, 92, 255, .55), inset 0 0 10px rgba(255, 255, 255, .22);
}
.or-brief .or-brief-label {
  font-size: 11px; font-weight: 700; color: #FBBF24;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 3px;
}
.or-brief .or-brief-text { font-size: 13.5px; line-height: 1.6; }
.or-brief .or-brief-text.is-empty { color: var(--app-text-muted, #9FB0D8); font-style: italic; }
.or-brief .or-brief-ts {
  font-size: 11px; color: var(--app-text-muted, #9FB0D8); margin-top: 6px;
}
.or-brief .or-brief-actions {
  display: flex; flex-direction: column; gap: 6px; min-width: 160px;
}
.or-brief .or-brief-actions .btn { justify-content: center; }

/* ---------- 2. Pipeline funnel ---------- */
.or-funnel {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.or-stage {
  position: relative;
  background: var(--surface-1, rgba(255, 255, 255, .03));
  border: 1px solid var(--border, rgba(184, 204, 255, .22));
  border-radius: 12px;
  padding: 14px 14px 12px;
  min-height: 92px;
  transition: transform .15s ease, border-color .15s ease;
  cursor: pointer;
}
.or-stage:hover {
  transform: translateY(-1px);
  border-color: rgba(184, 204, 255, .32);
}
.or-stage .or-stage-name {
  font-size: 11px;
  color: var(--app-text-muted, #9FB0D8);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
}
.or-stage .or-stage-count {
  font-size: 24px; font-weight: 700; margin-top: 4px; letter-spacing: -.5px;
}
.or-stage .or-stage-dwell {
  font-size: 11px; color: var(--app-text-muted, #9FB0D8); margin-top: 2px;
}
.or-stage.is-bottleneck {
  border-color: rgba(245, 158, 11, .55);
  background: linear-gradient(135deg, rgba(245, 158, 11, .16), rgba(245, 158, 11, .03));
  box-shadow: 0 0 0 1px rgba(245, 158, 11, .28), 0 10px 28px rgba(245, 158, 11, .10);
}
.or-stage.is-bottleneck .or-stage-count { color: #FBBF24; }
.or-callout {
  margin-top: 10px;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  border-radius: 10px;
  background: rgba(245, 158, 11, .12);
  border: 1px solid rgba(245, 158, 11, .30);
  font-size: 12.5px;
}
.or-callout .or-why {
  color: var(--app-text-muted, #9FB0D8);
  margin-left: auto;
  font-size: 11.5px;
}

/* ---------- 3. Channel health ---------- */
.or-channels {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.or-ch {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--surface-1, rgba(255, 255, 255, .03));
  border: 1px solid var(--border, rgba(184, 204, 255, .22));
  min-width: 220px;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease;
}
.or-ch:hover {
  transform: translateY(-1px);
  border-color: rgba(184, 204, 255, .32);
}
.or-ch .or-ch-logo {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .08);
  display: grid; place-items: center;
  font-weight: 700; font-size: 13px; letter-spacing: .3px;
  color: #fff;
}
.or-ch .or-ch-logo.shopify    { background: linear-gradient(135deg, #95bf47, #5e8e3e); }
.or-ch .or-ch-logo.amazon     { background: linear-gradient(135deg, #232f3e, #131921); color: #ff9900; }
.or-ch .or-ch-logo.ebay       { background: linear-gradient(135deg, #e53238, #0064d2); }
.or-ch .or-ch-logo.walmart    { background: linear-gradient(135deg, #0071ce, #004f9a); color: #ffc220; }
.or-ch .or-ch-logo.etsy       { background: linear-gradient(135deg, #f56400, #ba4a00); }
.or-ch .or-ch-logo.tiktok     { background: linear-gradient(135deg, #25f4ee, #fe2c55); color: #111; }
.or-ch .or-ch-logo.woocommerce{ background: linear-gradient(135deg, #7f54b3, #5d3a91); }
.or-ch .or-ch-logo.bigcommerce{ background: linear-gradient(135deg, #121118, #34313f); }

.or-ch .or-ch-mid { flex: 1; min-width: 0; }
.or-ch .or-ch-store { font-size: 13px; font-weight: 600; line-height: 1.2; }
.or-ch .or-ch-meta {
  font-size: 11px;
  color: var(--app-text-muted, #9FB0D8);
  display: flex; align-items: center; gap: 6px;
  margin-top: 2px;
}
.or-ch .or-dot { width: 8px; height: 8px; border-radius: 50%; }
.or-ch .or-dot.green { background: #2ecf8f; box-shadow: 0 0 6px #2ecf8f; }
.or-ch .or-dot.amber { background: #f5b14a; box-shadow: 0 0 6px #f5b14a; }
.or-ch .or-dot.red   { background: #ff5e6b; box-shadow: 0 0 6px #ff5e6b; }
.or-ch .or-errs {
  font-size: 10.5px;
  padding: 2px 6px;
  border-radius: 99px;
  background: rgba(255, 94, 107, .18);
  color: #ffb1b6;
  border: 1px solid rgba(255, 94, 107, .35);
}

/* ---------- 4. Work queue ---------- */
.or-queue-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.or-queue-head h2 { margin: 0; }
.or-queue-head .or-badge {
  background: rgba(255, 94, 107, .18);
  color: #ffb1b6;
  border: 1px solid rgba(255, 94, 107, .35);
  border-radius: 99px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
}
.or-queue-head .or-badge.is-clear {
  background: rgba(46, 207, 143, .14);
  color: #7df2bf;
  border-color: rgba(46, 207, 143, .38);
}
.or-queue-head .or-filters { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.or-chip {
  font-size: 11.5px;
  padding: 6px 11px;
  border-radius: 99px;
  border: 1px solid var(--border, rgba(184, 204, 255, .22));
  color: var(--app-text-muted, #9FB0D8);
  cursor: pointer;
  background: var(--surface-1, rgba(255, 255, 255, .03));
}
.or-chip:hover { color: var(--app-text-primary, #E6EBFF); }
.or-chip.is-active {
  color: #E6EBFF;
  background: rgba(124, 92, 255, .22);
  border-color: rgba(124, 92, 255, .5);
}

table.or-queue {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
table.or-queue th {
  text-align: left;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--app-text-muted, #9FB0D8);
  font-weight: 700;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, rgba(184, 204, 255, .22));
}
table.or-queue td {
  padding: 12px 12px;
  border-bottom: 1px solid rgba(184, 204, 255, .08);
  vertical-align: middle;
  font-size: 12.5px;
}
table.or-queue tr:hover td { background: rgba(255, 255, 255, .02); }

.or-prio {
  width: 4px; height: 28px;
  border-radius: 3px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
}
.or-prio.red   { background: #ff5e6b; box-shadow: 0 0 6px rgba(255, 94, 107, .6); }
.or-prio.amber { background: #f5b14a; }
.or-prio.blue  { background: #5aa6ff; }

.or-order-id { font-weight: 700; font-variant-numeric: tabular-nums; }
.or-sub { color: var(--app-text-muted, #9FB0D8); font-size: 11px; }

.or-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid;
}
.or-tag.fraud      { background: rgba(255, 94, 107, .14); border-color: rgba(255, 94, 107, .42); color: #ffb1b6; }
.or-tag.sla        { background: rgba(245, 158, 11, .14); border-color: rgba(245, 158, 11, .42); color: #f5cf94; }
.or-tag.payment    { background: rgba(245, 177, 74, .12); border-color: rgba(245, 177, 74, .38); color: #f2c78a; }
.or-tag.oversell   { background: rgba(176, 132, 255, .14); border-color: rgba(176, 132, 255, .42); color: #d4bcff; }
.or-tag.address    { background: rgba(90, 166, 255, .14); border-color: rgba(90, 166, 255, .42); color: #a8ccff; }
.or-tag.return     { background: rgba(46, 207, 143, .12); border-color: rgba(46, 207, 143, .38); color: #a1ebcb; }
.or-tag.chargeback { background: rgba(255, 94, 107, .14); border-color: rgba(255, 94, 107, .42); color: #ffb1b6; }

.or-clock-cell {
  font-variant-numeric: tabular-nums;
  color: var(--app-text-muted, #9FB0D8);
  font-size: 12px;
}
.or-clock-cell.hot  { color: #ffb1b6; }
.or-clock-cell.warn { color: #f5cf94; }

.or-ai-line {
  display: flex; align-items: flex-start; gap: 7px; max-width: 420px;
}
.or-ai-line .mi { font-size: 14px; color: #b084ff; margin-top: 1px; }
.or-ai-line .txt { color: #d7def7; }

.or-row-actions {
  display: flex; gap: 5px; justify-content: flex-end;
}
.or-row-actions .btn { padding: 5px 9px; font-size: 11.5px; border-radius: 7px; }

/* ---------- All-clear empty state ---------- */
.or-allclear {
  text-align: center;
  padding: 36px 20px;
  color: var(--app-text-muted, #9FB0D8);
}
.or-allclear .or-allclear-icon {
  font-size: 36px;
  color: #2ecf8f;
  margin-bottom: 8px;
}
.or-allclear h3 {
  color: var(--app-text-primary, #E6EBFF);
  margin: 0 0 4px;
  font-size: 16px;
}

/* ---------- 5. Legacy tabs demoted to Manage strip ---------- */
.or-manage {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.or-manage .or-manage-label {
  font-size: 11px;
  color: var(--app-text-muted, #9FB0D8);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-right: 6px;
}

/* ---------- Loading skeletons ---------- */
.or-skeleton {
  background: linear-gradient(90deg,
    rgba(184, 204, 255, .04),
    rgba(184, 204, 255, .10),
    rgba(184, 204, 255, .04));
  background-size: 200% 100%;
  animation: or-skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
}
@keyframes or-skeleton-shimmer {
  0%   { background-position: -150% 0; }
  100% { background-position: 150% 0; }
}

/* ---------- Compact mode for narrow windows ---------- */
@media (max-width: 1200px) {
  .or-funnel { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 860px) {
  .or-funnel { grid-template-columns: repeat(2, 1fr); }
  .or-brief { grid-template-columns: 1fr; }
  .or-brief .or-brief-actions { min-width: 0; }
}