/* =============================================================================
   CC DESIGN TOKENS (2026-07-15)
   -----------------------------------------------------------------------------
   Single source of truth for Command Center visual language. Both
   scalping-command.html and command-center-original.html link this so widgets
   share consistent padding, radius, borders, gaps, and accents.

   Philosophy:
   - CSS variables at :root so any widget can consume them
   - Utility classes ({.cc-card, .cc-strip, .cc-section-header}) for widgets
     that opt in without touching their existing styles
   - No !important on structural properties (preserves widget overrides)
   - !important ONLY on the specific visual token normalizations we want to
     enforce across all widgets (border, radius, padding)

   Do NOT add widget-specific logic here. This is design tokens only.
   ============================================================================= */

:root {
  /* Spacing (rhythm of 4) */
  --cc-pad: 12px;
  --cc-pad-sm: 8px;
  --cc-pad-lg: 16px;
  --cc-gap: 8px;
  --cc-gap-sm: 4px;
  --cc-gap-lg: 12px;

  /* Radii */
  --cc-radius: 8px;
  --cc-radius-sm: 4px;
  --cc-radius-lg: 12px;

  /* Card surface */
  --cc-card-bg: rgba(0, 0, 0, 0.32);
  --cc-card-bg-hover: rgba(0, 0, 0, 0.40);
  --cc-card-border: 1px solid rgba(255, 255, 255, 0.06);
  --cc-card-border-strong: 1px solid rgba(255, 255, 255, 0.12);
  --cc-card-border-accent: 1px solid rgba(0, 229, 155, 0.35);

  /* Text colors */
  --cc-text: #c9d1d9;
  --cc-text-muted: #7d8590;
  --cc-text-faint: #5a6270;
  --cc-text-strong: #ffffff;

  /* Accent (single canonical green) */
  --cc-accent: #00e59b;
  --cc-accent-dim: rgba(0, 229, 155, 0.14);
  --cc-accent-strong: #00b87d;

  /* Semantic */
  --cc-bull: #00e59b;
  --cc-bear: #ff5c5c;
  --cc-warn: #ffb800;
  --cc-info: #5e9eff;

  /* Widget container */
  --cc-widget-max-width: 1320px;
  --cc-widget-margin-x: 20px;
  --cc-widget-margin-y: 8px;

  /* Section header (uppercase mini-label) */
  --cc-header-size: 11px;
  --cc-header-weight: 800;
  --cc-header-tracking: 0.08em;
  --cc-header-color: var(--cc-accent);
}

/* ---------------------------------------------------------------------------
   UTILITY CLASSES — widgets opt in by adding these classes
   --------------------------------------------------------------------------- */

.cc-card {
  background: var(--cc-card-bg);
  border: var(--cc-card-border);
  border-radius: var(--cc-radius);
  padding: var(--cc-pad);
  color: var(--cc-text);
  font-family: Inter, sans-serif;
}
.cc-card--accent {
  border: var(--cc-card-border-accent);
}
.cc-card--strong {
  border: var(--cc-card-border-strong);
}

.cc-section-header {
  display: flex;
  align-items: center;
  gap: var(--cc-gap-lg);
  font-family: Inter, sans-serif;
  font-size: var(--cc-header-size);
  font-weight: var(--cc-header-weight);
  letter-spacing: var(--cc-header-tracking);
  text-transform: uppercase;
  color: var(--cc-header-color);
  margin-bottom: var(--cc-gap);
}

/* Compact single-row status strip (news, regime, imbalance, tick/trin) */
.cc-strip {
  background: var(--cc-card-bg);
  border: var(--cc-card-border);
  border-radius: var(--cc-radius);
  padding: 6px var(--cc-pad);
  font-family: Inter, sans-serif;
  font-size: 11px;
  color: var(--cc-text);
  display: flex;
  align-items: center;
  gap: var(--cc-gap-lg);
}

/* ---------------------------------------------------------------------------
   NORMALIZATION LAYER — force consistency on existing widgets that use their
   own borders/radii, without breaking their internal styles.

   These selectors ONLY match direct children of the flow container, so widgets
   that live outside .cc-priority-flow (nav, footer) are untouched.
   --------------------------------------------------------------------------- */

.cc-priority-flow > section,
.cc-priority-flow > div[id],
.cc-priority-flow > article {
  /* Consistent outer margin so gaps between sections are uniform */
  margin-bottom: var(--cc-gap-lg) !important;
}

/* First-level cards inside sections — normalize border radius so all corners
   read as coming from the same design system. Skip elements that opt out with
   .cc-no-normalize. */
.cc-priority-flow section > div:not(.cc-no-normalize),
.cc-priority-flow section > section:not(.cc-no-normalize) {
  border-radius: var(--cc-radius);
}

