/* ============================================================
   Session Pulse — dashboard.css
   Scope: .session-pulse
   CE = cyan · PE = amber · Δ% up green / down red
   Themes: html[data-theme="dark|light"] (see theme.css optional)
   ============================================================ */

/* ── Tokens (dark default; light overrides) ─────────────── */
:root,
[data-theme="dark"] {
  --sp-bg: #0b1020;
  --sp-bg-mid: #13204a;
  --sp-panel: #111831;
  --sp-panel-2: rgba(15, 23, 48, 0.55);
  --sp-header-bg: rgba(17, 24, 49, 0.85);
  --sp-input: #0f1730;
  --sp-border: #1f2a4d;
  --sp-border-soft: rgba(31, 42, 77, 0.45);
  --sp-text: #e6ecff;
  --sp-muted: #9aa6cf;
  --sp-accent: #5eead4;
  --sp-ce: #06b6d4;
  --sp-pe: #f59e0b;
  --sp-up: #22c55e;
  --sp-down: #ef4444;
  --sp-danger: #f87171;
  --sp-danger-bg: rgba(239, 68, 68, 0.12);
  --sp-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  --sp-ring: rgba(94, 234, 212, 0.18);
}

[data-theme="light"] {
  --sp-bg: #f4f6fb;
  --sp-bg-mid: #e8eef9;
  --sp-panel: #ffffff;
  --sp-panel-2: #f8fafc;
  --sp-header-bg: rgba(255, 255, 255, 0.92);
  --sp-input: #f8fafc;
  --sp-border: #d8dee9;
  --sp-border-soft: rgba(15, 23, 42, 0.08);
  --sp-text: #0f172a;
  --sp-muted: #64748b;
  --sp-accent: #0d9488;
  --sp-ce: #0891b2;
  --sp-pe: #d97706;
  --sp-up: #059669;
  --sp-down: #dc2626;
  --sp-danger: #dc2626;
  --sp-danger-bg: rgba(220, 38, 38, 0.1);
  --sp-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  --sp-ring: rgba(13, 148, 136, 0.12);
}

/* ── Base ───────────────────────────────────────────────── */
.session-pulse {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(
      1200px 600px at 50% -10%,
      var(--sp-bg-mid) 0%,
      var(--sp-bg) 55%
    )
    fixed;
  color: var(--sp-text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    Inter, Arial, sans-serif;
  line-height: 1.45;
}

.session-pulse *,
.session-pulse *::before,
.session-pulse *::after {
  box-sizing: border-box;
}

/* ── Header ─────────────────────────────────────────────── */
.sp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--sp-border);
  background: var(--sp-header-bg);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.sp-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.session-pulse .sp-brand h1 {
  font-size: 16px;
  margin: 0;
  letter-spacing: 0.3px;
  font-weight: 700;
  color: var(--sp-text);
}

.sp-subtitle {
  color: var(--sp-muted);
  font-size: 12px;
}

.sp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sp-accent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--sp-accent) 55%, transparent);
  flex-shrink: 0;
}

.sp-admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--sp-pe) 12%, transparent);
  color: var(--sp-pe);
  border: 1px solid color-mix(in srgb, var(--sp-pe) 30%, transparent);
}

.sp-clock {
  display: flex;
  align-items: center;
  gap: 10px;
  font-variant-numeric: tabular-nums;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.session-pulse .sp-clock time {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--sp-text);
}

.sp-window {
  color: var(--sp-muted);
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid var(--sp-border);
  border-radius: 999px;
  white-space: nowrap;
}

.sp-theme-btn {
  border: 1px solid var(--sp-border);
  background: var(--sp-input);
  color: var(--sp-text);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.sp-theme-btn:hover {
  border-color: var(--sp-accent);
}

/* ── Main ───────────────────────────────────────────────── */
.sp-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 16px 32px;
  display: grid;
  gap: 10px;
}

@media (min-width: 1400px) {
  .sp-main {
    max-width: 1280px;
  }
}

/* ── Admin actions / date tabs ──────────────────────────── */
.sp-admin-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.sp-date-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.sp-date-tab {
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  background: var(--sp-input);
  color: var(--sp-muted);
  border: 1px solid var(--sp-border);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}

.sp-date-tab:hover {
  border-color: color-mix(in srgb, var(--sp-accent) 40%, var(--sp-border));
  color: var(--sp-text);
}

