/* Shared shell for XHP bug-report concept previews.
   Mirrors the live xhp-fulfillment.vercel.app design tokens. */

:root {
  --bg: #f8f9fb;
  --surface: #ffffff;
  --surface-2: #f1f3f5;
  --border: rgba(0,0,0,0.08);
  --text: #1a1a2e;
  --text-muted: #4b5563;
  --text-faint: #71717a;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --green: #059669;
  --green-bg: #ecfdf5;
  --green-border: #a7f3d0;
  --amber: #d97706;
  --amber-bg: #fffbeb;
  --amber-border: #fde68a;
  --blue: #2563eb;
  --blue-bg: #eff6ff;
  --blue-border: #bfdbfe;
  --red: #dc2626;
  --red-bg: #fef2f2;
  --red-border: #fecaca;
  --purple: #7c3aed;
  --purple-bg: #f5f3ff;
  --radius: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-xl: 0 12px 40px rgba(16,24,40,0.16);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
}

/* ---- Concept bar (preview chrome, not part of the product) ---- */
.concept-bar {
  display:flex; align-items:center; gap:14px;
  padding: 10px 20px;
  background: #101828;
  color: #e5e7eb;
  font-size: 13px;
  flex-shrink: 0;
}
.concept-bar a {
  color:#93c5fd; text-decoration:none; font-weight:600;
  display:inline-flex; align-items:center; gap:6px;
}
.concept-bar a:hover { color:#bfdbfe; }
.concept-bar .cnum {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:26px; height:26px; padding:0 8px;
  border-radius: 999px;
  background:#2563eb; color:#fff; font-weight:700; font-size:12px;
}
.concept-bar .ctitle { font-weight:700; color:#fff; }
.concept-bar .cdesc { color:#9ca3af; }
.concept-bar .cta {
  margin-left:auto;
  background:rgba(37,99,235,0.25);
  border:1px solid rgba(147,197,253,0.4);
  color:#bfdbfe;
  padding:4px 12px; border-radius:999px; font-size:12px; font-weight:600;
  white-space:nowrap;
}
@media (max-width: 760px) { .concept-bar .cdesc { display:none; } }

/* ---- Mock app shell ---- */
.viewport { display:flex; flex-direction:column; height:100dvh; }
.app { display:flex; flex-direction:column; flex:1; min-height:0; position:relative; }

.header {
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink:0; z-index:10;
}
.header-left { display:flex; align-items:center; gap:12px; }
.logo { display:flex; align-items:center; gap:8px; font-weight:700; font-size:16px; }
.logo-mark {
  width:28px; height:28px; border-radius:7px;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:13px; font-weight:800;
}
.realtime-status { font-size:11px; color:var(--text-faint); display:flex; align-items:center; }
.realtime-dot { width:8px; height:8px; border-radius:50%; background:#059669; display:inline-block; margin-right:5px; }
.header-right { display:flex; align-items:center; gap:12px; }
.user-info { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-muted); }
.user-avatar {
  width:32px; height:32px; border-radius:50%;
  background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:600; font-size:13px;
}

.toolbar {
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
  padding: 12px 24px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  flex-shrink:0; z-index:9;
}
.toolbar-left { display:flex; align-items:center; flex-wrap:wrap; gap:12px; min-width:0; }
.toolbar-right { display:flex; align-items:center; gap:8px; }
.global-nav { display:flex; gap:2px; background:var(--surface-2); border-radius:6px; padding:2px; flex-shrink:0; }
.global-nav-btn {
  padding:6px 13px; border-radius:4px; border:none; background:transparent;
  cursor:pointer; font-size:13px; font-weight:700; color:var(--text-muted);
  font-family:var(--font); transition:all 0.15s;
}
.global-nav-btn.active { background:var(--accent); color:#fff; box-shadow:var(--shadow); }
.global-nav-btn:hover:not(.active) { color:var(--text); }

.filter-tabs { display:flex; gap:4px; flex-wrap:wrap; }
.filter-tab {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 11px; border-radius:6px; border:1px solid transparent;
  background:transparent; cursor:pointer;
  font-size:13px; font-weight:600; color:var(--text-muted); font-family:var(--font);
}
.filter-tab.active { background:var(--blue-bg); border-color:var(--blue-border); color:var(--accent); }
.filter-tab:hover:not(.active) { background:var(--surface-2); }
.tab-badge {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:var(--surface-2); font-size:11px; font-weight:700; color:var(--text-faint);
}
.filter-tab.active .tab-badge { background:var(--accent); color:#fff; }

/* ---- Orders table ---- */
.content { flex:1; overflow:auto; padding: 20px 24px 80px; }
.orders-table {
  width:100%;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  border-collapse:separate; border-spacing:0;
  overflow:hidden;
}
.orders-table th {
  text-align:left; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.05em; color:var(--text-faint);
  padding: 10px 14px;
  background:var(--surface-2);
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.orders-table td {
  padding: 12px 14px;
  border-bottom:1px solid var(--border);
  font-size:13px; vertical-align:middle;
  white-space:nowrap;
}
.orders-table tr:last-child td { border-bottom:none; }
.orders-table tbody tr { transition: background 0.12s; position:relative; }
.orders-table tbody tr:hover { background:#f8faff; }
.order-id { font-weight:700; font-size:12px; color:var(--text-faint); }
.order-event { font-weight:600; color:var(--text); }
.order-date { font-size:12px; color:var(--text-faint); }
.order-price { font-weight:700; }

.status-pill {
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 10px; border-radius:999px;
  font-size:11px; font-weight:700;
  border:1px solid transparent; white-space:nowrap;
}
.status-pill::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.status-pill.active { background:var(--blue-bg); color:var(--blue); border-color:var(--blue-border); }
.status-pill.available { background:var(--green-bg); color:var(--green); border-color:var(--green-border); }
.status-pill.in_progress { background:var(--amber-bg); color:var(--amber); border-color:var(--amber-border); }
.status-pill.issue { background:var(--red-bg); color:var(--red); border-color:var(--red-border); }

/* ---- Buttons ---- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:none; border-radius:6px; padding:7px 13px;
  font-family:var(--font); font-size:13px; font-weight:600;
  cursor:pointer; transition:all 0.15s; white-space:nowrap;
}
.btn:active { transform:translateY(1px); }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-hover); }
.btn-soft { background:var(--surface-2); color:var(--text); }
.btn-soft:hover { background:#e5e7eb; }
.btn-ghost { background:transparent; color:var(--text-muted); border:1px solid var(--border); }
.btn-ghost:hover { background:var(--surface-2); color:var(--text); }
.btn-danger { background:var(--red); color:#fff; }
.btn-sm { padding:5px 10px; font-size:12px; border-radius:5px; }

/* ---- Form primitives ---- */
.field { display:grid; gap:6px; }
.field label { font-size:12px; font-weight:700; color:var(--text-muted); }
.field .hint { font-size:11px; color:var(--text-faint); font-weight:400; }
.input, .textarea, .select {
  width:100%;
  border:1px solid var(--border);
  border-radius: 8px;
  background:var(--surface);
  padding:9px 12px;
  font-family:var(--font); font-size:13px; color:var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input:focus, .textarea:focus, .select:focus {
  outline:none; border-color:var(--accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.textarea { min-height:84px; resize:vertical; line-height:1.5; }

.chip-row { display:flex; flex-wrap:wrap; gap:8px; }
.choice-chip {
  border:1px solid var(--border); border-radius:999px;
  background:var(--surface); color:var(--text-muted);
  padding:6px 12px; font-size:12px; font-weight:600;
  cursor:pointer; font-family:var(--font); transition:all 0.12s;
}
.choice-chip:hover { border-color:var(--accent); color:var(--accent); }
.choice-chip.selected { background:var(--blue-bg); border-color:var(--accent); color:var(--accent); }

/* ---- Screenshot dropzone + thumbs ---- */
.dropzone {
  border:1.5px dashed rgba(37,99,235,0.35);
  border-radius: 10px;
  background: #fbfdff;
  padding: 18px 14px;
  text-align:center;
  color:var(--text-faint); font-size:12px;
  cursor:pointer; transition:all 0.15s;
}
.dropzone:hover, .dropzone.dragover { border-color:var(--accent); background:var(--blue-bg); color:var(--accent); }
.dropzone strong { color:var(--accent); font-weight:700; }
.shot-row { display:flex; flex-wrap:wrap; gap:8px; }
.shot-thumb {
  position:relative; width:92px; height:64px;
  border-radius:8px; border:1px solid var(--border);
  overflow:hidden; box-shadow:var(--shadow);
  background: linear-gradient(135deg, #eef2ff 0%, #e0f2fe 55%, #fdf4ff 100%);
}
.shot-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.shot-thumb .shot-chrome {
  position:absolute; top:0; left:0; right:0; height:12px;
  background:#e2e8f0; display:flex; align-items:center; gap:3px; padding:0 5px;
}
.shot-thumb .shot-chrome i { width:4px; height:4px; border-radius:50%; background:#94a3b8; display:block; }
.shot-thumb .shot-label {
  position:absolute; bottom:0; left:0; right:0;
  background:rgba(16,24,40,0.72); color:#fff;
  font-size:9px; padding:2px 5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.shot-thumb .shot-x {
  position:absolute; top:2px; right:2px; width:16px; height:16px;
  border-radius:50%; border:none; background:rgba(16,24,40,0.72); color:#fff;
  font-size:10px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.shot-thumb.shot-lg { width:100%; height:150px; }

/* ---- Auto-context strip ---- */
.context-strip {
  display:flex; flex-wrap:wrap; gap:6px;
  padding:10px 12px;
  background:var(--surface-2); border-radius:8px;
  font-size:11px; color:var(--text-faint);
}
.context-strip .ctx {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:5px; padding:2px 8px; font-weight:600;
}

/* ---- Order attach chip ---- */
.order-chip {
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--blue-border); background:var(--blue-bg);
  border-radius:8px; padding:8px 12px;
}
.order-chip .oc-main { min-width:0; flex:1; }
.order-chip .oc-event { font-size:13px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.order-chip .oc-meta { font-size:11px; color:var(--text-muted); }
.order-chip .oc-x { border:none; background:none; color:var(--text-faint); cursor:pointer; font-size:14px; }

/* ---- Overlays ---- */
.scrim {
  position:absolute; inset:0; background:rgba(16,24,40,0.4);
  z-index:40; opacity:0; pointer-events:none; transition:opacity 0.2s;
}
.scrim.open { opacity:1; pointer-events:auto; }

/* ---- Toast ---- */
.toast-stack {
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:8px; z-index:90; pointer-events:none;
}
.toast {
  display:flex; align-items:center; gap:10px;
  background:#101828; color:#f9fafb;
  padding:11px 16px; border-radius:10px;
  font-size:13px; font-weight:600;
  box-shadow: var(--shadow-xl);
  animation: toast-in 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  pointer-events:auto;
}
.toast.success .toast-ico { color:#34d399; }
.toast.error .toast-ico { color:#f87171; }
.toast .toast-ico { font-size:15px; }
@keyframes toast-in { from { opacity:0; transform:translateY(12px) scale(0.96); } to { opacity:1; transform:none; } }
.toast.leaving { opacity:0; transition:opacity 0.3s; }

/* ---- Utility ---- */
.muted { color:var(--text-faint); font-size:12px; }
.spacer { flex:1; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }