/* ═══════════════════════════════════════════════════════════════
   AUCTIONSPLUS MARKET INSIGHTS MODULE
   cattle_metrics_combined v2 — with Side Panel
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=Roboto:wght@400;500;600;700&display=swap');

/* ── Design tokens ── */
.ap-page-wrapper {
  --ap-navy:          #0f1f3d;
  --ap-navy-mid:      #1a3260;
  --ap-blue:          #1e4d8c;
  --ap-blue-light:    #2563a8;
  --ap-accent:        #0ea5e9;
  --ap-green:         #16a34a;
  --ap-green-bg:      #dcfce7;
  --ap-red:           #dc2626;
  --ap-red-bg:        #fee2e2;
  --ap-surface:       #ffffff;
  --ap-surface-2:     #f8fafc;
  --ap-surface-3:     #f1f5f9;
  --ap-border:        #e2e8f0;
  --ap-border-strong: #cbd5e1;
  --ap-text:          #0f172a;
  --ap-text-2:        #475569;
  --ap-text-muted:    #94a3b8;
  --ap-shadow-sm:     0 1px 3px rgba(15,31,61,0.08), 0 1px 2px rgba(15,31,61,0.04);
  --ap-shadow-md:     0 4px 16px rgba(15,31,61,0.10), 0 2px 6px rgba(15,31,61,0.06);
  --ap-radius:        10px;
  --ap-radius-sm:     6px;
  --ap-radius-pill:   999px;
}

/* ═══════════════════════════════════════════════════════════════
   1. HUBSPOT BUTTON RESETS
   ═══════════════════════════════════════════════════════════════ */

.ap-page-wrapper button.ap-week-date-pill,
.ap-page-wrapper button.ap-week-date-pill:focus,
.ap-page-wrapper button.ap-week-arrow,
.ap-page-wrapper button.ap-week-arrow:focus {
  outline: none !important;
  -webkit-appearance: none !important;
  box-shadow: var(--ap-shadow-sm) !important;
}
.ap-page-wrapper button.ap-week-arrow:hover {
  box-shadow: var(--ap-shadow-sm) !important;
}
.ap-page-wrapper button.ap-top-tab,
.ap-page-wrapper button.ap-top-tab:focus {
  outline: none !important;
  -webkit-appearance: none !important;
}
.ap-page-wrapper button.ap-panel-tab,
.ap-page-wrapper button.ap-panel-tab:focus {
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  outline: none !important;
  -webkit-appearance: none !important;
}
.ap-page-wrapper button.ap-filter-pill,
.ap-page-wrapper button.ap-filter-pill:focus {
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
}
.ap-page-wrapper button.ap-filter-pill.active {
  background: var(--ap-navy) !important;
  border-color: var(--ap-navy) !important;
  color: #fff !important;
}
.ap-page-wrapper button.ap-filter-pill:hover {
  border-color: var(--ap-navy) !important;
  color: var(--ap-navy) !important;
}
.ap-page-wrapper button.ap-btn-ghost,
.ap-page-wrapper button.ap-btn-ghost:focus {
  outline: none !important;
  -webkit-appearance: none !important;
}
button.ap-hist-pill,
button.ap-hist-pill:focus {
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
}
button.ap-hist-pill.active {
  background: var(--ap-navy) !important;
  border-color: var(--ap-navy) !important;
  color: #fff !important;
}
button.ap-hist-pill:hover {
  border-color: var(--ap-blue) !important;
  color: var(--ap-blue) !important;
  background: #eff4ff !important;
}
button.ap-toggle-btn,
button.ap-toggle-btn:focus {
  outline: none !important;
  -webkit-appearance: none !important;
}
button.ap-toggle-btn.active {
  background: var(--ap-navy) !important;
  border-color: var(--ap-navy) !important;
  color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════
   2. PAGE WRAPPER & WEEK NAV
   ═══════════════════════════════════════════════════════════════ */

.ap-page-wrapper {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  padding: 28px 0;
  width: 100%;
  box-sizing: border-box;
}

.ap-week-nav { margin-bottom: 20px; }

.ap-week-nav-inner {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ap-week-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--ap-border);
  background: var(--ap-surface);
  color: var(--ap-text-2);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.18s ease;
  box-shadow: var(--ap-shadow-sm);
  padding: 0;
}
.ap-week-arrow:hover { border-color: var(--ap-navy); color: var(--ap-navy); background: var(--ap-surface-3); }
.ap-week-arrow:disabled { opacity: 0.3; cursor: default; pointer-events: none; }