/* Every button in the CC that isn't already themed picks up the token font */
.cc-priority-flow button:not(.cc-no-normalize) {
  font-family: Inter, sans-serif;
}

/* ---------------------------------------------------------------------------
   COMPACT EMPTY PILL — for widgets that want to render one-liner empty state.
   Widgets add class .cc-empty-pill to their empty container.
   --------------------------------------------------------------------------- */

.cc-empty-pill {
  display: flex;
  align-items: center;
  gap: var(--cc-gap);
  padding: 8px var(--cc-pad);
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.10);
  border-radius: var(--cc-radius);
  color: var(--cc-text-muted);
  font-size: 11px;
  font-family: Inter, sans-serif;
  font-style: italic;
}
.cc-empty-pill::before {
  content: "\2014";  /* em-dash */
  color: var(--cc-text-faint);
  font-style: normal;
  font-weight: 800;
  margin-right: 2px;
}
.cc-empty-pill strong {
  color: var(--cc-text);
  font-weight: 700;
  font-style: normal;
}
.cc-empty-pill button, .cc-empty-pill a.cc-empty-action {
  margin-left: auto;
  background: transparent;
  border: 1px solid rgba(0, 229, 155, 0.35);
  color: var(--cc-accent);
  font-size: 10px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: var(--cc-radius-sm);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  font-family: Inter, sans-serif;
}

/* ---------------------------------------------------------------------------
   TWO-COLUMN GRID BAND — for the Active Hours zone.
   Widgets inside a container with class .cc-band-2col auto-arrange as a
   responsive 2-column grid. Widgets that must stay full-width add
   .cc-full-width.
   --------------------------------------------------------------------------- */

.cc-band-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cc-gap-lg);
  max-width: var(--cc-widget-max-width);
  margin: 0 auto var(--cc-widget-margin-y);
  padding: 0 var(--cc-widget-margin-x);
}
.cc-band-2col > .cc-full-width {
  grid-column: 1 / -1;
}
@media (max-width: 900px) {
  .cc-band-2col {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
   SHIP 3 — dense mode pairing (2026-07-15)
   Body gets .cc-dense class; narrow widgets that were previously full-width
   now pair up in the existing 2-column grid. Rescue button: remove the class
   to revert to full-width stacking.
   --------------------------------------------------------------------------- */

body.cc-dense .cc-priority-flow > #fj-imbalance-host,
body.cc-dense .cc-priority-flow > #ep-host,
body.cc-dense .cc-priority-flow > #cs-host,
body.cc-dense .cc-priority-flow > #vm-host,
body.cc-dense .cc-priority-flow > #actionable-picks-host,
body.cc-dense .cc-priority-flow > #price-alerts-panel,
body.cc-dense .cc-priority-flow > #macro-context-panel,
body.cc-dense .cc-priority-flow > #smart-money-map,
body.cc-dense .cc-priority-flow > #fj-news {
  grid-column: span 1 !important;
}

/* Full-width elements MUST stay full-width in dense mode: cascade, watchlist,
   phase-band headers, section headers, and the accordions/collapsibles. */
body.cc-dense .cc-priority-flow > .cc-phase-band,
body.cc-dense .cc-priority-flow > #cascade-hero-scalp,
body.cc-dense .cc-priority-flow > #live-watchlist-cards,
body.cc-dense .cc-priority-flow > #research-bench-section,
body.cc-dense .cc-priority-flow > #strategy-reference-panel,
body.cc-dense .cc-priority-flow > #more-tools-wrap,
body.cc-dense .cc-priority-flow > .bnb-coll-wrap,
body.cc-dense .cc-priority-flow > .bnb-acc,
body.cc-dense .cc-priority-flow > #field-guide-link,
body.cc-dense .cc-priority-flow > #morning-briefing-widget {
  grid-column: 1 / -1 !important;
}

/* Below 1120px, force everything back to single column so paired widgets
   don't get too squeezed. */
@media (max-width: 1119px) {
  body.cc-dense .cc-priority-flow > * {
    grid-column: 1 / -1 !important;
  }
}

/* ---------------------------------------------------------------------------
   SHIP 5 — Cross-page visual harmony (2026-07-15)
   Makes scalping-command.html and command-center-original.html feel like the
   same product with two modes. Enforces:
     - Same widget card treatment (border, radius, bg)
     - Same phase-band header style
     - Same section header style
     - Same top strip / news ticker appearance
     - Same accent color across all widgets
   --------------------------------------------------------------------------- */