.sp-date-tab.active {
  background: color-mix(in srgb, var(--sp-accent) 12%, transparent);
  border-color: var(--sp-accent);
  color: var(--sp-accent);
}

/* ── Hero ───────────────────────────────────────────────── */
.sp-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--sp-border);
  border-radius: 12px;
  background: var(--sp-panel);
  padding: 12px 14px;
  display: grid;
  gap: 10px;
  box-shadow: var(--sp-shadow);
}

.sp-pulse-ring {
  position: absolute;
  inset: -30%;
  pointer-events: none;
  opacity: 0.45;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    var(--sp-ring) 25%,
    transparent 50%
  );
  animation: sp-spin 10s linear infinite;
}

@keyframes sp-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sp-pulse-ring {
    animation: none;
  }
}

.sp-section-title {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sp-muted);
  position: relative;
  z-index: 1;
}

.sp-divider {
  border: none;
  border-top: 1px solid var(--sp-border);
  margin: 4px 0;
}

/* Top 5 */
.sp-top-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  z-index: 1;
}

.sp-top-item,
.sp-top-chip {
  display: grid;
  grid-template-columns: 22px minmax(72px, 120px) 40px minmax(48px, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--sp-border);
  background: var(--sp-panel-2);
  min-height: 0;
}

.sp-top-rank {
  font-size: 12px;
  color: var(--sp-muted);
  font-weight: 700;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: color-mix(in srgb, var(--sp-accent) 14%, transparent);
  color: var(--sp-accent);
}

.sp-top-sym,
.sp-top-info {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.sp-top-type,
.sp-type {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.4px;
  flex-shrink: 0;
  text-align: center;
}

.sp-top-type.ce,
.sp-type.ce {
  color: var(--sp-ce);
  background: color-mix(in srgb, var(--sp-ce) 12%, transparent);
}

.sp-top-type.pe,
.sp-type.pe {
  color: var(--sp-pe);
  background: color-mix(in srgb, var(--sp-pe) 12%, transparent);
}

.sp-top-pct,
.sp-delta {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
  text-align: right;
}

.sp-top-pct.up,
.sp-delta.up {
  color: var(--sp-up);
}

.sp-top-pct.down,
.sp-delta.down {
  color: var(--sp-down);
}

.sp-delta {
  padding: 2px 6px;
  font-size: 12.5px;
  border-radius: 6px;
  min-width: 0;
}

.sp-delta.up {
  background: color-mix(in srgb, var(--sp-up) 12%, transparent);
}

.sp-delta.down {
  background: color-mix(in srgb, var(--sp-down) 12%, transparent);
}

.sp-top-vol,
.sp-vol {
  font-variant-numeric: tabular-nums;
  color: var(--sp-muted);
  font-size: 12px;
  white-space: nowrap;
}

/* Sparklines — stroke follows Δ%, not CE/PE */
.sp-spark,
.sp-top-spark {
  width: 100%;
  height: 22px;
  max-width: 90px;
  display: block;
}

.sp-spark path.line,
.sp-top-spark path.line {
  fill: none;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.sp-spark.up path.line,
.sp-top-spark.up path.line {
  stroke: var(--sp-up);
}

.sp-spark.down path.line,
.sp-top-spark.down path.line {
  stroke: var(--sp-down);
}

/* Metrics */
.sp-metrics,
.sp-hero-content {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
}

.sp-metric {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 8px 10px;
  border: 1px solid var(--sp-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--sp-bg) 45%, var(--sp-panel));
  margin: 0;
}

.sp-metric dt,
.sp-metric-label {
  color: var(--sp-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}

.sp-metric dd,
.sp-metric-value {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--sp-text);
  font-variant-numeric: tabular-nums;
}

.sp-val-ce {
  color: var(--sp-ce) !important;
}

.sp-val-pe {
  color: var(--sp-pe) !important;
}

/* ── Controls ───────────────────────────────────────────── */
.sp-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: end;
  padding: 4px 0;
}

.sp-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--sp-muted);
  min-width: 100px;
}

.sp-field input,
.sp-field select,
.sp-input {
  background: var(--sp-input);
  color: var(--sp-text);
  border: 1px solid var(--sp-border);
  border-radius: 8px;
  padding: 6px 8px;
  outline: none;
  font-size: 13px;
  width: 100%;
}

.sp-field input:focus,
.sp-field select:focus,
.sp-input:focus {
  border-color: color-mix(in srgb, var(--sp-accent) 50%, var(--sp-border));
}