.ap-week-pill-track {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
  align-items: center;
  flex: 1;
}
.ap-week-pill-track::-webkit-scrollbar { display: none; }

.ap-week-date-pill {
  display: flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: var(--ap-radius-pill);
  border: 1.5px solid var(--ap-border);
  background: var(--ap-surface);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.18s ease;
  box-shadow: var(--ap-shadow-sm);
  color: var(--ap-text-2);
}
.ap-week-date-pill:hover { border-color: var(--ap-navy); color: var(--ap-navy); background: var(--ap-surface-3); }
.ap-week-date-pill.active {
  background: var(--ap-navy);
  border-color: var(--ap-navy);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(15,31,61,0.20);
}

.ap-week-goback-standalone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--ap-radius-pill);
  border: 1.5px dashed var(--ap-border-strong);
  background: var(--ap-surface);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ap-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.18s ease;
}
.ap-week-goback-standalone:hover { border-color: var(--ap-navy); color: var(--ap-navy); background: var(--ap-surface-3); }
.ap-week-goback-standalone select {
  border: none;
  background: transparent;
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: inherit;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  max-width: 155px;
}

/* ═══════════════════════════════════════════════════════════════
   3. TOP-LEVEL SECTION TABS
   ═══════════════════════════════════════════════════════════════ */

.ap-top-tabs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
}

.ap-top-tabs {
  display: flex;
  gap: 2px;
  background: var(--ap-surface);
  border: 1.5px solid var(--ap-border);
  border-radius: var(--ap-radius);
  padding: 4px;
  box-shadow: var(--ap-shadow-sm);
  width: fit-content;
}

.ap-top-tab {
  padding: 8px 20px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  color: var(--ap-text-2);
  transition: all 0.18s ease;
  border: none;
  background: transparent;
  font-family: 'DM Sans', sans-serif;
}
.ap-top-tab:hover { color: var(--ap-navy); background: var(--ap-surface-3); }
.ap-top-tab.active {
  background: var(--ap-navy);
  color: #fff;
  box-shadow: 0 2px 8px rgba(15,31,61,0.20);
}

/* ═══════════════════════════════════════════════════════════════
   4. KPI CARDS
   ═══════════════════════════════════════════════════════════════ */

.ap-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.ap-kpi-card {
  background: var(--ap-surface);
  border: 1.5px solid var(--ap-border);
  border-radius: var(--ap-radius);
  padding: 20px 22px 16px;
  box-shadow: var(--ap-shadow-sm);
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
  animation: apFadeUp 0.35s ease both;
}
.ap-kpi-card:nth-child(1) { animation-delay: 0.05s; }
.ap-kpi-card:nth-child(2) { animation-delay: 0.10s; }
.ap-kpi-card:nth-child(3) { animation-delay: 0.15s; }
.ap-kpi-card:nth-child(4) { animation-delay: 0.20s; }
.ap-kpi-card:hover { box-shadow: var(--ap-shadow-md); transform: translateY(-1px); }
.ap-kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ap-navy), var(--ap-accent));
  border-radius: var(--ap-radius) var(--ap-radius) 0 0;
}

.ap-kpi-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--ap-text-muted);
  margin-bottom: 10px;
  font-family: 'DM Sans', sans-serif;
  line-height: 1.3;
}

.ap-kpi-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--ap-navy);
  line-height: 1;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
  font-family: 'Roboto', Arial, sans-serif;
}

.ap-kpi-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 24px;
}

