/* Unsynced team store orders report. Shares the visual language of the
   web-analytics report (same surface, radii, and shadow scale). */

.uo-shell { display:grid; gap:16px; padding:22px; background:#f5f7fb; }

.uo-banner { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:12px 16px; border:1px solid #fde68a; border-radius:14px; background:#fffbeb; color:#92400e; font-size:13px; }
.uo-banner.ok { border-color:#a7f3d0; background:#ecfdf5; color:#047857; }
.uo-banner a { color:inherit; font-weight:800; }
.uo-banner-spacer { margin-left:auto; }

.uo-toolbar { display:grid; gap:14px; padding:16px 18px; border:1px solid #e2e8f0; border-radius:16px; background:#fff; box-shadow:0 8px 24px rgba(15,23,42,.04); }

/* Explicit tracks rather than a wrapping flex row: all six filters sit on one
   line, sized to their content, instead of leaving a ragged gap before the
   buttons. The custom-range variant adds From/To as an even 4x2. */
.uo-filters { display:grid; gap:12px 14px; align-items:end;
  grid-template-columns:minmax(170px,1.8fr) minmax(100px,.9fr) minmax(118px,1fr) minmax(136px,1.35fr) minmax(96px,.85fr) minmax(126px,1.1fr); }
.uo-toolbar.custom-range .uo-filters { grid-template-columns:repeat(4,minmax(140px,1fr)); }
.uo-filter { display:grid; gap:6px; min-width:0; }

/* Narrow viewports: fall back to an even auto grid, search kept double-width. */
@media (max-width:1200px) {
  .uo-filters, .uo-toolbar.custom-range .uo-filters { grid-template-columns:repeat(auto-fit,minmax(146px,1fr)); }
  .uo-filter.search { grid-column:span 2; }
}
.uo-filter label { color:#64748b; font-size:11px; font-weight:800; letter-spacing:.055em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.uo-filter input, .uo-filter select { width:100%; height:40px; padding:0 11px; border:1px solid #dbe3ee; border-radius:9px; background:#fff; color:#172033; font:inherit; font-size:13px; }
.uo-filter select { appearance:none; padding-right:30px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2364748b' d='M0 0h10L5 6z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 11px center; }
.uo-filter input:focus, .uo-filter select:focus { outline:3px solid rgba(79,70,229,.12); border-color:#818cf8; }

/* From/To only exist for a custom range; hidden they would otherwise sit greyed
   out taking two columns from the controls that are actually in use. */
.uo-range-field { display:none; }
.uo-toolbar.custom-range .uo-range-field { display:grid; }

.uo-toolbar-foot { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding-top:13px; border-top:1px solid #eef2f7; }
.uo-check { display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border:1px solid #dbe3ee; border-radius:999px; color:#475569; font-size:12px; font-weight:700; white-space:nowrap; cursor:pointer; }
.uo-check:hover { border-color:#a5b4fc; background:#f8faff; }
.uo-check input { margin:0; cursor:pointer; }
.uo-link-btn { padding:6px 4px; border:0; background:none; color:#64748b; font:inherit; font-size:12px; font-weight:700; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.uo-link-btn:hover { color:#4338ca; }
.uo-actions { display:flex; flex-wrap:wrap; gap:8px; margin-left:auto; }

.uo-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:12px; }
.uo-kpi { position:relative; padding:16px 17px; overflow:hidden; border:1px solid #e2e8f0; border-radius:16px; background:#fff; box-shadow:0 8px 24px rgba(15,23,42,.045); }
.uo-kpi::after { content:""; position:absolute; right:-25px; bottom:-34px; width:76px; height:76px; border-radius:50%; background:var(--kpi-glow,#e0e7ff); opacity:.7; }
.uo-kpi-label { color:#64748b; font-size:11px; font-weight:800; letter-spacing:.045em; text-transform:uppercase; }
.uo-kpi-value { position:relative; margin-top:9px; color:#15233a; font-size:27px; font-weight:850; line-height:1; letter-spacing:-.035em; }
.uo-kpi-note { position:relative; margin-top:8px; color:#64748b; font-size:12px; line-height:1.35; }

.uo-causes { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.uo-causes-label { margin-right:2px; color:#64748b; font-size:12px; font-weight:700; }
.uo-cause { display:inline-flex; align-items:center; gap:7px; padding:7px 11px; border:1px solid #dbe3ee; border-radius:999px; background:#fff; color:#475569; font-size:12px; font-weight:700; cursor:pointer; transition:border-color .15s ease, background .15s ease; }
.uo-cause:hover { border-color:#a5b4fc; background:#f8faff; }
.uo-cause.active { border-color:#818cf8; background:#eef2ff; color:#4338ca; }
.uo-cause b { color:#172033; font-weight:850; }

.uo-card { min-width:0; border:1px solid #e2e8f0; border-radius:16px; background:#fff; box-shadow:0 8px 24px rgba(15,23,42,.04); }
.uo-card-head { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:14px; padding:17px 18px 12px; }
.uo-card-head h3 { margin:0; color:#172033; font-size:15px; font-weight:850; }
.uo-card-head p { margin:4px 0 0; color:#64748b; font-size:12px; }

.uo-table-wrap { overflow:auto; border-top:1px solid #edf1f6; }
.uo-table { width:100%; border-collapse:collapse; font-size:13px; }
.uo-table th { position:sticky; top:0; z-index:1; padding:10px 14px; border-bottom:1px solid #dbe3ee; background:#f8fafc; color:#64748b; font-size:10px; font-weight:850; letter-spacing:.04em; text-align:left; text-transform:uppercase; white-space:nowrap; }
.uo-table td { padding:13px 14px; border-bottom:1px solid #edf1f6; color:#334155; vertical-align:top; }
.uo-table tbody tr { cursor:pointer; }
.uo-table tbody tr:hover td { background:#fafbff; }
.uo-table tbody tr.selected td { background:#f5f3ff; }
.uo-num { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }

.uo-order-id { color:#172033; font-size:13px; font-weight:850; }
.uo-sub { margin-top:3px; color:#8290a5; font-size:11.5px; }
.uo-sub.warn { color:#b45309; font-weight:700; }
.uo-strong { color:#172033; font-weight:750; }
.uo-muted { color:#94a3b8; }

.uo-pill { display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:999px; font-size:10.5px; font-weight:850; letter-spacing:.02em; white-space:nowrap; text-transform:uppercase; }
.uo-pill.high { background:#ecfdf5; color:#047857; }
.uo-pill.medium { background:#fffbeb; color:#b45309; }
.uo-pill.low { background:#f1f5f9; color:#64748b; }
.uo-pill.none { background:#fdf2f8; color:#9d174d; }
.uo-pill.sent { background:#ecfdf5; color:#047857; }
.uo-pill.failed { background:#fef2f2; color:#b42318; }
.uo-pill.skipped { background:#f1f5f9; color:#64748b; }
.uo-pill.pending { background:#eef2ff; color:#4338ca; }
.uo-pill.resolved { background:#ecfdf5; color:#047857; }
.uo-pill.kind-unknown { background:#f1f5f9; color:#64748b; }
.uo-pill.kind-bulk { background:#fff7ed; color:#c2410c; }

.uo-cause-tag { display:inline-block; padding:3px 8px; border-radius:7px; background:#fef2f2; color:#b42318; font-size:11.5px; font-weight:800; }
.uo-cause-tag.soft { background:#f1f5f9; color:#475569; }
.uo-code { display:inline-block; max-width:260px; overflow:hidden; padding:2px 6px; border-radius:5px; background:#f4f5f8; color:#334155; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }

.uo-row-actions { display:flex; gap:6px; justify-content:flex-end; }
.uo-icon-btn { padding:5px 9px; border:1px solid #dbe3ee; border-radius:8px; background:#fff; color:#475569; font-size:11.5px; font-weight:750; cursor:pointer; white-space:nowrap; }
.uo-icon-btn:hover { border-color:#a5b4fc; background:#f8faff; color:#4338ca; }
.uo-icon-btn[disabled] { opacity:.5; cursor:default; }

.uo-empty { display:grid; place-items:center; min-height:220px; padding:28px; color:#64748b; text-align:center; }
.uo-empty h4 { margin:0 0 6px; color:#172033; font-size:15px; font-weight:800; }
.uo-empty p { margin:0; font-size:13px; max-width:460px; }

.uo-foot { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:13px 18px; border-top:1px solid #edf1f6; color:#64748b; font-size:12px; }
.uo-foot .uo-actions { margin-left:auto; }

/* Detail drawer */
.uo-drawer { position:fixed; inset:0; z-index:1400; display:none; }
.uo-drawer.open { display:block; }
.uo-drawer-scrim { position:absolute; inset:0; background:rgba(15,23,42,.35); }
.uo-drawer-panel { position:absolute; top:0; right:0; bottom:0; width:min(560px,100%); overflow:auto; background:#fff; box-shadow:-18px 0 46px rgba(15,23,42,.18); }
.uo-drawer-head { position:sticky; top:0; z-index:1; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:20px 22px 14px; border-bottom:1px solid #edf1f6; background:#fff; }
.uo-drawer-head h3 { margin:0; color:#172033; font-size:17px; font-weight:850; }
.uo-drawer-head p { margin:4px 0 0; color:#64748b; font-size:12.5px; }
.uo-drawer-close { padding:6px 10px; border:1px solid #dbe3ee; border-radius:9px; background:#fff; color:#475569; font-size:15px; line-height:1; cursor:pointer; }
.uo-drawer-body { display:grid; gap:18px; padding:18px 22px 26px; }
.uo-section h4 { margin:0 0 9px; color:#64748b; font-size:10.5px; font-weight:850; letter-spacing:.055em; text-transform:uppercase; }
.uo-facts { display:grid; grid-template-columns:132px minmax(0,1fr); gap:8px 14px; font-size:13px; }
.uo-facts dt { color:#64748b; }
.uo-facts dd { margin:0; color:#172033; word-break:break-word; }
.uo-list { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.uo-list li { padding:11px 13px; border:1px solid #e8ecf3; border-radius:11px; background:#fbfcfe; font-size:12.5px; color:#334155; }
.uo-list li .uo-strong { display:block; margin-bottom:2px; }
.uo-note { padding:12px 14px; border:1px solid #fecaca; border-radius:12px; background:#fef6f6; color:#7f1d1d; font-size:12.5px; line-height:1.5; }
.uo-drawer-actions { display:flex; flex-wrap:wrap; gap:8px; }

@media (max-width: 1024px) {
  .uo-shell { padding:14px; }
  .uo-actions { margin-left:0; width:100%; }
  .uo-table th:nth-child(3), .uo-table td:nth-child(3) { display:none; }
}