/* Edge Engine UI: production dashboard styling.
   Loaded after Tailwind CDN. Keep this file small and composable. */

:root {
  --color-edge-positive: #059669;
  --color-edge-neutral: #4b5563;
  --color-edge-negative: #dc2626;
  --color-surface: #ffffff;
  --color-border: #e2e8f0;
  --radius-card: 0.75rem;
  --radius-badge: 9999px;
  --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06);
  --shadow-card-hover: 0 6px 16px -10px rgb(0 0 0 / 0.18);
}

/* Global helpers (used across templates) */
.card { background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); border: 1px solid var(--color-border); }
.card-hover:hover { box-shadow: var(--shadow-card-hover); transition: box-shadow 0.2s ease, border-color 0.2s ease; border-color: #cbd5e1; }

.num { text-align: right; font-variant-numeric: tabular-nums; }
.num-emphasis { font-variant-numeric: tabular-nums; font-weight: 700; }
.font-mono-ticker { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 0.8125rem; }

/* Edge color utilities (also work if Tailwind fails) */
.edge-positive { color: var(--color-edge-positive); }
.edge-neutral  { color: var(--color-edge-neutral); }
.edge-negative { color: var(--color-edge-negative); }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.2rem 0.55rem; font-size: 0.75rem; font-weight: 600; border-radius: var(--radius-badge); white-space: nowrap; }
.badge-open { background: #d1fae5; color: #065f46; }
.badge-closed { background: #f1f5f9; color: #475569; }
.badge-bet { background: #dcfce7; color: #166534; }
.badge-watch { background: #fef3c7; color: #92400e; }
.badge-pass { background: #f1f5f9; color: #475569; }
.badge-sport { background: #e0e7ff; color: #3730a3; }
.badge-premium { background: #f5f3ff; color: #5b21b6; border: 1px solid #ddd6fe; }
.badge-locked { background: #f8fafc; color: #475569; border: 1px dashed #cbd5e1; }

/* Header nav links */
.nav-link {
  display: inline-flex;
  align-items: center;
  height: 2.25rem;
  padding: 0 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #475569;
  border-radius: 0.5rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-link:hover { background: #f1f5f9; color: #0f172a; }

/* HTMX indicators */
.htmx-indicator { display: none !important; }
#top-picks-container.htmx-request ~ #top-picks-spinner { display: flex !important; }
.spinner { width: 1.25rem; height: 1.25rem; border: 2px solid #e2e8f0; border-top-color: #3b82f6; border-radius: 50%; animation: spin 0.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Copy button */
.copy-btn { cursor: pointer; padding: 0.25rem 0.375rem; border-radius: 0.375rem; color: #64748b; transition: background-color 0.15s ease, color 0.15s ease; }
.copy-btn:hover { background: #e2e8f0; color: #0f172a; }
.copy-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.copy-btn.copied { color: #059669; }

/* “Details” disclosure */
details summary { list-style: none; cursor: pointer; }
details summary::-webkit-details-marker { display: none; }
.details-content { overflow: hidden; }
details[open] .details-content { animation: detailsSlide 0.22s ease-out; }
@keyframes detailsSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* Tables: used on Risk/Accuracy and some drilldowns */
.table-picks { border-collapse: collapse; font-size: 0.875rem; }
.table-picks thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #f8fafc;
  padding: 0.75rem 1rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  border-bottom: 2px solid #e2e8f0;
  white-space: nowrap;
}
.table-picks tbody td { padding: 0.75rem 1rem; vertical-align: middle; border-bottom: 1px solid #e2e8f0; }
.table-picks tbody tr:nth-child(even) { background: #fafafa; }
.table-picks tbody tr:hover { background: #f1f5f9; }