.ap-change-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 10px;
  border-radius: var(--ap-radius-pill);
  font-size: 12px;
  font-weight: 700;
  font-family: 'Roboto', Arial, sans-serif;
}
.ap-change-pill.up   { background: #d1fae5; color: #065f46; }
.ap-change-pill.down { background: #fee2e2; color: #991b1b; }

/* ═══════════════════════════════════════════════════════════════
   5. DATA PANEL
   ═══════════════════════════════════════════════════════════════ */

.ap-data-panel {
  background: var(--ap-surface);
  border: 1.5px solid var(--ap-border);
  border-radius: var(--ap-radius);
  box-shadow: var(--ap-shadow-sm);
  overflow: hidden;
  animation: apFadeUp 0.4s 0.2s ease both;
}

.ap-panel-tabs {
  display: flex;
  border-bottom: 2px solid var(--ap-border);
  padding: 0 20px;
  background: var(--ap-surface-2);
  overflow-x: auto;
  scrollbar-width: none;
  position: relative;
  z-index: 2;
}
.ap-panel-tabs::-webkit-scrollbar { display: none; }

.ap-panel-tab {
  padding: 13px 18px 11px;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  color: var(--ap-text-muted);
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: all 0.18s ease;
  background: transparent;
  font-family: 'DM Sans', sans-serif;
  white-space: nowrap;
  flex-shrink: 0;
}
.ap-panel-tab:hover { color: var(--ap-navy); background: var(--ap-surface-3); box-shadow: inset 0 -3px 0 0 rgba(15,31,61,0.25); }
.ap-panel-tab.active { color: var(--ap-navy); font-weight: 600; background: var(--ap-surface-3); box-shadow: inset 0 -3px 0 0 var(--ap-navy); }

/* ── Dark header bar ── */
.ap-panel-header {
  background: var(--ap-navy);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ap-panel-title {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.01em;
}

.ap-panel-subtitle {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  margin-top: 3px;
}

.ap-btn-header-dl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border-radius: var(--ap-radius-sm);
  border: 1.5px solid rgba(255,255,255,0.3);
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: 'DM Sans', sans-serif;
  white-space: nowrap;
  flex-shrink: 0;
}
.ap-btn-header-dl:hover { border-color: rgba(255,255,255,0.7); color: #fff; background: rgba(255,255,255,0.12); }

/* ── Filter row ── */
.ap-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 22px;
  border-bottom: 1px solid var(--ap-border);
  gap: 12px;
  flex-wrap: wrap;
}

.ap-filter-pills { display: flex; gap: 6px; flex-wrap: wrap; }

.ap-filter-pill {
  padding: 6px 16px;
  border-radius: var(--ap-radius-pill);
  border: 1.5px solid var(--ap-border-strong);
  background: var(--ap-surface);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: var(--ap-text-2);
  transition: all 0.18s ease;
  font-family: 'DM Sans', sans-serif;
}
.ap-filter-pill:hover { border-color: var(--ap-navy); color: var(--ap-navy); }
.ap-filter-pill.active { background: var(--ap-navy); border-color: var(--ap-navy); color: #fff; }

.ap-view-toggle { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.ap-toggle-label { font-size: 12.5px; font-weight: 500; color: var(--ap-text-muted); white-space: nowrap; transition: color 0.2s; }
.ap-toggle-label.active { color: var(--ap-navy); font-weight: 600; }

.ap-toggle-switch { position: relative; width: 42px; height: 24px; flex-shrink: 0; }
.ap-toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.ap-toggle-slider { position: absolute; inset: 0; background: var(--ap-navy); border-radius: var(--ap-radius-pill); cursor: pointer; transition: background 0.25s ease; }
.ap-toggle-slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: white; border-radius: 50%; transition: transform 0.25s ease; box-shadow: 0 1px 4px rgba(0,0,0,0.2); }
.ap-toggle-switch input:checked + .ap-toggle-slider { background: var(--ap-blue-light); }
.ap-toggle-switch input:checked + .ap-toggle-slider::before { transform: translateX(18px); }

/* ═══════════════════════════════════════════════════════════════
   6. TABLE + SIDE PANEL LAYOUT
   ═══════════════════════════════════════════════════════════════ */

/* Outer wrapper — just a relative anchor, natural height of table */
.ap-sp-layout {
  position: relative;
}

/* Table area — completely unchanged, scrolls horizontally as normal */
.ap-sp-table-area {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Side panel — floats over the right edge of the table.
   NEVER affects table layout. Scroll right to see hidden columns. */
.ap-sp-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 290px;
  height: 100%;
  background: #fff;
  border-left: 1.5px solid var(--ap-border);
  box-shadow: -4px 0 16px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 8px;
  z-index: 10;
  transition: transform 0.3s ease, opacity 0.25s ease;
  transform: translateX(0);
  opacity: 1;
}

/* Hidden — slides off to the right, zero layout impact */
.ap-sp-panel.hidden {
  transform: translateX(105%);
  opacity: 0;
  pointer-events: none;
}

/* Placeholder */
.ap-sp-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  color: var(--ap-text-muted);
  font-size: 10px;
  line-height: 1.4;
  flex: 1 1 auto;
  padding: 8px;
}
.ap-sp-placeholder svg { opacity: 0.3; width: 20px; height: 20px; }

/* Content — flex column, chart dominates */
.ap-sp-content {
  display: none;
  flex-direction: column;
  gap: 3px;
  height: 100%;
  min-height: 0;
}
.ap-sp-content.visible { display: flex; }

/* TOP ROW: category name left, metric toggle + hide btn right — all on one line */
.ap-sp-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  min-width: 0;
}
.ap-sp-cat-name {
  flex: 1 1 auto;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ap-navy);
  font-family: 'DM Sans', sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Metric toggle — tiny pill, abbreviated labels */
.ap-sp-metric-group {
  display: flex;
  flex-shrink: 0;
  gap: 1px;
  background: var(--ap-surface-3);
  border-radius: 4px;
  padding: 1px;
}
.ap-sp-metric-btn {
  padding: 2px 5px;
  border-radius: 3px;
  border: none;
  background: transparent;
  color: var(--ap-text-muted);
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
  line-height: 1.4;
}
.ap-sp-metric-btn:hover  { color: var(--ap-navy); }
.ap-sp-metric-btn.active { background: var(--ap-surface); color: var(--ap-navy); box-shadow: 0 1px 2px rgba(0,0,0,0.1); }

/* Hide button — just an × icon, tiny */
.ap-sp-hide-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  border: 1px solid var(--ap-border);
  background: transparent;
  color: var(--ap-text-muted);
  cursor: pointer;
  transition: all 0.12s;
  font-size: 11px;
  line-height: 1;
  padding: 0;
}
.ap-sp-hide-light:hover { border-color: var(--ap-navy); color: var(--ap-navy); }

