/* KPI grid */
.kpi-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom: 16px;
}
.kpi-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: var(--shadow);
}
.kpi-label {
  color: var(--text-secondary);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.kpi-value {
  font-size: 28px;
  font-weight: 600;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.kpi-positive { color: var(--success-color); }
.kpi-negative { color: var(--danger-color); }

/* Tighter KPI cards on phones — fit two per row, smaller type. */
@media (max-width: 768px) {
  .kpi-grid {
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin-bottom: 12px;
  }
  .kpi-card { padding: 10px 12px; border-radius: 10px; }
  .kpi-value { font-size: 20px; }
  .kpi-label { font-size: 11px; }
  .kpi-sub { font-size: 11px !important; }
}
@media (max-width: 380px) {
  .kpi-grid { grid-template-columns: 1fr; }
}

/* Sidebar nav */
.sidebar-nav { display: flex; flex-direction: column; gap: 4px; padding: 8px; }
.sidebar-nav .nav-item {
  display: flex; align-items: center; gap: 12px;
  background: transparent; border: 0; color: var(--text-primary);
  padding: 10px 12px; border-radius: 8px; text-align: left;
  font-size: 14px; cursor: pointer;
}
.sidebar-nav .nav-item:hover { background: var(--bg-hover, rgba(255,255,255,.08)); }
.sidebar-nav .nav-item.active { background: var(--accent-color); color: #fff; }

/* Working orders table — sticky columns + headers.
 * Use dvh so the visible region is correct on mobile (browser chrome aware).
 * Use clamp() to keep a usable minimum even on short viewports. */
.working-orders {
  max-height: clamp(280px, calc(100dvh - 360px), 100dvh);
  overflow: auto;
}
.working-orders table { margin-bottom: 0; }
.working-orders th, .working-orders td { white-space: nowrap; }
.working-orders thead th {
  position: sticky; top: 0; background: var(--bg-secondary); z-index: 3;
}
.working-orders th[data-sticky="left"],
.working-orders td[data-sticky="left"] {
  position: sticky; left: 0; min-width: 120px;
  background: var(--bg-secondary); z-index: 2;
  box-shadow: 1px 0 0 var(--border-color);
}
.working-orders th[data-sticky="right"],
.working-orders td[data-sticky="right"] {
  position: sticky; right: 0; min-width: 90px;
  background: var(--bg-secondary); z-index: 2;
  box-shadow: -1px 0 0 var(--border-color);
}
.working-orders th[data-sticky="right-1"],
.working-orders td[data-sticky="right-1"] {
  position: sticky; right: 90px; min-width: 100px;
  background: var(--bg-secondary); z-index: 2;
}
.working-orders thead th[data-sticky] { z-index: 4; }

/* On mobile, drop right-side sticky columns — they steal too much horizontal
 * space on a narrow viewport. Headers/left sticky still help orientation.
 * Also drop the fixed max-height: the parent [data-view-root="dashboard"]
 * scrolls vertically, so a bounded inner scroller would create nested
 * scrollbars and trap touch gestures. Letting the table grow naturally
 * gives one clean page-level scroll. */
@media (max-width: 768px) {
  .working-orders {
    max-height: none;
    /* Allow horizontal scroll for wide tables, but let vertical content
     * flow up to the page-level scroll on the dashboard view root. */
    overflow-x: auto;
    overflow-y: visible;
    font-size: 0.82rem;
  }
  .working-orders thead th {
    /* Sticky header stays anchored to the *page* scroll on mobile. */
    position: sticky;
    top: 0;
  }
  .working-orders th[data-sticky="right"],
  .working-orders td[data-sticky="right"],
  .working-orders th[data-sticky="right-1"],
  .working-orders td[data-sticky="right-1"] {
    position: static;
    box-shadow: none;
    min-width: 0;
  }
  .working-orders th[data-sticky="left"],
  .working-orders td[data-sticky="left"] {
    min-width: 90px;
  }
  .working-orders .table-sm th,
  .working-orders .table-sm td { padding: 0.3rem 0.4rem; }
}

/* Dashboard controls bar — already uses flex-wrap; ensure wrap children
 * don’t overflow on narrow viewports. */
@media (max-width: 576px) {
  .dash-controls { gap: 0.4rem; }
  .dash-controls .btn-group { flex-wrap: wrap; }
  .dash-controls .ms-auto { margin-left: 0 !important; }
  .dash-controls > label { font-size: 0.78rem; }
}

/* Cell flash on diff */
.cell-flash { animation: cell-flash 1.2s ease; }
@keyframes cell-flash {
  0% { background: rgba(255, 215, 0, .35); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .cell-flash { animation: none; }
}

/* Ensure dashboard text is readable across themes (overrides Bootstrap defaults
   that hard-code dark text on .table, .text-muted, headings, etc.). */
.dashboard-content,
.dashboard-content h1,
.dashboard-content h2,
.dashboard-content h3,
.dashboard-content h4,
.dashboard-content h5,
.dashboard-content h6,
.dashboard-content label,
.dashboard-content p,
.dashboard-content span,
.dashboard-content small {
  color: var(--text-primary);
}

.dashboard-content .text-muted,
.dashboard-content .small.text-muted,
.dashboard-content .kpi-sub {
  color: var(--text-secondary) !important;
}

/* Bootstrap table overrides — make table cells, headers, hover, and striping
   pick up the active theme variables instead of the default light-mode colors. */
.dashboard-content .table {
  --bs-table-color: var(--text-primary);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--border-color);
  --bs-table-striped-color: var(--text-primary);
  --bs-table-striped-bg: var(--bg-tertiary);
  --bs-table-hover-color: var(--text-primary);
  --bs-table-hover-bg: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-color);
}

.dashboard-content .table > :not(caption) > * > * {
  color: var(--text-primary);
  background-color: transparent;
  border-color: var(--border-color);
}

.dashboard-content .table thead th {
  color: var(--text-primary);
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
}

/* Preserve P/L color cues even with the broad text-primary rule above. */
.dashboard-content .kpi-positive,
.dashboard-content .table .kpi-positive,
.dashboard-content .text-success { color: var(--success-color) !important; }
.dashboard-content .kpi-negative,
.dashboard-content .table .kpi-negative,
.dashboard-content .text-danger { color: var(--danger-color) !important; }
.dashboard-content .text-warning { color: var(--warning-color) !important; }

/* Working-orders totals footer: highlighted row with bold uppercase label. */
.dashboard-content .table tfoot .totals-row > td {
  background-color: var(--bg-secondary);
  border-top: 2px solid var(--border-color);
  font-weight: 700;
}
.dashboard-content .table tfoot .totals-row .totals-label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Print stylesheet ──────────────────────────────────────────────────────
 * When the user prints from the dashboard view, drop the app chrome
 * (sidebar, header, chat input) and force a light palette so KPI cards
 * and tables render legibly on paper. The ``[data-view="dashboard"]``
 * gate keeps these rules from leaking into other view-specific prints.
 */
@media print {
  /* Hide the SPA chrome unconditionally; only the active view content prints. */
  .sidebar,
  .sidebar-backdrop,
  .chat-header,
  .chat-container,
  .modal-overlay,
  #welcomeScreen,
  #loginScreen {
    display: none !important;
  }
  /* Reset the app-container layout (it's a flex row by default) so the
   * dashboard content can occupy the entire page width.
   */
  .app-container,
  .main-content {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .dashboard-content {
    color: #000 !important;
    background: #fff !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .dashboard-content,
  .dashboard-content * {
    color: #000 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .dashboard-content .kpi-grid {
    /* Two columns prints cleaner on letter-size landscape than auto-fit. */
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .dashboard-content .kpi-card {
    border: 1px solid #999 !important;
    page-break-inside: avoid;
  }
  .dashboard-content .kpi-positive,
  .dashboard-content .text-success { color: #006400 !important; }
  .dashboard-content .kpi-negative,
  .dashboard-content .text-danger { color: #8b0000 !important; }
  .dashboard-content .table {
    border-collapse: collapse;
  }
  .dashboard-content .table th,
  .dashboard-content .table td {
    border: 1px solid #ccc !important;
    padding: 4px 6px !important;
  }
  .dashboard-content .table thead {
    /* Repeat headers across page breaks. */
    display: table-header-group;
  }
  @page {
    size: letter landscape;
    margin: 0.5in;
  }
}


/* ===== Charts panel (Phase A) =================================================
 * Grid layout for the dashboard analytics charts. Two responsive columns on
 * desktop with a chart-wide modifier that spans both. ApexCharts supplies
 * its own SVG; we only style the wrapping card.
 */
.charts-panel {
  margin-top: 16px;
}
.charts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.chart-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 12px 14px;
}
.chart-card.chart-wide {
  grid-column: span 2;
}
.chart-header {
  display: flex;
  flex-direction: column;
  margin-bottom: 4px;
}
.chart-title {
  font-weight: 600;
  color: var(--text-primary);
}
.chart-sub {
  color: var(--text-secondary);
}
.chart-body {
  /* ApexCharts inherits the height from its options; keep min-height
     so the card doesn't collapse before the first render completes. */
  min-height: 220px;
}

/* Multi-pane indicator stack for the "SPX Indicators" card.
   Each pane is its own ApexCharts instance — they share a chart.group
   so zoom/crosshair sync across panes. The panes don't need their own
   borders; the parent .chart-card already supplies the visual frame. */
.chart-indicators-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 780px;
}
.indicator-pane {
  width: 100%;
}
.indicator-pane-price  { min-height: 320px; }
.indicator-pane-volume { min-height: 100px; }
.indicator-pane-rsi    { min-height: 120px; }
.indicator-pane-macd   { min-height: 140px; }
.indicator-pane-atr    { min-height: 100px; }

@media (max-width: 768px) {
  .charts-grid { grid-template-columns: 1fr; }
  .chart-card.chart-wide { grid-column: span 1; }
}


/* Chart action buttons (e.g. CSV download in the simulator card header). */
.chart-card .chart-header {
  position: relative;
}
.chart-card .chart-action-btn {
  position: absolute;
  top: 0;
  right: 0;
  padding: 2px 8px;
  font-size: 0.75rem;
  line-height: 1.4;
}
.chart-card .chart-action-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}