/* ================================================================
   12_market_trends.css
   Market trends: timeline, history, market status, barplot,
   composite grid, datepicker
   ================================================================ */


/* generic pill  ─────────────────────────────────────────────────── */
.timeline-pill{
  /* existing rules … */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:3px 10px;
  font-size:.95rem;
  height:32px;
  line-height:normal;
  border-radius:.25rem;
  margin-right:6px;
  background:var(--gray-050);
  border:1px solid var(--gray-200);
  color:var(--gray-700);

  /* subtle elevation (matches .export-button) */
  box-shadow:0 2px 4px rgba(0,0,0,.10);
}


/* highlight for the active period  ──────────────────────────────── */
.timeline-pill--current{
  background:var(--blue-100);
  border-color:var(--blue-600);
  color:var(--blue-700);
  font-weight:600;
}

/* timeline container tweaks  ───────────────────────────────────── */
.timeline-bar{
  margin-top:-2px;                      /* snug against filters */
  line-height:30px;
}

/* subtle secondary text (timer, updated)  ─────────────────────── */
.timeline-secondary{
  color:var(--gray-500);
}


/* ── Show All Button (was: history.css) ──────────────────────── */
.show-all-button {
    /* Default (unhovered, unclicked) state */
    background-color: #e0e0e0;      /* Light gray */
    color: #333;                   /* Darker text */
    border: 1px solid #ccc;        /* Subtle gray border */
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.4rem 0.75rem;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

/* Hover state */
.show-all-button:hover {
    background-color: var(--secondary-color); /* your brand color (#00509e, etc.) */
    color: #fff;                              /* white text */
    border-color: var(--secondary-color);
}

/* Active (mouse-down) or :focus state */
.show-all-button:active,
.show-all-button:focus {
    background-color: #003366;     /* an even darker brand color, if desired */
    color: #fff;
    border-color: #003366;
    outline: none;                 /* remove the focus outline if you like */
}

/* ── Historical Market Status (was: historical_market_status.css) */
/* Pack summary color coding */
.pack-status-positive {
    color: #009e8f;  /* COL_POS - green-500 */
    font-weight: 500;
}

.pack-status-negative {
    color: #d55e00;  /* COL_NEG - red-500 */
    font-weight: 500;
}

.pack-status-neutral {
    color: #6b6b6b;  /* COL_NEU - gray-500 */
}

.badge-offmarket {
    background-color: #d55e00 !important;  /* COL_NEG */
    color: white;
    font-weight: 500;
}
/* ── Barplot / Chart Cells (was: barplot.css) ────────────────── */

/* hand‑pointer on each bar (rect & path) */
#sg-movers-graph .plotly .barlayer rect,

/* optional hover glow */
#sg-movers-graph .plotly .barlayer rect:hover,
#sg-movers-graph .plotly .barlayer path:hover {
  filter: drop-shadow(0 0 4px rgba(0,123,255,.75));
}

.js-plotly-plot .plotly .cursor-crosshair,
.js-plotly-plot .plotly .cursor-ew-resize,
.js-plotly-plot .plotly .cursor-ns-resize {
    cursor: pointer !important;
}

#my-graph .js-plotly-plot svg .barlayer {
    cursor: pointer;
}
/* ── Composite Grid Cells (was: composite_grid.css) ──────────── */
/* ---- modernize ag-theme-alpine a bit (safe overrides) ---- */
.custom-ag-grid.ag-theme-alpine {
  /* typography */
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 13px;

  /* neutral, cleaner borders */
  --ag-border-color: rgba(17, 24, 39, 0.10);
  --ag-row-border-color: rgba(17, 24, 39, 0.06);

  /* header */
  --ag-header-background-color: #ffffff;
  --ag-header-foreground-color: #111827;

  /* rows */
  --ag-odd-row-background-color: #fbfbfc;
  --ag-row-hover-color: rgba(17, 24, 39, 0.03);
  --ag-selected-row-background-color: rgba(0, 102, 204, 0.08);
}

/* Header text weight */
.custom-ag-grid .ag-header-cell-label {
  font-weight: 600;
}

/* Slightly nicer cell padding for composite layout */
.custom-ag-grid .ag-cell {
  padding-top: 6px;
  padding-bottom: 6px;
}

/* Remove harsh focus outline on cells (optional modern feel) */
.custom-ag-grid .ag-cell:focus,
.custom-ag-grid .ag-cell-focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Tabular numerals helper (you already apply pi-tnum in python for some fields) */
.pi-tnum {
  font-variant-numeric: tabular-nums;
}

/* Right-align header text to match right-aligned cell content */
.ag-header-cell.pi-header-right .ag-header-cell-label {
  justify-content: flex-end;
}

/* ---- composite cell building blocks ---- */
.pi-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  line-height: 1.15;
  min-height: 100%;
  max-width: 100%;
}

.pi-primary,
.pi-secondary,
.pi-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pi-primary {
  font-weight: 600;
  color: #111827;
}

.pi-secondary {
  font-size: 12px;
  color: #6b7280;
}

.pi-meta {
  font-size: 11px;
  color: #9ca3af;
}

/* Right-align the price composite column */
.pi-price-cell {
  align-items: flex-end;
  text-align: right;
}

.pi-delta.is-pos { color: #009e8f; } /* your COL_POS */
.pi-delta.is-neg { color: #d55e00; } /* your COL_NEG */
.pi-delta.is-neu { color: #6b6b6b; } /* your COL_NEU */
.pi-delta.is-na  { color: #9ca3af; }

/* ---- Trade Name cell with lifecycle badge ---- */
.pi-trade-name-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  white-space: nowrap;
  min-height: 100%;
  width: 100%;
}
.pi-trade-name-cell > span:first-child {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}
.pi-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 1px 5px;
  border-radius: 3px;
  line-height: 1.4;
}
.pi-badge-new  { background: #d1fae5; color: #065f46; }
.pi-badge-disc { background: #fde8e0; color: #b34500; }
.pi-badge-back { background: #dbeafe; color: #1e40af; }