/* Subtitle + legend on one line */
.ap-sp-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.ap-sp-cat-sub {
  font-size: 8.5px;
  color: var(--ap-text-muted);
  white-space: nowrap;
}
.ap-sp-legend {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.ap-sp-legend-item {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 8.5px;
  color: var(--ap-text-2);
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  white-space: nowrap;
}
.ap-sp-legend-line { width: 12px; height: 2px; border-radius: 2px; flex-shrink: 0; }
.ap-sp-legend-line.current { background: var(--ap-navy); }
.ap-sp-legend-line.prior   { border-top: 2px dashed #94a3b8; height: 0; }

/* Chart — takes ALL remaining space */
.ap-sp-chart-wrap {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  width: 100%;
}
.ap-sp-chart-wrap canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Stats — single row of 4 tiny chips at the bottom */
.ap-sp-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  flex-shrink: 0;
}
.ap-sp-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  background: var(--ap-surface-3);
  border-radius: 3px;
  padding: 4px 2px;
  text-align: center;
}
.ap-sp-stat-val {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ap-navy);
  font-family: 'Roboto', Arial, sans-serif;
  line-height: 1;
}
.ap-sp-stat-val.pos { color: var(--ap-green); }
.ap-sp-stat-val.neg { color: var(--ap-red); }
.ap-sp-stat-lbl {
  font-size: 7px;
  font-weight: 600;
  color: var(--ap-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
}

/* Header actions — permanently hidden */
.ap-sp-header-actions { display: none !important; }

/* Show chart button in navy header */
.ap-sp-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: var(--ap-radius-sm);
  border: 1.5px solid rgba(255,255,255,0.3);
  background: transparent;
  color: rgba(255,255,255,0.8);
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.ap-sp-toggle-btn:hover { border-color: rgba(255,255,255,0.7); color: #fff; background: rgba(255,255,255,0.1); }

.ap-sp-header-divider { display: none; }
  height: 18px;
  background: rgba(255,255,255,0.2);
  flex-shrink: 0;
}

/* Active row highlight — box-shadow avoids layout shift */
.ap-table tbody tr.ap-sp-active td {
  background: #eef4ff !important;
}
.ap-table tbody tr.ap-sp-active td:first-child {
  box-shadow: inset 3px 0 0 var(--ap-navy);
}

/* Category cell — flex so label + sparkline btn sit inline */
.ap-table td.ap-cat {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Sparkline icon button */
.ap-sp-spark-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 2px 4px;
  border: 1px solid var(--ap-border);
  border-radius: 4px;
  background: transparent;
  color: var(--ap-text-muted);
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1;
  opacity: 0.5;
}
.ap-sp-spark-btn:hover,
.ap-sp-active .ap-sp-spark-btn {
  opacity: 1;
  border-color: var(--ap-navy);
  color: var(--ap-navy);
  background: rgba(15,31,61,0.05);
}

/* ═══════════════════════════════════════════════════════════════
   7. TABLE
   ═══════════════════════════════════════════════════════════════ */

.ap-table-scroll-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  padding: 0 0 4px;
}
.ap-table-scroll-wrapper::-webkit-scrollbar { height: 4px; }
.ap-table-scroll-wrapper::-webkit-scrollbar-thumb { background: var(--ap-border-strong); border-radius: 4px; }