/* Widget cards — unified surface across both pages */
body.cc-dense .cas-wrap,
body.cc-dense .best-longs-panel,
body.cc-dense .cas-cards,
body.cc-dense #cc-cascade-funnel,
body.cc-dense .vm-card,
body.cc-dense .apw-card,
body.cc-dense .ep-card,
body.cc-dense .csp-card,
body.cc-dense .imbalance-wrap,
body.cc-dense .fj-news-wrap,
body.cc-dense .rb-wrap,
body.cc-dense .pa-wrap,
body.cc-dense .mc-wrap,
body.cc-dense .mi-wrap,
body.cc-dense .sr-wrap,
body.cc-dense .sm-wrap,
body.cc-dense .mb-wrap {
  border-radius: var(--cc-radius) !important;
  border: var(--cc-card-border) !important;
  background: var(--cc-card-bg) !important;
  box-shadow: none !important;
}

/* Widgets with a live/accent state get the accent border */
body.cc-dense .cas-wrap.cas-live,
body.cc-dense .best-longs-panel.has-picks,
body.cc-dense .vm-card.vm-active,
body.cc-dense .apw-card.apw-active {
  border-color: rgba(0, 229, 155, 0.35) !important;
}

/* Section headers — unified typography */
body.cc-dense .cas-header,
body.cc-dense .best-longs-header,
body.cc-dense .apw-title,
body.cc-dense .vm-title,
body.cc-dense .ep-title,
body.cc-dense .csp-title,
body.cc-dense .fj-imb-title,
body.cc-dense .fj-news-title,
body.cc-dense .pa-title,
body.cc-dense .mc-title,
body.cc-dense .rb-title,
body.cc-dense .mi-title {
  font-family: Inter, sans-serif !important;
  font-size: var(--cc-header-size) !important;
  font-weight: var(--cc-header-weight) !important;
  letter-spacing: var(--cc-header-tracking) !important;
  text-transform: uppercase !important;
  color: var(--cc-accent) !important;
}

/* Uniform gap between all sections */
body.cc-dense .cc-priority-flow {
  row-gap: var(--cc-gap-lg) !important;
}

/* Uniform top-strip appearance (both pages) */
body.cc-dense .cc-top-strip {
  padding: 6px var(--cc-pad) !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: rgba(11, 17, 32, 0.85) !important;
  font-family: Inter, sans-serif !important;
  font-size: 11px !important;
}

/* Phase bands — already styled by scalping-command inline CSS but let's
   ensure a consistent baseline treatment (dashed border, uniform padding) */
body.cc-dense .cc-phase-band {
  padding: 6px var(--cc-pad) !important;
  border-radius: var(--cc-radius) !important;
  font-size: var(--cc-header-size) !important;
  letter-spacing: var(--cc-header-tracking) !important;
  margin-bottom: var(--cc-gap-sm) !important;
}

/* Uniform "Updated Xs ago" chip appearance across widgets */
body.cc-dense .bnb-upd-chip {
  font-size: 9.5px !important;
  padding: 2px 6px !important;
  border-radius: 3px !important;
  font-family: ui-monospace, monospace !important;
}

/* Suppress the pre-existing scattered legacy accent colors and unify on --cc-accent */
body.cc-dense .cas-cards { border-color: rgba(0, 229, 155, 0.30) !important; }
body.cc-dense .cas-wrap  { border-color: rgba(0, 229, 155, 0.30) !important; }

/* Buttons: unified default treatment */
body.cc-dense .cc-priority-flow button:not(.cc-no-normalize) {
  border-radius: var(--cc-radius-sm) !important;
  font-family: Inter, sans-serif !important;
  letter-spacing: 0.03em !important;
  transition: background 0.15s, border-color 0.15s !important;
}

/* --------- MODE INDICATOR PILL (top of page) ---------
   Small pill in the top-right of each CC showing which mode you're in
   (Scalp / Swing). Enables users to feel oriented across the two pages
   without needing to look at the URL. */
.cc-mode-pill {
  position: fixed;
  top: 8px;
  right: 12px;
  z-index: 500;
  padding: 4px 10px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid var(--cc-accent);
  color: var(--cc-accent);
  font-family: Inter, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  pointer-events: auto;
  cursor: pointer;
  transition: background 0.15s;
  display: none; /* Enabled by JS mode-indicator */
}
.cc-mode-pill:hover { background: rgba(0, 229, 155, 0.15); }
body.cc-dense .cc-mode-pill { display: inline-block; }

/* ------------------------------------------------------------------ */
/* SUBTLE POLISH — spacing corrections that harmonize both pages       */
/* ------------------------------------------------------------------ */

/* Kill the extra 20px horizontal padding some widgets inherit from their
   own style tags — the flow container already provides padding. */
body.cc-dense .cc-priority-flow > * > div[style*="padding:0 20px"]:first-child,
body.cc-dense .cc-priority-flow > * > section[style*="padding:0 20px"]:first-child {
  padding-left: 0 !important;
  padding-right: 0 !important;
}