.sp-btn {
  background: color-mix(in srgb, var(--sp-accent) 14%, transparent);
  border: 1px solid var(--sp-border);
  color: var(--sp-text);
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.2px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sp-btn:hover,
.sp-btn:focus {
  border-color: color-mix(in srgb, var(--sp-accent) 50%, var(--sp-border));
  outline: none;
}

.sp-btn-danger {
  background: var(--sp-danger-bg);
  border-color: color-mix(in srgb, var(--sp-danger) 35%, var(--sp-border));
  color: var(--sp-danger);
}

.sp-btn-danger:hover {
  border-color: var(--sp-danger);
}

.sp-load-more {
  display: block;
  margin: 4px auto 0;
  padding: 8px 20px;
  background: var(--sp-input);
  color: var(--sp-text);
  border: 1px solid var(--sp-border);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}

.sp-load-more:hover {
  border-color: color-mix(in srgb, var(--sp-accent) 45%, var(--sp-border));
}

.sp-load-more:disabled {
  opacity: 0.5;
  cursor: wait;
}

/* ── Symbol groups ──────────────────────────────────────── */
.sp-groups {
  display: grid;
  gap: 8px;
}

.sp-symbol {
  content-visibility: auto;
  contain-intrinsic-size: auto 200px;
  border: 1px solid var(--sp-border);
  border-radius: 10px;
  background: var(--sp-panel);
  overflow: hidden;
  box-shadow: var(--sp-shadow);
}

.sp-symbol-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 12px;
  border-bottom: 1px solid var(--sp-border);
  background: var(--sp-panel-2);
}

.sp-symbol-name {
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--sp-text);
}

.sp-sector {
  color: var(--sp-muted);
  font-size: 12px;
  margin-left: 4px;
}

.sp-counts {
  display: flex;
  gap: 6px;
  margin-left: auto;
  flex-wrap: wrap;
}

.sp-chip {
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 10px;
  border: 1px solid var(--sp-border);
  color: var(--sp-muted);
  white-space: nowrap;
}

.sp-chip.ce {
  color: var(--sp-ce);
  border-color: color-mix(in srgb, var(--sp-ce) 35%, var(--sp-border));
}

.sp-chip.pe {
  color: var(--sp-pe);
  border-color: color-mix(in srgb, var(--sp-pe) 35%, var(--sp-border));
}

.sp-symbol-body {
  padding: 2px 0 4px;
  list-style: none;
  margin: 0;
}

/* Contract rows */
.sp-row {
  display: grid;
  grid-template-columns:
    56px
    36px
    88px
    100px
    72px
    56px
    auto
    minmax(64px, 90px);
  gap: 6px 10px;
  align-items: center;
  padding: 5px 12px;
  border-bottom: 1px solid var(--sp-border-soft);
  border-left: 3px solid transparent;
  font-size: 13px;
  min-height: 32px;
}

.sp-row:last-child {
  border-bottom: none;
}

.sp-row.ce {
  border-left-color: var(--sp-ce);
}

.sp-row.pe {
  border-left-color: var(--sp-pe);
}

.sp-strike {
  font-variant-numeric: tabular-nums;
  color: var(--sp-muted);
}

.sp-win,
.sp-px {
  font-variant-numeric: tabular-nums;
  color: var(--sp-muted);
  font-size: 12px;
  white-space: nowrap;
}

.sp-empty {
  color: var(--sp-muted);
  padding: 24px;
  text-align: center;
}

/* ── Footer / status ────────────────────────────────────── */
.sp-status,
.sp-admin-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 11px;
  color: var(--sp-muted);
  min-height: 18px;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 800px) {
  .sp-metrics,
  .sp-hero-content {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sp-top-item,
  .sp-top-chip {
    grid-template-columns: 22px minmax(64px, 1fr) 36px auto auto;
  }

  .sp-top-item .sp-spark,
  .sp-top-chip .sp-top-spark {
    display: none;
  }

  .sp-row {
    grid-template-columns: 48px 32px 1fr 64px;
    gap: 4px 8px;
  }

  .sp-row .sp-win,
  .sp-row .sp-px,
  .sp-row .sp-spark,
  .sp-row .sp-vol {
    display: none;
  }
}

@media (max-width: 480px) {
  .sp-metrics,
  .sp-hero-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sp-header {
    flex-direction: column;
    align-items: flex-start;
  }
}