.ap-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  min-width: 600px;
  font-family: 'Roboto', Arial, sans-serif;
}

.ap-table thead tr.ap-group-header th {
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ap-navy);
  text-align: center;
  border-bottom: 1px solid var(--ap-border);
  background: var(--ap-surface-3);
  font-family: 'DM Sans', sans-serif;
}
.ap-group-th { color: var(--ap-navy) !important; border-bottom: 2px solid var(--ap-navy) !important; background: #eef4ff !important; }
.ap-group-th-empty { background: var(--ap-surface-3) !important; border-bottom: 1px solid var(--ap-border) !important; }

.ap-table thead tr.ap-col-labels th,
.ap-table thead tr:not(.ap-group-header) th {
  background: var(--ap-surface-2);
  padding: 7px 10px;
  text-align: center;
  border-bottom: 2px solid var(--ap-border-strong);
  white-space: nowrap;
  color: var(--ap-text);
  font-weight: 700;
  font-size: 12px;
  font-family: 'DM Sans', sans-serif;
}
.ap-table thead th:first-child { text-align: left; }

.ap-table thead th:first-child,
.ap-table tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
}
.ap-table thead th:first-child { background: var(--ap-surface-2); z-index: 3; }
.ap-table tbody td:first-child { background: #fff; }
.ap-table tbody tr:hover td:first-child { background: var(--ap-surface-3); }

.ap-stock-header td {
  padding: 6px 10px;
  border-bottom: 1px solid #dbeafe;
  border-top: 1px solid #dbeafe;
  color: var(--ap-blue);
  font-weight: 700;
  font-size: 12.5px;
  background: #f0f6ff !important;
  font-family: 'DM Sans', sans-serif;
  position: sticky;
  left: 0;
  z-index: 2;
}
.ap-table tbody td {
  padding: 6px 10px;
  text-align: center;
  border-bottom: 1px solid var(--ap-border);
  color: var(--ap-text);
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 12.5px;
  line-height: 1.3;
  background: #fff;
}
.ap-table tbody td:first-child {
  text-align: left;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 12.5px;
}
.ap-table tbody tr:last-child td { border-bottom: none; }
.ap-table tbody tr:hover td { background: var(--ap-surface-3); }
.ap-table tbody tr { cursor: pointer; }

.ap-pos, .ap-table td.ap-pos { color: var(--ap-green) !important; font-weight: 600; }
.ap-neg, .ap-table td.ap-neg { color: var(--ap-red) !important; font-weight: 600; }

.ap-change-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 12.5px;
  font-weight: 700;
  font-family: 'Roboto', Arial, sans-serif;
  white-space: nowrap;
}
.ap-change-badge.up   { color: #065f46; }
.ap-change-badge.down { color: #991b1b; }

/* ═══════════════════════════════════════════════════════════════
   8. CHARTS
   ═══════════════════════════════════════════════════════════════ */

#ap-charts-container { background: var(--ap-surface-2); }

.ap-charts-subnav {
  display: flex;
  padding: 0 20px;
  border-bottom: 2px solid var(--ap-border);
  background: var(--ap-surface);
  overflow-x: auto;
  scrollbar-width: none;
}
.ap-charts-subnav::-webkit-scrollbar { display: none; }

.ap-charts-subnav-btn {
  padding: 11px 18px 10px;
  margin-bottom: -2px;
  background: transparent;
  border: none;
  border-bottom: 2.5px solid transparent;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ap-text-muted);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.ap-charts-subnav-btn:hover  { color: var(--ap-navy); background: var(--ap-surface-3); box-shadow: inset 0 -2.5px 0 0 var(--ap-navy); }
.ap-charts-subnav-btn.active { color: var(--ap-navy); font-weight: 700; background: var(--ap-surface-3); box-shadow: inset 0 -2.5px 0 0 var(--ap-navy); }

.ap-snapshot-kpis { display: flex; background: var(--ap-surface); border-bottom: 1px solid var(--ap-border); }
.ap-snapshot-kpi { flex: 1; padding: 20px 16px; border-right: 1px solid var(--ap-border); text-align: center; }
.ap-snapshot-kpi:last-child { border-right: none; }
.ap-snapshot-kpi-value { font-size: 28px; font-weight: 700; color: var(--ap-navy); line-height: 1; margin-bottom: 5px; font-family: 'Roboto', Arial, sans-serif; }
.ap-snapshot-kpi-label { font-size: 10.5px; font-weight: 700; color: var(--ap-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; }
.ap-snapshot-kpi-sub { font-size: 10.5px; color: var(--ap-text-muted); }
.ap-snapshot-kpi-pos { color: var(--ap-green); }
.ap-snapshot-kpi-neg { color: var(--ap-red); }

.ap-charts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 20px; box-sizing: border-box; }
.ap-chart-box { background: var(--ap-surface); border: 1.5px solid var(--ap-border); border-radius: var(--ap-radius); padding: 18px; box-shadow: var(--ap-shadow-sm); overflow: hidden; min-width: 0; }
.ap-chart-box h3 { margin: 0 0 12px 0; font-size: 12.5px; font-weight: 700; color: var(--ap-navy); font-family: 'DM Sans', sans-serif; }
.ap-chart-box canvas { max-height: 220px; width: 100% !important; }
.ap-chart-wide { grid-column: span 2; }
.ap-chart-wide canvas { max-height: 210px; }

.ap-chart-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.ap-chart-header h3 { margin: 0; }
.ap-chart-toggle { display: flex; gap: 4px; }

.ap-toggle-btn { padding: 5px 12px; border-radius: var(--ap-radius-pill); border: 1.5px solid var(--ap-border); background: var(--ap-surface-2); color: var(--ap-navy); font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700; cursor: pointer; transition: all 0.15s; }
.ap-toggle-btn:hover  { border-color: var(--ap-navy); background: #eff4ff; }
.ap-toggle-btn.active { background: var(--ap-navy); border-color: var(--ap-navy); color: #fff; }

.ap-chart-insight { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding: 7px 12px; background: var(--ap-navy); color: #fff; border-radius: var(--ap-radius-pill); font-size: 11.5px; font-weight: 500; width: fit-content; }
.ap-chart-insight:empty { display: none; }

.ap-historical-controls { display: flex; flex-wrap: wrap; gap: 16px; padding: 20px; background: var(--ap-surface); border-bottom: 1px solid var(--ap-border); }
.ap-hist-control-group { display: flex; flex-direction: column; gap: 6px; min-width: 180px; }
.ap-hist-label { font-size: 11px; font-weight: 700; color: var(--ap-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.ap-hist-select { padding: 8px 12px; border: 1.5px solid var(--ap-border); border-radius: var(--ap-radius-sm); font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; color: var(--ap-text); background: var(--ap-surface); cursor: pointer; outline: none; transition: border-color 0.15s; width: 100%; box-sizing: border-box; }
.ap-hist-select:focus { border-color: var(--ap-navy); }
.ap-hist-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.ap-hist-pill { padding: 5px 13px; border-radius: var(--ap-radius-pill); border: 1.5px solid var(--ap-border); background: var(--ap-surface); color: var(--ap-text-muted); font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.ap-hist-pill:hover  { border-color: var(--ap-navy); color: var(--ap-navy); background: #eff4ff; }
.ap-hist-pill.active { background: var(--ap-navy); border-color: var(--ap-navy); color: #fff; }

.ap-hist-chart-box { margin: 16px 20px 0; box-sizing: border-box; }
.ap-hist-chart-box canvas { min-height: 300px; max-height: 400px; }

.ap-historical-stats { display: flex; gap: 16px; padding: 16px 20px 20px; flex-wrap: wrap; }
.ap-hist-stat-card { flex: 1; min-width: 260px; background: var(--ap-surface); border: 1.5px solid var(--ap-border); border-radius: var(--ap-radius); padding: 16px 20px; box-shadow: var(--ap-shadow-sm); }
.ap-hist-stat-title { font-size: 13px; font-weight: 700; color: var(--ap-navy); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--ap-border); font-family: 'DM Sans', sans-serif; }
.ap-hist-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ap-hist-stat-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ap-hist-stat-num  { font-size: 18px; font-weight: 700; color: var(--ap-navy); font-family: 'DM Mono', monospace; }
.ap-hist-stat-lbl  { font-size: 10px; font-weight: 600; color: var(--ap-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }

/* ═══════════════════════════════════════════════════════════════
   9. UTILITIES & ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */

.hide { display: none !important; }

@keyframes apFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════
   10. RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .ap-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .ap-snapshot-kpis { flex-wrap: wrap; }
  .ap-snapshot-kpi { flex: 1 1 45%; min-width: 130px; border-right: none; border-bottom: 1px solid var(--ap-border); }
  .ap-charts-grid { grid-template-columns: 1fr; }
  .ap-chart-wide { grid-column: span 1; }
  .ap-hist-control-group { min-width: 0; }
  .ap-historical-controls { flex-direction: column; }
}

/* At narrow widths, side panel drops below the table */
@media (max-width: 720px) {
  .ap-sp-layout { flex-direction: column; }
  .ap-sp-panel {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    border-left: none;
    border-top: 1.5px solid var(--ap-border);
  }
  .ap-sp-panel.hidden { max-width: 0; height: 0; border-top-width: 0; }
  .ap-sp-stats { grid-template-columns: repeat(4, 1fr); }
  .ap-sp-header-actions { display: none !important; } /* use filter row on mobile */
}

@media (max-width: 600px) {
  .ap-page-wrapper { padding: 16px 0; }
  .ap-kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ap-kpi-value { font-size: 26px; }
  .ap-top-tabs { width: 100%; }
  .ap-top-tab { flex: 1; padding: 8px 10px; font-size: 12.5px; }
  .ap-filter-row { flex-direction: column; align-items: flex-start; }
  .ap-view-toggle { align-self: flex-end; }
  .ap-charts-grid { padding: 12px; gap: 12px; }
  .ap-hist-stat-grid { grid-template-columns: repeat(2, 1fr); }
}