@import url('tokens.css');
/* OVTLYR Trading Dashboard - Dark/Light Theme with Cyan/Teal Accents */

/* Colors, base size and page background live in tokens.css (shared with the Strategy Studio). */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  /* Clean dark mode with subtle cyan ambient glow */
  background: var(--app-bg);
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  overflow-x: hidden;
  min-height: 100vh;
  transition: background 0.3s ease, color 0.3s ease;
}

/* Light theme body background */
[data-theme="light"] body,
body[data-theme="light"] {
  background: var(--app-bg);
}

/* =====================================================
   Light Theme Component Overrides
   ===================================================== */

/* Header - Light */
[data-theme="light"] .header {
  background: linear-gradient(135deg, #eff3f1 0%, #e8edea 100%);
  border-bottom-color: rgba(90, 120, 100, 0.15);
  box-shadow: 0 2px 12px rgba(60, 90, 70, 0.08);
}

[data-theme="light"] .header h2,
[data-theme="light"] .header .page-title {
  color: var(--primary-strong);
}

/* Top Nav - Light */
[data-theme="light"] .top-nav {
  background: rgba(255, 255, 255, 0.95);
  border-bottom-color: color-mix(in srgb, var(--primary) 10%, transparent);
}

[data-theme="light"] .top-nav-item {
  color: var(--text-secondary);
}

[data-theme="light"] .top-nav-item:hover,
[data-theme="light"] .top-nav-item.active {
  color: var(--accent-purple);
}

/* Cards - Light */
[data-theme="light"] .card,
[data-theme="light"] .screener-container,
[data-theme="light"] .data-management-card,
[data-theme="light"] .trades-container,
[data-theme="light"] .settings-card {
  background: rgba(255, 255, 255, 0.95);
  border-color: color-mix(in srgb, var(--primary) 12%, transparent);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* Card Headers - Light */
[data-theme="light"] .card-header,
[data-theme="light"] .screener-header,
[data-theme="light"] .section-header {
  background: transparent;
  border-bottom-color: color-mix(in srgb, var(--primary) 10%, transparent);
}

[data-theme="light"] .card-header h3,
[data-theme="light"] .screener-header h2,
[data-theme="light"] .section-header h3 {
  color: var(--text-primary);
}

/* Tables - Light */
[data-theme="light"] table {
  background: transparent;
}

[data-theme="light"] thead th {
  background: #f7f8f6;
  color: var(--text-secondary);
  border-bottom: 2px solid color-mix(in srgb, var(--primary) 15%, transparent);
}

[data-theme="light"] .screener-table th.sortable:hover {
  background: #f0f2ef;
}


[data-theme="light"] .screener-table tbody tr:hover {
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}

[data-theme="light"] tbody tr {
  background: transparent;
  border-bottom: 1px solid #dde2dc;
}

[data-theme="light"] tbody tr:hover {
  background: color-mix(in srgb, var(--primary) 4%, transparent);
}

[data-theme="light"] tbody td {
  color: var(--text-primary);
}

/* Form Controls - Light */
[data-theme="light"] select,
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="date"],
[data-theme="light"] .form-control {
  background: #ffffff;
  border-color: #dde2dc;
  color: var(--text-primary);
}

[data-theme="light"] select:hover,
[data-theme="light"] input:hover,
[data-theme="light"] .form-control:hover {
  border-color: var(--accent-purple);
}

[data-theme="light"] select:focus,
[data-theme="light"] input:focus,
[data-theme="light"] .form-control:focus {
  border-color: var(--accent-purple);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent);
}

/* Labels - Light */
[data-theme="light"] label,
[data-theme="light"] .label {
  color: var(--text-secondary);
}

/* Buttons - Light (keep primary buttons purple) */
[data-theme="light"] .btn-secondary,
[data-theme="light"] .btn-outline {
  background: #f0f4f8;
  border: 1px solid #94a3b8;
  color: #334155;
  text-shadow: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .btn-secondary:hover,
[data-theme="light"] .btn-outline:hover {
  background: #e2e8f0;
  border-color: var(--primary-strong);
  color: #0f172a;
}

/* Alert Banner - Light */
[data-theme="light"] .alert-banner,
[data-theme="light"] .stale-data-alert {
  background: #fef3c7;
  border-color: #f59e0b;
}

[data-theme="light"] .stale-data-alert .alert-message {
  color: #92400e;
}

/* Badge/Status Pills - Light */
:where([data-theme="light"]) :where(.badge, .status-badge) {   /* fallback only; component badges win */
  background: #f0f2ef;
  color: var(--text-secondary);
}

/* Data Management Sidebar - Light */
[data-theme="light"] .nightly-status-card,
[data-theme="light"] .actions-card {
  background: rgba(255, 255, 255, 0.95);
  border-color: color-mix(in srgb, var(--primary) 12%, transparent);
}

[data-theme="light"] .nightly-status-card h4,
[data-theme="light"] .actions-card h4 {
  color: var(--text-primary);
}

/* Empty State - Light */
[data-theme="light"] .empty-state,
[data-theme="light"] .no-signals {
  color: var(--text-secondary);
}

/* Scrollbar - Light */
[data-theme="light"] ::-webkit-scrollbar-track {
  background: #f0f2ef;
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: #c8d0c8;
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Tooltip - Light */
[data-theme="light"] .tooltip,
[data-theme="light"] [data-tooltip]::before {
  background: #1e293b;
  color: #ffffff;
}

/* Trades Section - Light */
[data-theme="light"] .trades-group-header {
  background: linear-gradient(135deg, #f7f8f6, #ffffff);
}

[data-theme="light"] .trades-group-content {
  background: #ffffff;
}

[data-theme="light"] .trade-item {
  background: #f7f8f6;
  border-color: #dde2dc;
}

[data-theme="light"] .trade-item:hover {
  background: #f0f2ef;
  border-color: var(--accent-purple);
}

[data-theme="light"] .trade-symbol {
  color: var(--accent-purple);
}

/* Screener Table - Light */
[data-theme="light"] .screener-table {
  background: transparent;
}

[data-theme="light"] .screener-table th {
  background: #f7f8f6;
  color: var(--text-secondary);
}

[data-theme="light"] .screener-table td {
  color: var(--text-primary);
}

[data-theme="light"] .screener-table tr:hover {
  background: color-mix(in srgb, var(--primary) 4%, transparent);
}

/* Controls Panel - Light */
[data-theme="light"] .controls-panel,
[data-theme="light"] .screener-controls {
  background: rgba(255, 255, 255, 0.95);
  border-color: color-mix(in srgb, var(--primary) 12%, transparent);
}

/* Dropdown/Select in Light Mode */
[data-theme="light"] select option {
  background: #ffffff;
  color: var(--text-primary);
}

/* Sector Pills/Tags - Light */
[data-theme="light"] .sector-tag,
[data-theme="light"] .gics-sector {
  background: #f0f2ef;
  color: var(--text-secondary);
}

/* Status indicators - keep colors but adjust bg */
[data-theme="light"] .status-hold {
  background: rgba(5, 150, 105, 0.12);
}

[data-theme="light"] .status-roll {
  background: rgba(217, 119, 6, 0.12);
}

[data-theme="light"] .status-exit {
  background: rgba(220, 38, 38, 0.12);
}

/* Connection Status - Light */
[data-theme="light"] .connection-status {
  background: #f0f2ef;
}

/* Modal - Light */
[data-theme="light"] .modal-content {
  background: #ffffff;
  border-color: color-mix(in srgb, var(--primary) 15%, transparent);
}

[data-theme="light"] .modal-header {
  background: #f7f8f6;
  border-bottom-color: #dde2dc;
}

/* Summary Cards (Total P&L etc) - Light */
[data-theme="light"] .summary-card,
[data-theme="light"] .pnl-summary {
  background: rgba(255, 255, 255, 0.95);
  border-color: color-mix(in srgb, var(--primary) 12%, transparent);
}

/* Action Buttons in table - Light */
[data-theme="light"] .action-btn,
[data-theme="light"] .btn-sm {
  background: #f0f2ef;
  border-color: #dde2dc;
  color: var(--text-primary);
}

[data-theme="light"] .action-btn:hover,
[data-theme="light"] .btn-sm:hover {
  background: #dde2dc;
}

/* Keep primary action buttons colored (override .btn-sm gray wash) */
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-success,
[data-theme="light"] .btn-danger,
[data-theme="light"] .btn-warning {
  color: #ffffff;
  background: var(--button-primary);
  border-color: transparent;
}
[data-theme="light"] .btn-success { background: #059669; }
[data-theme="light"] .btn-danger { background: #dc2626; }
[data-theme="light"] .btn-warning { background: #d97706; }

/* Action Bar (Controls Panel) - Light */
[data-theme="light"] .action-bar {
  background: rgba(248, 250, 252, 0.95);
  border-color: color-mix(in srgb, var(--primary) 15%, transparent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .form-input {
  background: #ffffff;
  border-color: #dde2dc;
  color: var(--text-primary);
}

[data-theme="light"] .form-input:focus {
  border-color: var(--accent-purple);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}

/* Sample Data Table (Trades Table) - Light */
[data-theme="light"] .sample-data-table thead {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 8%, transparent), rgba(59, 130, 246, 0.06));
  border-bottom-color: color-mix(in srgb, var(--primary) 20%, transparent);
}

[data-theme="light"] .sample-data-table th {
  color: var(--accent-purple);
}

[data-theme="light"] .sample-data-table td {
  color: var(--text-primary);
  border-bottom-color: #dde2dc;
}

[data-theme="light"] .sample-data-table tbody tr:nth-child(odd) {
  background: rgba(248, 250, 252, 0.8);
}

[data-theme="light"] .sample-data-table tbody tr:nth-child(even) {
  background: #ffffff;
}

[data-theme="light"] .sample-data-table tbody tr:hover {
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}

/* Table Action Buttons - Light (more opacity) */
[data-theme="light"] .btn-edit,
[data-theme="light"] .btn-untrack,
[data-theme="light"] .btn-roll,
[data-theme="light"] .edit-btn,
[data-theme="light"] .untrack-btn,
[data-theme="light"] .roll-btn {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  color: var(--accent-purple);
}

[data-theme="light"] .btn-edit:hover,
[data-theme="light"] .btn-untrack:hover,
[data-theme="light"] .btn-roll:hover,
[data-theme="light"] .edit-btn:hover,
[data-theme="light"] .untrack-btn:hover,
[data-theme="light"] .roll-btn:hover {
  background: color-mix(in srgb, var(--primary) 20%, transparent);
  border-color: var(--accent-purple);
}

/* No Signals / Empty States - Light */
[data-theme="light"] .no-signals,
[data-theme="light"] .empty-state,
[data-theme="light"] .screener-empty,
[data-theme="light"] .no-data {
  color: var(--text-secondary);
  background: rgba(248, 250, 252, 0.5);
}

[data-theme="light"] .no-signals h3,
[data-theme="light"] .empty-state h3 {
  color: var(--text-primary);
}

[data-theme="light"] .no-signals p,
[data-theme="light"] .empty-state p {
  color: var(--text-secondary);
}

/* Dashboard Card - Light */
[data-theme="light"] .dashboard-card {
  background: rgba(255, 255, 255, 0.95);
  border-color: color-mix(in srgb, var(--primary) 10%, transparent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .card-title,
[data-theme="light"] .card-header h2 {
  color: var(--text-primary);
}

/* Delta input in light mode */
[data-theme="light"] .delta-input {
  background: #ffffff;
  border-color: #dde2dc;
  color: var(--text-primary);
}

/* Options chain table - Light */
[data-theme="light"] .options-chain-table tbody tr {
  background: #ffffff;
}

[data-theme="light"] .options-chain-table tbody tr:hover {
  background: color-mix(in srgb, var(--primary) 4%, transparent);
}

[data-theme="light"] .options-chain-table tbody tr.selected {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

/* Force dark text in light mode for all common elements */
/* zero specificity: a fallback for un-classed elements, never outranks a component color */
:where([data-theme="light"]) :where(td, th, p, span, div, label) {
  color: inherit;
}

[data-theme="light"] .symbol,
[data-theme="light"] .price,
[data-theme="light"] .sector,
[data-theme="light"] .value,
[data-theme="light"] .qty,
[data-theme="light"] .days {
  color: var(--text-primary);
}

/* Ensure table cells have dark text */
[data-theme="light"] table td {
  color: #0f172a;
}

[data-theme="light"] table th {
  color: #334155;
}

/* Symbol links in tables */
[data-theme="light"] td a,
[data-theme="light"] .symbol-link {
  color: var(--accent-purple);
}

/* Numeric values in tables */
[data-theme="light"] .text-right,
[data-theme="light"] td[align="right"] {
  color: #0f172a;
}

/* =====================================================
   Screener & Active Trades Cards - Light Theme
   Add subtle colored backgrounds to stand out
   ===================================================== */

/* Screener Container - Light purple tinted background */
[data-theme="light"] .screener-container,
[data-theme="light"] #screenerCard,
[data-theme="light"] .realtime-screener {
  background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 4%, transparent), color-mix(in srgb, var(--primary) 2%, transparent));
  border: 1px solid color-mix(in srgb, var(--primary) 15%, transparent);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--primary) 8%, transparent);
}

/* Active Trades Container - Light green/purple tinted background */
[data-theme="light"] .trades-container,
[data-theme="light"] #activeTrades,
[data-theme="light"] .active-trades,
[data-theme="light"] .active-trades-card {
  background: linear-gradient(145deg, rgba(16, 185, 129, 0.03), color-mix(in srgb, var(--primary) 4%, transparent));
  border: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

/* Active Trades Table - FORCE light rows */
[data-theme="light"] #activeTrades table tbody tr,
[data-theme="light"] .active-trades table tbody tr,
[data-theme="light"] .trades-table tbody tr {
  background: #ffffff !important;
}

[data-theme="light"] #activeTrades table tbody tr:nth-child(odd),
[data-theme="light"] .active-trades table tbody tr:nth-child(odd),
[data-theme="light"] .trades-table tbody tr:nth-child(odd) {
  background: rgba(248, 250, 252, 0.9) !important;
}

[data-theme="light"] #activeTrades table tbody tr:nth-child(even),
[data-theme="light"] .active-trades table tbody tr:nth-child(even),
[data-theme="light"] .trades-table tbody tr:nth-child(even) {
  background: #ffffff !important;
}

[data-theme="light"] #activeTrades table tbody tr:hover,
[data-theme="light"] .active-trades table tbody tr:hover,
[data-theme="light"] .trades-table tbody tr:hover {
  background: color-mix(in srgb, var(--primary) 8%, transparent) !important;
}

/* Active Trades Table Buttons - Make them SOLID and visible */
[data-theme="light"] #activeTrades .btn,
[data-theme="light"] #activeTrades button,
[data-theme="light"] .active-trades .btn,
[data-theme="light"] .active-trades button,
[data-theme="light"] .trades-table .btn,
[data-theme="light"] .trades-table button {
  background: #f0f2ef !important;
  border: 1px solid #c8d0c8 !important;
  color: #334155 !important;
  font-weight: 500;
}

[data-theme="light"] #activeTrades .btn:hover,
[data-theme="light"] #activeTrades button:hover,
[data-theme="light"] .active-trades .btn:hover,
[data-theme="light"] .active-trades button:hover {
  background: #dde2dc !important;
  border-color: var(--accent-purple) !important;
  color: var(--accent-purple) !important;
}

/* Untrack button - red tint */
[data-theme="light"] .btn-untrack,
[data-theme="light"] button.untrack-btn,
[data-theme="light"] [class*="untrack"] {
  background: #fef2f2 !important;
  border-color: #fecaca !important;
  color: #b91c1c !important;
}

[data-theme="light"] .btn-untrack:hover,
[data-theme="light"] button.untrack-btn:hover,
[data-theme="light"] [class*="untrack"]:hover {
  background: #fee2e2 !important;
  border-color: #ef4444 !important;
}

/* Roll button - amber tint */
[data-theme="light"] .btn-roll,
[data-theme="light"] button.roll-btn,
[data-theme="light"] [class*="roll"]:not([class*="scroll"]) {
  background: #fffbeb !important;
  border-color: #fde68a !important;
  color: #b45309 !important;
}

[data-theme="light"] .btn-roll:hover,
[data-theme="light"] button.roll-btn:hover,
[data-theme="light"] [class*="roll"]:not([class*="scroll"]):hover {
  background: #fef3c7 !important;
  border-color: #f59e0b !important;
}

/* Edit button - purple tint */
[data-theme="light"] .btn-edit,
[data-theme="light"] button.edit-btn,
[data-theme="light"] [class*="edit"]:not([class*="editor"]) {
  background: #eff3f1 !important;
  border-color: #d5ddd8 !important;
  color: var(--primary-strong) !important;
}

[data-theme="light"] .btn-edit:hover,
[data-theme="light"] button.edit-btn:hover,
[data-theme="light"] [class*="edit"]:not([class*="editor"]):hover {
  background: #e2e8e4 !important;
  border-color: var(--primary-strong) !important;
}

/* No Active Signals / Empty State - Make it visible */
[data-theme="light"] .no-active-signals,
[data-theme="light"] .empty-trades,
[data-theme="light"] .no-data-message,
[data-theme="light"] #activeTrades .empty-state,
[data-theme="light"] #activeTrades .no-signals,
[data-theme="light"] .screener-empty,
[data-theme="light"] #screenerCard .no-signals {
  background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 6%, transparent), color-mix(in srgb, var(--primary) 4%, transparent)) !important;
  border: 2px dashed color-mix(in srgb, var(--primary) 25%, transparent) !important;
  border-radius: 12px;
  padding: 2rem;
  color: var(--text-secondary) !important;
}

[data-theme="light"] .no-active-signals h3,
[data-theme="light"] .empty-trades h3,
[data-theme="light"] .no-data-message h3,
[data-theme="light"] #activeTrades .empty-state h3,
[data-theme="light"] #screenerCard .no-signals h3 {
  color: var(--text-primary) !important;
}

[data-theme="light"] .no-active-signals p,
[data-theme="light"] .empty-trades p,
[data-theme="light"] .no-data-message p,
[data-theme="light"] #activeTrades .empty-state p,
[data-theme="light"] #screenerCard .no-signals p {
  color: var(--text-secondary) !important;
}

/* Screener Table rows - ensure light background */
[data-theme="light"] .screener-table tbody tr,
[data-theme="light"] #screenerTable tbody tr {
  background: #ffffff;
}


[data-theme="light"] .screener-table tbody tr:hover,
[data-theme="light"] #screenerTable tbody tr:hover {
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}

/* Purchase Plan Highlight - must override all other row styles */
.screener-table tbody tr.purchase-plan-highlight,
#screenerTable tbody tr.purchase-plan-highlight,
#screenerTableBody tr.purchase-plan-highlight,
[data-theme="light"] .screener-table tbody tr.purchase-plan-highlight,
[data-theme="light"] #screenerTable tbody tr.purchase-plan-highlight,
[data-theme="light"] #screenerTableBody tr.purchase-plan-highlight,
[data-theme="light"] .screener-table tbody tr.purchase-plan-highlight:nth-child(odd),
[data-theme="light"] .screener-table tbody tr.purchase-plan-highlight:nth-child(even),
[data-theme="light"] #screenerTable tbody tr.purchase-plan-highlight:nth-child(odd),
[data-theme="light"] #screenerTable tbody tr.purchase-plan-highlight:nth-child(even) {
  background: rgba(16, 185, 129, 0.25) !important;
}

/* Purchase Plan Active Trade - subtle purple to match tracked button */
.screener-table tbody tr.purchase-plan-active-trade,
#screenerTable tbody tr.purchase-plan-active-trade,
#screenerTableBody tr.purchase-plan-active-trade,
[data-theme="light"] .screener-table tbody tr.purchase-plan-active-trade,
[data-theme="light"] #screenerTable tbody tr.purchase-plan-active-trade,
[data-theme="light"] #screenerTableBody tr.purchase-plan-active-trade,
[data-theme="light"] .screener-table tbody tr.purchase-plan-active-trade:nth-child(odd),
[data-theme="light"] .screener-table tbody tr.purchase-plan-active-trade:nth-child(even),
[data-theme="light"] #screenerTable tbody tr.purchase-plan-active-trade:nth-child(odd),
[data-theme="light"] #screenerTable tbody tr.purchase-plan-active-trade:nth-child(even) {
  background: color-mix(in srgb, var(--primary) 15%, transparent) !important;
}

/* Live-filter greyed rows — candidates FILTERED by intraday live gates
   (extension cap / VIX regime). Kept in the table so traders can watch
   names move in/out of eligibility. */
.screener-table tbody tr.live-filtered-row,
#screenerTable tbody tr.live-filtered-row,
[data-theme="light"] .screener-table tbody tr.live-filtered-row {
  opacity: 0.45;
  background: rgba(148, 163, 184, 0.08);
}

.live-filter-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #f87171;
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.4);
  border-radius: 4px;
  vertical-align: middle;
  cursor: help;
}

/* Modal Base Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(4px);
}

.modal-content {
  background: var(--bg-primary);
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.modal-header h3 {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text-primary);
}

.modal-close {
  background: none;
  border: none;
  font-size: var(--fs-xl);
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.2s;
}

.modal-close:hover {
  color: var(--text-primary);
}

.modal-body {
  padding: 1.5rem;
  overflow-y: auto;
}

/* Light theme modal */
[data-theme="light"] .modal-overlay {
  background: rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .modal-content {
  background: #ffffff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .modal-header {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

/* Purchase Plan Modal */
.purchase-plan-modal {
  max-width: 900px;
  width: 95%;
}

.purchase-plan-summary-stats {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border-radius: 8px;
  flex-wrap: wrap;
}

.purchase-plan-summary-stats .stat-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.purchase-plan-summary-stats .stat-label {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.purchase-plan-summary-stats .stat-value {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.purchase-plan-summary-stats .stat-value.profit {
  color: #10b981;
}

.purchase-plan-table-wrapper {
  max-height: 400px;
  overflow-y: auto;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.purchase-plan-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md);
}

.purchase-plan-table th {
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  padding: 0.75rem 0.5rem;
  text-align: left;
  font-weight: 600;
  color: var(--text-primary);
  position: sticky;
  top: 0;
  z-index: 1;
}

.purchase-plan-table td {
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
}

.purchase-plan-table tbody tr:hover {
  background: color-mix(in srgb, var(--primary) 5%, transparent);
}

.purchase-plan-table .badge {
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
}

.purchase-plan-table .badge-purple {
  background: color-mix(in srgb, var(--primary) 20%, transparent);
  color: var(--accent-purple-light);
}

.purchase-plan-table .badge-blue {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

/* Light theme adjustments */
[data-theme="light"] .purchase-plan-summary-stats {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

[data-theme="light"] .purchase-plan-table th {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

[data-theme="light"] .purchase-plan-table tbody tr:hover {
  background: color-mix(in srgb, var(--primary) 5%, transparent);
}

[data-theme="light"] .purchase-plan-table .badge-purple {
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  color: var(--primary-strong);
}

[data-theme="light"] .purchase-plan-table .badge-blue {
  background: rgba(59, 130, 246, 0.15);
  color: #2563eb;
}

/* =====================================================
   Additional Light Theme Overrides - Professional Design
   Following WCAG 2.1 contrast guidelines
   ===================================================== */

/* Accounts Page Header - Light */
[data-theme="light"] .accounts-header {
  background: rgba(248, 250, 252, 0.95);
  border-color: color-mix(in srgb, var(--primary) 12%, transparent);
}

/* All tables - ensure proper alternating colors */
[data-theme="light"] table tbody tr {
  background: #ffffff;
  border-bottom-color: #dde2dc;
}

[data-theme="light"] table tbody tr:nth-child(odd) {
  background: #fafbfc;
}

[data-theme="light"] table tbody tr:nth-child(even) {
  background: #ffffff;
}

/* Track Button - Green accent */
[data-theme="light"] .btn-track,
[data-theme="light"] button[class*="track"]:not([class*="untrack"]) {
  background: #ecfdf5 !important;
  border: 1px solid #86efac !important;
  color: #047857 !important;
}

[data-theme="light"] .btn-track:hover,
[data-theme="light"] button[class*="track"]:not([class*="untrack"]):hover {
  background: #d1fae5 !important;
  border-color: #10b981 !important;
}

/* Sample Data Table Button Overrides - Light */
[data-theme="light"] .sample-data-table .btn-primary-small {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 15%, transparent), color-mix(in srgb, var(--primary) 12%, transparent));
  color: var(--accent-purple);
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
}

/* Page containers with dark backgrounds - Light */
[data-theme="light"] .page-container,
[data-theme="light"] .content-wrapper,
[data-theme="light"] .main-content {
  background: transparent;
}

/* Filter and control panels - Light */
[data-theme="light"] .filter-panel,
[data-theme="light"] .control-panel,
[data-theme="light"] .filters-bar {
  background: rgba(255, 255, 255, 0.95);
  border-color: color-mix(in srgb, var(--primary) 10%, transparent);
}

/* Loading spinners - adjust for light bg */
[data-theme="light"] .spinner,
[data-theme="light"] .loading-spinner {
  border-color: color-mix(in srgb, var(--primary) 20%, transparent);
  border-top-color: var(--accent-purple);
}

/* Links - ensure proper contrast */
[data-theme="light"] a {
  color: var(--accent-purple);
}

[data-theme="light"] a:hover {
  color: var(--accent-purple-dark);
}

/* Strategy selector dropdown - Light */
[data-theme="light"] .strategy-selector,
[data-theme="light"] #strategySelect,
[data-theme="light"] select.strategy-select {
  background: #ffffff;
  border-color: #dde2dc;
  color: var(--text-primary);
}

/* Icon buttons in tables - Light */
[data-theme="light"] .icon-btn,
[data-theme="light"] .table-action-btn,
[data-theme="light"] :not(.bt-table) > tbody > tr > td button,
[data-theme="light"] :not(.bt-table) > tbody > tr > td .btn {   /* .bt-table (Backtesting) styles its own controls */
  background: #f7f8f6;
  border: 1px solid #dde2dc;
  color: #475569;
}

[data-theme="light"] .icon-btn:hover,
[data-theme="light"] .table-action-btn:hover,
[data-theme="light"] :not(.bt-table) > tbody > tr > td button:hover,
[data-theme="light"] :not(.bt-table) > tbody > tr > td .btn:hover {
  background: #f0f2ef;
  border-color: var(--accent-purple);
  color: var(--accent-purple);
}

/* Tooltips that appear over light content */
[data-theme="light"] .tooltip-content,
[data-theme="light"] [role="tooltip"] {
  background: #1e293b;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Separators and dividers - Light */
[data-theme="light"] hr,
[data-theme="light"] .divider,
[data-theme="light"] .separator {
  border-color: #dde2dc;
}

/* Data cells with special formatting - ensure readability */
[data-theme="light"] .text-success,
[data-theme="light"] .profit,
[data-theme="light"] .positive {
  color: #047857;
}

[data-theme="light"] .text-danger,
[data-theme="light"] .loss,
[data-theme="light"] .negative {
  color: #b91c1c;
}

[data-theme="light"] .text-warning,
[data-theme="light"] .pending {
  color: #b45309;
}

/* =====================================================
   Active Trades Row Contrast & Grouping - Light Theme
   Higher contrast alternating rows + clear child grouping
   ===================================================== */

/* Active trades - MORE contrast between rows */
[data-theme="light"] #tradesContainer table tbody tr:nth-child(odd) {
  background: #f0f2ef !important; /* Noticeably different from white */
}

[data-theme="light"] #tradesContainer table tbody tr:nth-child(even) {
  background: #ffffff !important;
}

/* Group Parent Row - subtle purple left border */
[data-theme="light"] #tradesContainer table tbody tr.group-parent {
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 8%, transparent) 0%, #ffffff 4%) !important;
  border-left: 3px solid var(--accent-purple);
}

/* Group Child Rows - Indented with clear visual grouping */
[data-theme="light"] #tradesContainer table tbody tr.group-child {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.06) 0%, #fafbfc 6%) !important;
  border-left: 3px solid #10b981;
}

[data-theme="light"] #tradesContainer table tbody tr.group-child:nth-child(odd) {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.06) 0%, #f5f7f9 6%) !important;
}

[data-theme="light"] #tradesContainer table tbody tr.group-child:nth-child(even) {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.06) 0%, #ffffff 6%) !important;
}

/* Child row first cell - indent to show hierarchy */
[data-theme="light"] #tradesContainer table tbody tr.group-child td:first-child {
  padding-left: 2rem;
}

/* Hover states for grouped rows */
[data-theme="light"] #tradesContainer table tbody tr.group-parent:hover {
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 12%, transparent) 0%, color-mix(in srgb, var(--primary) 4%, transparent) 100%) !important;
}

[data-theme="light"] #tradesContainer table tbody tr.group-child:hover {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.04) 100%) !important;
}

/* =====================================================
   Screener Empty State - Light Theme
   Make "No Active Signals" VISIBLE with colored background
   ===================================================== */

[data-theme="light"] #screenerEmpty,
[data-theme="light"] .screener-empty-enhanced {
  background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 4%, transparent), rgba(59, 130, 246, 0.03)) !important;
}

[data-theme="light"] #screenerEmpty .empty-state-message,
[data-theme="light"] .screener-empty-enhanced .empty-state-message {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 8%, transparent), color-mix(in srgb, var(--primary) 5%, transparent)) !important;
  border: 2px solid color-mix(in srgb, var(--primary) 20%, transparent) !important;
  box-shadow: 0 8px 32px color-mix(in srgb, var(--primary) 12%, transparent) !important;
}

[data-theme="light"] #screenerEmpty .empty-state-message h3 {
  background: linear-gradient(131deg, var(--primary-strong), #3b82f6) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  opacity: 1 !important;
}

[data-theme="light"] #screenerEmpty .empty-state-message p {
  color: #475569 !important;
}

/* Empty table fade for screener - Light */
[data-theme="light"] #screenerEmpty .empty-table-fade,
[data-theme="light"] .screener-empty-enhanced .empty-table-fade {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(248, 250, 252, 0.6) 30%,
    rgba(248, 250, 252, 0.95) 60%,
    #f7f8f6 100%
  ) !important;
}

/* Sample table in screener empty state - Light */
[data-theme="light"] #screenerEmpty .sample-data-table tbody tr:nth-child(odd),
[data-theme="light"] .screener-empty-enhanced .sample-data-table tbody tr:nth-child(odd) {
  background: #f0f2ef !important;
}

[data-theme="light"] #screenerEmpty .sample-data-table tbody tr:nth-child(even),
[data-theme="light"] .screener-empty-enhanced .sample-data-table tbody tr:nth-child(even) {
  background: #ffffff !important;
}

/* =====================================================
   Trades Empty State - Light Theme
   Override inline dark mode styles
   ===================================================== */

[data-theme="light"] #tradesEmpty,
[data-theme="light"] .trades-empty-enhanced {
  background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 3%, transparent), rgba(16, 185, 129, 0.02));
}

[data-theme="light"] #tradesEmpty .empty-state-message,
[data-theme="light"] .trades-empty-enhanced .empty-state-message {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: color-mix(in srgb, var(--primary) 20%, transparent) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] #tradesEmpty .empty-state-message h3 {
  background: linear-gradient(131deg, #047857, var(--primary-strong)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

[data-theme="light"] #tradesEmpty .empty-state-message p {
  color: #64748b !important;
}

/* Sample data table in empty state - Light */
[data-theme="light"] #tradesEmpty .sample-data-table,
[data-theme="light"] .empty-table-background .sample-data-table {
  background: #ffffff;
}

[data-theme="light"] #tradesEmpty .sample-data-table thead,
[data-theme="light"] .empty-table-background .sample-data-table thead {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 6%, transparent), rgba(16, 185, 129, 0.04));
}

[data-theme="light"] #tradesEmpty .sample-data-table th,
[data-theme="light"] .empty-table-background .sample-data-table th {
  color: #475569;
  border-bottom-color: color-mix(in srgb, var(--primary) 15%, transparent);
}

[data-theme="light"] #tradesEmpty .sample-data-table tbody tr,
[data-theme="light"] .empty-table-background .sample-data-table tbody tr {
  background: #ffffff !important;
}

[data-theme="light"] #tradesEmpty .sample-data-table tbody tr:nth-child(odd),
[data-theme="light"] .empty-table-background .sample-data-table tbody tr:nth-child(odd) {
  background: #fafbfc !important;
}

[data-theme="light"] #tradesEmpty .sample-data-table td,
[data-theme="light"] .empty-table-background .sample-data-table td {
  color: #334155;
  border-bottom-color: #dde2dc;
}

/* Empty table fade overlay - Light */
[data-theme="light"] .empty-table-fade {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(248, 250, 252, 0.5) 40%,
    rgba(248, 250, 252, 0.9) 70%,
    #f7f8f6 100%
  ) !important;
}

/* =====================================================
   Active Trades Card - Light Theme (when visible)
   ===================================================== */

[data-theme="light"] .active-trades-card,
[data-theme="light"] #screenerPage .dashboard-card:has(#tradesContainer) {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95));
  border: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
}

[data-theme="light"] #tradesContainer table {
  background: transparent;
}

[data-theme="light"] #tradesContainer table thead {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 6%, transparent), rgba(16, 185, 129, 0.04));
}

[data-theme="light"] #tradesContainer table thead th {
  color: #475569;
  font-weight: 600;
  border-bottom: 2px solid color-mix(in srgb, var(--primary) 15%, transparent);
}

[data-theme="light"] #tradesContainer table tbody tr {
  background: #ffffff !important;
  border-bottom: 1px solid #dde2dc;
}

/* Note: Row contrast styles defined earlier in grouped row section */

[data-theme="light"] #tradesContainer table tbody tr:hover {
  background: color-mix(in srgb, var(--primary) 6%, transparent) !important;
}

[data-theme="light"] #tradesContainer table tbody td {
  color: #1e293b;
}

/* Trades Container Action Buttons - Light */
[data-theme="light"] #tradesContainer .btn,
[data-theme="light"] #tradesContainer button {
  background: #f7f8f6 !important;
  border: 1px solid #d1d5db !important;
  color: #374151 !important;
  font-weight: 500;
  padding: 0.375rem 0.75rem;
  border-radius: 6px;
}

[data-theme="light"] #tradesContainer .btn:hover,
[data-theme="light"] #tradesContainer button:hover {
  background: #f0f2ef !important;
  border-color: var(--accent-purple) !important;
  color: var(--accent-purple) !important;
}

/* Specific button colors */
[data-theme="light"] #tradesContainer .untrack-btn,
[data-theme="light"] #tradesContainer [onclick*="untrack"],
[data-theme="light"] #tradesContainer .btn-danger {
  background: #fef2f2 !important;
  border-color: #fca5a5 !important;
  color: #b91c1c !important;
}

[data-theme="light"] #tradesContainer .roll-btn,
[data-theme="light"] #tradesContainer [onclick*="roll"],
[data-theme="light"] #tradesContainer .btn-warning {
  background: #fffbeb !important;
  border-color: #fcd34d !important;
  color: #b45309 !important;
}

[data-theme="light"] #tradesContainer .edit-btn,
[data-theme="light"] #tradesContainer [onclick*="edit"] {
  background: #eff3f1 !important;
  border-color: #d5ddd8 !important;
  color: var(--primary-strong) !important;
}

/* =====================================================
   Screener Card - Light Theme
   Subtle tinted background so empty state is visible
   ===================================================== */

[data-theme="light"] #screenerCard,
[data-theme="light"] .screener-card,
[data-theme="light"] .realtime-screener-card {
  background: linear-gradient(145deg, rgba(241, 245, 249, 0.95), rgba(248, 250, 252, 0.9));
  border: 1px solid color-mix(in srgb, var(--primary) 15%, transparent);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--primary) 8%, transparent);
}

[data-theme="light"] #screenerCard .card-header,
[data-theme="light"] .screener-card .card-header {
  background: transparent;
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
}

[data-theme="light"] #screenerCard .card-title,
[data-theme="light"] .screener-card .card-title {
  color: #1e293b;
}

/* Screener Table (#screenerTable) - Light */
[data-theme="light"] #screenerTable {
  background: transparent;
}

[data-theme="light"] #screenerTable .screener-table {
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
}

[data-theme="light"] #screenerTable .screener-table thead {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 6%, transparent), color-mix(in srgb, var(--primary) 4%, transparent));
}

[data-theme="light"] #screenerTable .screener-table thead th {
  color: #475569;
  font-weight: 600;
  border-bottom: 2px solid color-mix(in srgb, var(--primary) 12%, transparent);
  padding: 0.875rem 1rem;
}

[data-theme="light"] #screenerTableBody tr {
  background: #ffffff !important;
  border-bottom: 1px solid #dfe2dc;
}

[data-theme="light"] #screenerTableBody tr:nth-child(odd) {
  background: #f0f2ef !important; /* More contrast */
}

[data-theme="light"] #screenerTableBody tr:nth-child(even) {
  background: #ffffff !important;
}

[data-theme="light"] #screenerTableBody tr:hover {
  background: color-mix(in srgb, var(--primary) 5%, transparent) !important;
}

[data-theme="light"] #screenerTableBody td {
  color: #1e293b;
  padding: 0.75rem 1rem;
}

/* Screener table action buttons - Light */
[data-theme="light"] #screenerTableBody .btn,
[data-theme="light"] #screenerTableBody button,
[data-theme="light"] .screener-table .btn,
[data-theme="light"] .screener-table button {
  background: #f7f8f6 !important;
  border: 1px solid #d1d5db !important;
  color: #374151 !important;
  font-weight: 500;
  border-radius: 6px;
}

[data-theme="light"] #screenerTableBody .btn:hover,
[data-theme="light"] #screenerTableBody button:hover,
[data-theme="light"] .screener-table .btn:hover,
[data-theme="light"] .screener-table button:hover {
  background: #f0f2ef !important;
  border-color: var(--accent-purple) !important;
  color: var(--accent-purple) !important;
}

/* Track button in screener - Green accent */
[data-theme="light"] #screenerTableBody .track-btn,
[data-theme="light"] #screenerTableBody [onclick*="track"],
[data-theme="light"] .screener-table .track-btn {
  background: #ecfdf5 !important;
  border-color: #86efac !important;
  color: #047857 !important;
}

[data-theme="light"] #screenerTableBody .track-btn:hover,
[data-theme="light"] .screener-table .track-btn:hover {
  background: #d1fae5 !important;
  border-color: #10b981 !important;
}

/* Header */
.header {
  /* Subtle purple accent in bottom-left corner only */
  background:
    radial-gradient(ellipse 200px 120% at 0% 100%,
      rgba(49, 46, 129, 0.35) 0%,
      rgba(30, 27, 75, 0.15) 50%,
      transparent 80%
    ),
    #0f0f14;
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 15%, transparent);
  padding: 0 1.5rem;
  height: 88px;  /* Match sidebar header height */
  display: flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.header-logo {
  display: flex;
  align-items: center;
  margin-right: 1.5rem;
}

.header-logo-img {
  height: 44px;  /* Scaled up for taller header */
  width: auto;
  object-fit: contain;
}

/* Dark mode logo (default) - show in dark mode, hide in light */
.header-logo-img.logo-dark {
  display: block;
}
.header-logo-img.logo-light {
  display: none;
}

/* Light mode - show light logo, hide dark logo */
[data-theme="light"] .header-logo-img.logo-dark {
  display: none;
}
[data-theme="light"] .header-logo-img.logo-light {
  display: block;
}

.header-controls-left {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.header-controls-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Account Group - High contrast */
.header-account-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #1a1a24;
  padding: 0 1.25rem;
  border-radius: 10px;
  border: 1px solid #3b3b52;
  height: 48px;
  box-sizing: border-box;
}

.header-account-group i {
  color: var(--primary);
  font-size: var(--fs-base);
}

/* Custom styled account selector */
.custom-select-wrapper {
  position: relative;
  min-width: 160px;
}

.custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: #252532;
  color: #ffffff;
  border: 1px solid #4b4b66;
  border-radius: 6px;
  padding: 0.45rem 0.75rem;
  font-size: var(--fs-md);
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
  font-family: inherit;
}

.custom-select-trigger:hover {
  border-color: var(--primary);
}

.custom-select-trigger:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent);
}

.custom-select-arrow {
  color: #8b5cf6;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.custom-select-wrapper.open .custom-select-arrow {
  transform: rotate(180deg);
}

.custom-select-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  background: #1e1e2e;
  border: 1px solid #4b4b66;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 1000;
  overflow: hidden;
}

.custom-select-wrapper.open .custom-select-dropdown {
  display: block;
}

.custom-select-options {
  max-height: 240px;
  overflow-y: auto;
  padding: 0.35rem 0;
}

.custom-select-option {
  padding: 0.5rem 1rem;
  font-size: var(--fs-md);
  color: #c8c8d8;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.custom-select-option:hover {
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  color: #ffffff;
}

.custom-select-option.selected {
  color: var(--primary);
  font-weight: 600;
}

.custom-select-option.excluded {
  color: #8888a0;
  font-size: var(--fs-sm);
}

.custom-select-option.excluded:hover {
  color: #c8c8d8;
}

.custom-select-divider {
  height: 1px;
  background: #3b3b52;
  margin: 0.25rem 0;
}

.custom-select-group-label {
  padding: 0.35rem 1rem;
  font-size: var(--fs-xs);
  color: #6b6b80;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.custom-select-action {
  padding: 0.6rem 1rem;
  font-size: var(--fs-md);
  color: #8b5cf6;
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.custom-select-action:hover {
  background: rgba(139, 92, 246, 0.1);
}

/* Hide native select (now using hidden input) */
.header-account-group select {
  display: none;
}

.header-balance {
  font-size: var(--fs-md);
  color: #22c55e;
  font-weight: 700;
  padding-left: 0.75rem;
  border-left: 2px solid #3b3b52;
}

/* Open Trades Toggle - Match account selector style */
.header-toggle-group {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 1rem;
  border-radius: 10px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  height: 44px;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.header-toggle-group:hover {
  border-color: var(--border-light);
}

.header-toggle-label {
  font-size: var(--fs-md);
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: 0.01em;
  user-select: none;
  transition: color 0.2s ease;
}

.header-toggle-group:has(input:checked) .header-toggle-label {
  color: var(--text-primary);
}

/* User Menu Dropdown */
.header-user-menu {
  position: relative;
}

.header-user-trigger {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1.25rem;
  height: 48px;
  border-radius: 10px;
  background: #1a1a24;
  border: 1px solid #3b3b52;
  color: #e2e8f0;
  cursor: pointer;
  transition: all 0.2s;
  font-size: var(--fs-md);
  font-weight: 500;
  box-sizing: border-box;
}

.header-user-trigger:hover {
  border-color: var(--primary);
  background: #252532;
}

.header-user-trigger i:first-child {
  font-size: var(--fs-lg);
  color: var(--primary);
}

.header-user-arrow {
  font-size: var(--fs-xs);
  color: #64748b;
  transition: transform 0.2s;
}

.header-user-menu.open .header-user-arrow {
  transform: rotate(180deg);
}

.header-username {
  font-size: var(--fs-md);
  color: #e2e8f0;
  font-weight: 500;
}

.header-user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background: #1a1a24;
  border: 1px solid #3b3b52;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
  z-index: 1000;
  overflow: hidden;
}

.header-user-menu.open .header-user-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.header-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  color: #e2e8f0;
  text-decoration: none;
  font-size: var(--fs-md);
  transition: all 0.15s;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
}

.header-dropdown-item:hover {
  background: #252532;
  color: var(--primary);
}

.header-dropdown-item i {
  width: 18px;
  text-align: center;
  color: #64748b;
  transition: color 0.15s;
}

.header-dropdown-item:hover i {
  color: var(--primary);
}

.header-dropdown-item.header-logout:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.header-dropdown-item.header-logout:hover i {
  color: #ef4444;
}

.header-dropdown-divider {
  height: 1px;
  background: #3b3b52;
  margin: 0.25rem 0;
}

/* Light theme overrides */
[data-theme="light"] .header {
  background: linear-gradient(135deg, #eff3f1 0%, #e8edea 100%);
  border-bottom: 1px solid #d5ddd8;
}

[data-theme="light"] .header-account-group {
  background: #f5f8f6;
  border-color: #d5ddd8;
}

[data-theme="light"] .header-account-group i {
  color: var(--primary-strong);
}

[data-theme="light"] .header-account-group select {
  background: #f5f8f6;
  border-color: #d5ddd8;
  color: #334155;
}

[data-theme="light"] .custom-select-trigger {
  background: #f5f8f6;
  border-color: #d5ddd8;
  color: #334155;
}

[data-theme="light"] .custom-select-dropdown {
  background: #ffffff;
  border-color: #d5ddd8;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .custom-select-option {
  color: #475569;
}

[data-theme="light"] .custom-select-option:hover {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  color: #1e293b;
}

[data-theme="light"] .custom-select-option.selected {
  color: var(--primary-strong);
}

[data-theme="light"] .custom-select-divider {
  background: #e2e8f0;
}

[data-theme="light"] .custom-select-action {
  color: #7c3aed;
}

[data-theme="light"] .custom-select-action:hover {
  background: rgba(124, 58, 237, 0.06);
}

[data-theme="light"] .header-balance {
  color: #16a34a;
  border-left-color: #d5ddd8;
}

[data-theme="light"] .header-toggle-group {
  background: var(--card-bg);
  border-color: var(--card-border);
}

[data-theme="light"] .header-toggle-label {
  color: var(--text-secondary);
}

[data-theme="light"] .header-user-trigger {
  background: #f5f8f6;
  border-color: #d5ddd8;
  color: #374151;
}

[data-theme="light"] .header-user-trigger:hover {
  background: #e2e8e4;
  border-color: var(--primary-strong);
}

[data-theme="light"] .header-username {
  color: #374151;
}

[data-theme="light"] .header-user-dropdown {
  background: #f5f8f6;
  border-color: #d5ddd8;
  box-shadow: 0 10px 40px rgba(60, 90, 70, 0.15);
}

[data-theme="light"] .header-dropdown-item {
  color: #374151;
}

[data-theme="light"] .header-dropdown-item:hover {
  background: #f3f0ff;
  color: var(--primary-strong);
}

[data-theme="light"] .header-dropdown-item i {
  color: #94a3b8;
}

[data-theme="light"] .header-dropdown-divider {
  background: #e5e1f5;
}

/* Legacy classes (keep for compatibility) */
.header-left, .header-center, .header-right { display: none; }

/* User Display in Header (legacy) */
.user-display {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  background: var(--bg-tertiary);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.user-name {
  font-size: var(--fs-md);
  color: var(--text-secondary);
  font-weight: 500;
}

.admin-badge {
  font-size: var(--fs-xs);
  padding: 0.15rem 0.5rem;
  background: var(--accent-purple);
  color: white;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
}

.logout-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.25rem;
  font-size: var(--fs-md);
  transition: color 0.2s;
}

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

.profile-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.25rem;
  font-size: var(--fs-md);
  transition: color 0.2s;
  text-decoration: none;
}

.profile-btn:hover {
  color: var(--accent-purple);
}

[data-theme="light"] .user-display {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border-color: color-mix(in srgb, var(--primary) 20%, transparent);
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.logo-full {
  height: 80px;
  width: auto;
  object-fit: contain;
}

/* Top Navigation */
.top-nav {
  background: rgba(26, 27, 35, 0.8);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 15%, transparent);
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 90;
}

.top-nav-container {
  display: flex;
  gap: 0.25rem;
  max-width: 65vw;
  margin: 0 auto;
  padding: 0 2rem;
}

.top-nav-item {
  display: flex;
  align-items: center;
  padding: 1.25rem 2rem;
  text-decoration: none;
  color: var(--text-secondary);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border-bottom: 2px solid transparent;
  background: transparent;
  position: relative;
  font-weight: 500;
  letter-spacing: 0.025em;
}

.top-nav-item::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--accent-purple);
  transform: translateX(-50%);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.top-nav-item:hover {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  color: var(--text-primary);
}

.top-nav-item:hover::before {
  width: calc(100% - 2rem);
}

.top-nav-item.active {
  background: transparent;
  color: var(--accent-purple-light);
}

.top-nav-item.active::before {
  width: calc(100% - 2rem);
  background: var(--accent-purple);
}

/* .nav-label lives in sidebar.css (shared with the Strategy Studio) */

/* External nav link (opens in new tab) */
.top-nav-external {
  display: flex;
  align-items: center;
  padding: 1.25rem 2rem;
  text-decoration: none;
  color: var(--text-secondary);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border-bottom: 2px solid transparent;
  background: transparent;
  position: relative;
  font-weight: 500;
  letter-spacing: 0.025em;
}

.top-nav-external:hover {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  color: var(--text-primary);
}

.logo-icon {
  height: 60px;
  width: auto;
  object-fit: contain;
}

.logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-purple-dark));
  border-radius: 8px;
  font-size: var(--fs-md);
  font-weight: 700;
  color: white;
  letter-spacing: -1px;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 40%, transparent);
}

.logo-text {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.5px;
}

.rules-selector {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.rules-selector label {
  color: var(--text-secondary);
  font-weight: 500;
  font-size: var(--fs-md);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rules-dropdown {
  background: rgba(58, 61, 74, 0.5);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  padding: 0.5rem 1rem;
  font-size: var(--fs-md);
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 200px;
}

.rules-dropdown:hover {
  background: rgba(58, 61, 74, 0.8);
  border-color: var(--accent-purple);
}

.rules-dropdown:focus {
  outline: none;
  border-color: var(--accent-purple);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
}

/* Status indicators */
.status-indicators {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  background: rgba(58, 61, 74, 0.3);
  border: 1px solid rgba(75, 85, 99, 0.3);
  font-size: var(--fs-sm);
  transition: all 0.2s ease;
}

.status-indicator:hover {
  background: rgba(58, 61, 74, 0.5);
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  position: relative;
}

.status-dot::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.status-dot.online {
  background: var(--success);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

.status-dot.online::before {
  background: radial-gradient(circle, rgba(16, 185, 129, 0.4) 0%, transparent 70%);
}

.status-dot.offline {
  background: var(--text-muted);
}

.status-dot.running {
  background: var(--warning);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}

.status-dot.running::before {
  background: radial-gradient(circle, rgba(245, 158, 11, 0.4) 0%, transparent 70%);
}

.status-label {
  color: var(--text-secondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.status-indicator.clickable {
  transition: all 0.2s ease;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
}

.status-indicator.clickable:hover {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  transform: translateY(-1px);
}

.status-indicator.clickable:hover .status-label {
  color: var(--accent-purple-light);
}

.status-indicator.clickable:active {
  transform: translateY(0);
}

@keyframes pulse-ring {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.5);
  }
}

/* Main layout */
.main-content {
  display: block;
  padding: 2rem;
  max-width: 65vw;
  margin: 0 auto;
  min-height: calc(100vh - 110px);  /* Account for 88px header + padding */
}

/* Action bar */
.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(37, 12, 64, 0.25);
  padding: 1rem 1.5rem;
  border-radius: 10px;
  border: 1px solid var(--border);
}

.screener-controls {
  display: flex;
  gap: 1rem;
  align-items: end;
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.control-group label {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  font-weight: 500;
}

.form-input {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  color: var(--text-primary);
  font-size: var(--fs-md);
  width: 120px;
  transition: all 0.2s ease;
}

/* Strategy dropdown needs to be wider to show full rule names */
#rulesSelect.form-input {
  width: 250px;
}

.form-input:focus {
  outline: none;
  border-color: var(--accent-purple);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
}

/* Delta input field styling */
.delta-input {
  background: rgba(58, 61, 74, 0.6);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  color: var(--text-primary);
  font-size: var(--fs-md);
  transition: all 0.2s ease;
}

.delta-input:hover {
  background: rgba(58, 61, 74, 0.8);
  border-color: color-mix(in srgb, var(--primary) 50%, transparent);
}

.delta-input:focus {
  outline: none;
  background: rgba(58, 61, 74, 0.9);
  border-color: var(--accent-purple);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
}

.nightly-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: flex-end;
}

.next-update {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-icon {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  transition: all 0.3s ease;
  font-size: var(--fs-md);
}

.btn-icon:hover {
  background: var(--bg-tertiary);
  color: var(--accent-purple);
}

.action-buttons {
  display: flex;
  gap: 1rem;
}

.btn {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: var(--fs-md);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-primary {
  background: var(--button-primary);
  color: white;
  box-shadow: 0 4px 15px color-mix(in srgb, var(--primary) 40%, transparent);
  border: none;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--primary) 60%, transparent);
  background: var(--primary-strong);
}

.btn-secondary {
  background: var(--button-secondary);
  color: white;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(163, 230, 53, 0.3);
  box-shadow: 0 2px 8px rgba(163, 230, 53, 0.25);
}

.btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(163, 230, 53, 0.45);
  background: #c0d670c2;
  color: white;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  border-color: rgba(163, 230, 53, 0.45);
}

.btn-edit {
  background: #6b48ff;
  color: white;
  font-weight: 500;
  border: 1px solid rgba(107, 72, 255, 0.35);
  box-shadow: 0 2px 8px rgba(107, 72, 255, 0.35);
}

.btn-edit:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(107, 72, 255, 0.55);
  background: #5a3dd6;
  border-color: rgba(107, 72, 255, 0.55);
}

.btn-danger {
  background: linear-gradient(135deg, var(--danger), #dc2626);
  color: white;
  border: 1px solid var(--danger);
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

.btn-danger:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}

/* Dashboard cards */
.dashboard-card {
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px var(--shadow);
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  margin-bottom: 2rem;
}

.dashboard-card:hover {
  border-color: var(--accent-purple);
  box-shadow: 0 6px 25px color-mix(in srgb, var(--primary) 20%, transparent);
}

.card-header {
  background: rgba(125, 48, 207, 0.08);
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: between;
  align-items: center;
}

.card-title {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  opacity: 1.0;
}

.card-subtitle {
  font-size: var(--fs-md);
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

.card-content {
  padding: 1.5rem;
  overflow-y: auto;
}

/* Screener table */
#screenerTable {
  max-height: 600px;
  overflow-y: auto;
  overflow-x: auto;
}

.screener-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-md);
}

.screener-table th,
.screener-table td {
  padding: 0.875rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}

.screener-table th {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  position: sticky;
  top: 0;
  z-index: 10;
  white-space: nowrap;
  user-select: none;
}

/* Sortable column headers */
.screener-table th.sortable {
  cursor: pointer;
  transition: background 0.15s ease;
}

.screener-table th.sortable:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.screener-table th .sort-icon {
  display: inline-flex;
  margin-left: 0.35rem;
  opacity: 0.4;
  font-size: 0.65em;
  vertical-align: middle;
  transition: opacity 0.15s ease;
}

.screener-table th.sortable:hover .sort-icon {
  opacity: 0.7;
}

.screener-table th.sorted .sort-icon {
  opacity: 1;
  color: var(--accent-purple);
}

.screener-table th.sorted.asc .sort-icon::before {
  content: '\f0de';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
}

.screener-table th.sorted.desc .sort-icon::before {
  content: '\f0dd';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
}

/* Alternating row colors */
.screener-table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--primary) 3%, transparent);
}

.screener-table tbody tr {
  transition: background 0.15s ease;
}

.screener-table tbody tr:hover {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.symbol-cell {
  font-weight: 600;
  color: var(--accent-purple-light);
}

.price-cell {
  font-family: var(--font-sans); font-variant-numeric: tabular-nums;
}

.positive {
  color: var(--success);
}

.negative {
  color: var(--danger);
}

/* Active trades */
.trades-group {
  margin-bottom: 1.5rem;
}

.trades-group-header {
  background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary));
  padding: 0.75rem 1rem;
  border-radius: 8px 8px 0 0;
  border: 1px solid var(--border);
  border-bottom: none;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.trades-group-count {
  background: var(--accent-purple);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  font-size: var(--fs-sm);
  font-weight: 500;
}

.trades-group-header.hold {
  border-left: 4px solid var(--success);
}

.trades-group-header.roll {
  border-left: 4px solid var(--warning);
}

.trades-group-header.exit {
  border-left: 4px solid var(--danger);
}

.trades-group-content {
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 0.5rem;
  background: var(--bg-secondary);
}

.trade-item {
  background: rgba(64, 39, 91, 0.25);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 0.75rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.trade-item:last-child {
  margin-bottom: 0;
}

.trade-item:hover {
  border-color: var(--accent-purple);
  transform: translateX(4px);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--primary) 20%, transparent);
}

.trade-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.trade-symbol {
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--accent-purple-light);
}

.trade-action {
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  text-transform: uppercase;
}

.trade-action.hold {
  background: rgba(16, 185, 129, 0.2);
  color: var(--success);
}

.trade-action.roll {
  background: rgba(245, 158, 11, 0.2);
  color: var(--warning);
}

.trade-action.exit {
  background: rgba(239, 68, 68, 0.2);
  color: var(--danger);
}

.trade-action.closed {
  background: rgba(107, 114, 128, 0.2);
  color: #9ca3af;
}

.trade-action.active {
  background: rgba(96, 165, 250, 0.2);
  color: #60a5fa;
}

/* Light mode - trade action badges with higher opacity for better visibility */
[data-theme="light"] .trade-action.hold {
  background: rgba(16, 185, 129, 0.35);
  color: #047857;
}

[data-theme="light"] .trade-action.roll {
  background: rgba(245, 158, 11, 0.35);
  color: #b45309;
}

[data-theme="light"] .trade-action.exit {
  background: rgba(239, 68, 68, 0.35);
  color: #b91c1c;
}

[data-theme="light"] .trade-action.closed {
  background: rgba(107, 114, 128, 0.35);
  color: #4b5563;
}

[data-theme="light"] .trade-action.active {
  background: rgba(59, 130, 246, 0.35);
  color: #1d4ed8;
}

.trade-pnl {
  font-family: var(--font-sans); font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.trade-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  font-size: var(--fs-sm);
  color: white;
}

/* Loading and empty states */
.loading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 3rem;
  color: var(--text-secondary);
  width: 100%;
  min-height: 200px;
  text-align: center;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Ensure display: none still works for hiding */
.loading[style*="display: none"] {
  display: none !important;
}

.spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--border);
  border-top: 2px solid var(--accent-purple);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.empty-state {
  text-align: center;
  padding: 3rem;
  color: var(--text-muted);
}

.empty-state-icon {
  font-size: var(--fs-3xl);
  margin-bottom: 1rem;
  opacity: 0.5;
}

.empty-state-mascot {
  width: 270px;
  height: auto;
  margin-bottom: 1rem;
}

/* Enhanced empty state with faded table background */
.trades-empty-enhanced,
.screener-empty-enhanced {
  position: relative;
  padding: 0;
  overflow: hidden;
  min-height: 32rem;
  background: transparent;
}

.empty-table-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}

.sample-data-table {
  width: 100%;
  border-collapse: collapse;
}

.sample-data-table thead {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 20%, transparent), rgba(59, 130, 246, 0.15));
  border-bottom: 2px solid color-mix(in srgb, var(--primary) 35%, transparent);
}

.sample-data-table th {
  padding: 1rem 1.5rem;
  text-align: left;
  font-size: var(--fs-md);
  font-weight: 600;
  color: color-mix(in srgb, var(--primary) 90%, transparent);
}

.sample-data-table td {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 15%, transparent);
  color: var(--text-secondary);
}

.sample-data-table tbody tr:nth-child(odd) {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.sample-data-table tbody tr:nth-child(even) {
  background: rgba(59, 130, 246, 0.06);
}

.sample-data-table tbody tr:hover {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.sample-data-table td:nth-child(1) {
  color: color-mix(in srgb, var(--primary) 80%, transparent);
  font-weight: 600;
}

.sample-data-table td strong {
  color: rgba(59, 130, 246, 0.9);
  font-size: var(--fs-md);
}

.sample-data-table .signal-buy {
  color: rgba(16, 185, 129, 0.9);
  font-weight: 600;
  font-size: var(--fs-md);
  background: rgba(16, 185, 129, 0.15);
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
}

.sample-data-table .btn-primary-small {
  padding: 0.4rem 1rem;
  font-size: var(--fs-md);
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 35%, transparent), rgba(59, 130, 246, 0.3));
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid color-mix(in srgb, var(--primary) 50%, transparent);
  border-radius: 6px;
  cursor: default;
}

.empty-table-header {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.empty-table-cell {
  flex: 1;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: var(--fs-md);
}

.empty-table-row {
  height: 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.empty-table-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 300px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(26, 27, 38, 0.9) 60%,
    var(--bg-secondary) 100%
  );
  pointer-events: none;
  z-index: 0;
}

.empty-state-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  width: 100%;
}

.empty-state-owl-container {
  position: absolute;
  bottom: -200px;
  right: -80px;
  z-index: 0;
}

.empty-state-owl-container img {
  width: 350px;
  height: auto;
  transform: scale(4.0);
  opacity: 0.85;
}

.empty-state-message {
  position: relative;
  z-index: 1;
}

.empty-state-message h3 {
  font-size: var(--fs-2xl);
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary), #3b82f6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
}

.empty-state-message > p {
  color: var(--text-secondary);
  font-size: var(--fs-md);
  line-height: 1.5;
  text-align: center;
}

.empty-state-content p {
  color: var(--text-muted);
}

.empty-state-content .text-xs {
  font-size: var(--fs-md);
  margin-top: 0.5rem;
  opacity: 0.7;
}

/* Chart modal */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;
}

.modal.show {
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 2rem;
  max-width: 95vw;
  max-height: 95vh;
  overflow: auto;
  border: 2px solid var(--accent-purple);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}
#tradeChart {
  width: 40vw;
}

.modal-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--accent-purple-light);
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: var(--fs-xl);
  cursor: pointer;
  padding: 0.5rem;
}

.modal-close:hover {
  color: var(--danger);
}

/* Chart container */
.chart-container {
  height: 40rem;
  min-height: 32rem;
  background: var(--bg-primary);
  border-radius: 8px;
  border: 1px solid var(--border);
}

/* Responsive design */
@media (max-width: 1024px) {
  .main-content {
    grid-template-columns: 1fr;
    padding: 1rem;
  }

  .header-content {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .header-left,
  .header-center,
  .header-right {
    justify-content: center;
  }

  .action-bar {
    flex-direction: column;
    gap: 1rem;
  }

  .chart-container {
    width: 100%;
    max-width: 600px;
  }
}

@media (max-width: 768px) {
  .header {
    padding: 1rem;
  }

  .card-content {
    padding: 1rem;
  }

  .trade-details {
    grid-template-columns: 1fr;
  }
}

/* Data Management Card */
.data-management-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding: 0.5rem;
}

.nightly-status,
.nightly-actions {
  background: rgba(39, 57, 56, 0.1);
  border-radius: 8px;
  padding: 1.5rem;
  border: 1px solid var(--border);
}

.nightly-status {
  flex: 1;
}

.nightly-actions {
  margin-top: 1rem;
}

.status-title {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
}

.status-info {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.status-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
}

.status-label {
  font-size: var(--fs-md);
  color: var(--text-secondary);
  font-weight: 500;
}

.status-value {
  font-size: var(--fs-md);
  color: var(--text-primary);
  font-weight: 600;
  font-family: var(--font-sans); font-variant-numeric: tabular-nums;
}

.action-buttons-vertical {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.action-buttons-vertical .btn {
  width: 100%;
  justify-content: center;
}

/* Dashboard Layout */
.dashboard-layout {
    display: flex;
    gap: 2rem;
    margin-top: 1.5rem;
}

.dashboard-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.dashboard-sidebar {
    width: 420px;
    flex-shrink: 0;
}

.data-management-card {
    height: 100%;
    position: sticky;
    top: 1rem;
    min-height: 40rem;
}

.data-management-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    height: 100%;
}

/* Progress Display Styles */
.nightly-progress {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.progress-bar {
    position: relative;
    width: 100%;
    height: 20px;
    background: var(--bg-tertiary);
    border-radius: 10px;
    overflow: hidden;
    margin: 0.5rem 0;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #3b82f6);
    border-radius: 10px;
    transition: width 0.3s ease;
    width: 0%;
}

.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-primary);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.progress-details {
    font-size: var(--fs-sm);
    border-radius: 4px;
    padding: 0.5rem;
    margin-top: 0.5rem;
    max-height: 250px;
    overflow-y: auto;
    line-height: 1.4;
}

/* Rule Evaluation Modal Styles */
.rule-modal-content {
    max-width: 900px;
    max-height: 80vh;
    overflow-y: auto;
    margin: 5% auto;
}

.rule-meta {
    display: flex;
    gap: 2rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: 6px;
    font-size: var(--fs-md);
}

.signal-set-active {
    color: var(--success);
    font-weight: bold;
}

.signal-set-swing {
    color: #d946ef;
    font-weight: bold;
}

.overall-passed {
    color: var(--success);
    font-weight: bold;
}

.overall-failed {
    color: var(--danger);
    font-weight: bold;
}

.rule-section {
    margin-bottom: 1.5rem;
    padding: 1rem;
    border-radius: 8px;
    border: 2px solid var(--border);
}

.rule-section.rule-passed {
    background: rgba(16, 185, 129, 0.1);
    border-color: var(--success);
}

.rule-section.rule-failed {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--danger);
}

.rule-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    font-size: var(--fs-base);
}

.rule-status-icon {
    font-size: var(--fs-xl);
    font-weight: bold;
}

.rule-passed .rule-status-icon {
    color: var(--success);
}

.rule-failed .rule-status-icon {
    color: var(--danger);
}

.rule-condition {
    font-size: var(--fs-md);
    color: var(--text-secondary);
    font-style: italic;
}

.rule-status {
    margin-left: auto;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: var(--fs-md);
    font-weight: bold;
}

.rule-passed .rule-status {
    background: var(--success);
    color: white;
}

.rule-failed .rule-status {
    background: var(--danger);
    color: white;
}

.criteria-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.criterion {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: 6px;
    font-size: var(--fs-md);
}

.criterion-passed {
    border-left: 3px solid var(--success);
}

.criterion-failed {
    border-left: 3px solid var(--danger);
}

.criterion-icon {
    font-weight: bold;
    font-size: var(--fs-base);
}

/* Direct child criterion icon colors - more specific to override parent group colors */
.criterion.criterion-passed > .criterion-icon {
    color: var(--success) !important;
}

.criterion.criterion-failed > .criterion-icon {
    color: var(--danger) !important;
}

/* Group-level direct child icon colors */
.criterion-group.criterion-passed > .criterion > .criterion-icon {
    color: var(--success) !important;
}

.criterion-group.criterion-failed > .criterion > .criterion-icon {
    color: var(--danger) !important;
}

/* Group-level icons (less specific, can be overridden) */
.criterion-passed .criterion-icon {
    color: var(--success);
}

.criterion-failed .criterion-icon {
    color: var(--danger);
}

.criterion-field {
    font-family: var(--font-sans); font-variant-numeric: tabular-nums;
    color: var(--accent-purple-light);
    font-weight: 600;
}

.criterion-operator {
    color: var(--text-secondary);
    font-weight: 600;
}

.criterion-value {
    color: var(--text-primary);
    font-weight: bold;
}

.criterion-actual {
    color: var(--text-secondary);
    font-style: italic;
    margin-left: auto;
}

.criterion-group {
    margin-bottom: 0.5rem;
}

.criterion-group .nested-criteria {
    margin-top: 0.5rem;
    padding-left: 0;
    border-left: 2px solid color-mix(in srgb, var(--primary) 30%, transparent);
}

.criterion-group > .criterion {
    background: color-mix(in srgb, var(--primary) 15%, transparent);
    border-left: 3px solid var(--accent-purple);
}

.criterion-group.criterion-passed > .criterion {
    border-left-color: var(--success);
}

.criterion-group.criterion-failed > .criterion {
    border-left-color: var(--danger);
}

/* Loading spinner for rule evaluation */
.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid color-mix(in srgb, var(--primary) 20%, transparent);
    border-top-color: var(--accent-purple);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Trade Detail Modal Styles */
.trade-detail-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: 8px;
}

.trade-detail-summary .metric {
    text-align: center;
}

.trade-detail-summary .metric .label {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.trade-detail-summary .metric .value {
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--text-primary);
}

.trade-detail-section {
    margin-bottom: 2rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border);
}

.trade-detail-section h4 {
    margin: 0 0 1rem 0;
    font-size: var(--fs-base);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;
}

/* ── Trade Replay Controls ────────────────────────────────────────── */
.replay-toggle-btn {
    float: right;
    font-size: var(--fs-sm);
    padding: 0.3rem 0.8rem;
    background: var(--accent-purple, #a855f7);
    color: #fff;
    border: 1px solid var(--accent-purple, #a855f7);
    border-radius: 5px;
    cursor: pointer;
    transition: filter 0.15s, background 0.15s;
}
.replay-toggle-btn:hover {
    filter: brightness(1.2);
}
.replay-toggle-btn.active {
    background: var(--danger, #ef4444);
    border-color: var(--danger, #ef4444);
}
.replay-controls {
    margin-bottom: 0.75rem;
}
.replay-control-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-tertiary, var(--bg-secondary));
    border-radius: 6px;
    margin-bottom: 0.25rem;
    flex-wrap: wrap;
}
.replay-transport {
    display: flex;
    gap: 0.25rem;
}
.replay-btn {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-primary);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-sm);
    transition: background 0.15s, border-color 0.15s;
}
.replay-btn:hover {
    background: var(--border);
    border-color: var(--accent-purple, #a855f7);
}
.replay-btn-primary {
    background: var(--accent-purple, #a855f7);
    color: #fff;
    border-color: var(--accent-purple, #a855f7);
}
.replay-btn-primary:hover {
    filter: brightness(1.15);
}
.replay-speed {
    display: flex;
    gap: 2px;
}
.replay-speed-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 0.2rem 0.5rem;
    font-size: var(--fs-xs);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
}
.replay-speed-btn.active {
    background: var(--accent-purple, #a855f7);
    color: #fff;
    border-color: var(--accent-purple, #a855f7);
}
.replay-progress {
    flex: 1;
    min-width: 100px;
}
.replay-slider {
    width: 100%;
    accent-color: var(--accent-purple, #a855f7);
    height: 4px;
}
.replay-date {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--accent-purple, #a855f7);
    min-width: 90px;
    text-align: center;
}
.replay-bar-count {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    min-width: 40px;
}
.replay-legend {
    display: flex;
    gap: 1rem;
    padding: 0.25rem 0.75rem;
    font-size: var(--fs-xs);
    color: var(--text-secondary);
}
.replay-legend-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* Entry/Exit rules side-by-side columns */
.bt-rules-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.bt-rules-col {
    min-width: 0; /* prevent overflow */
}
@media (max-width: 900px) {
    .bt-rules-columns {
        grid-template-columns: 1fr;
    }
}

.trade-row-clickable {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.trade-row-clickable:hover {
    background: color-mix(in srgb, var(--primary) 15%, transparent) !important;
}

.exit-rule-triggered {
    border: 2px solid #f59e0b !important;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
}

.roll-event-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-md);
}

.roll-event-table th {
    background: var(--bg-tertiary);
    padding: 0.5rem 0.75rem;
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
}

.roll-event-table td {
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}

@media (max-width: 1200px) {
    .dashboard-layout {
        grid-template-columns: 1fr 350px;
    }
}

@media (max-width: 768px) {
  .data-management-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

    .dashboard-layout {
        flex-direction: column;
        gap: 1rem;
    }

    .dashboard-sidebar {
        width: 100%;
    }

    .data-management-card {
        position: static;
    }

    .data-management-grid {
        gap: 1rem;
    }
}

/* Utility classes */
.text-center { text-align: center; }
.text-right { text-align: right; }
.font-mono { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.text-sm { font-size: var(--fs-md); }
.text-xs { font-size: var(--fs-sm); }
.font-bold { font-weight: 600; }

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-tertiary);
}

::-webkit-scrollbar-thumb {
  background: var(--accent-purple);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-purple-light);
}

/* Floating Progress Card */
.progress-card {
  position: fixed;
  top: 80px;
  right: 20px;
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 380px;
  padding: 12px;
  font-size: var(--fs-md);
  backdrop-filter: blur(8px);
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.5rem;
}

.progress-header h4 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--fs-md);
  font-weight: 600;
}

.progress-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: var(--fs-xl);
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.progress-close:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

/* Progress card header controls */
.progress-header-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.progress-minimize {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: var(--fs-md);
  cursor: pointer;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.progress-minimize:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

/* Draggable header */
.progress-header {
  cursor: move;
  user-select: none;
}

/* Minimized state */
.progress-card.minimized .progress-content {
  display: none;
}

.progress-card.minimized .progress-header {
  margin-bottom: 0;
  border-bottom: none;
}

.progress-card.minimized .progress-header h4 {
  flex: 1;
}

/* Dragging state */
.progress-card.dragging {
  opacity: 0.9;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.progress-content {
  padding: 1.5rem;
}

.progress-status {
  margin-bottom: 1rem;
}

.progress-status span {
  color: var(--text-primary);
  font-weight: 500;
}

.progress-bar-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.progress-bar {
  flex: 1;
  background: var(--bg-tertiary);
  border-radius: 8px;
  height: 16px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-purple), var(--accent-purple-light));
  border-radius: 8px;
  transition: width 0.3s ease;
  width: 0%;
}

.progress-bar-container span {
  color: var(--text-secondary);
  font-size: var(--fs-md);
  min-width: 40px;
  text-align: right;
}

.progress-details {
  font-size: var(--fs-md);
}

.progress-actions {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
}

.progress-actions .btn {
  padding: 0.5rem 1rem;
  font-size: var(--fs-md);
}

/* ============================================
   OPTIONS TRACKING STYLES
   ============================================ */

/* Instrument Type Toggle */
.instrument-toggle {
  display: inline-flex;
  background: var(--bg-tertiary);
  border-radius: 8px;
  padding: 4px;
  gap: 4px;
  border: 1px solid var(--border);
}

.toggle-btn {
  padding: 0.5rem 1.5rem;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--fs-md);
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
  outline: none;
}

.toggle-btn:hover {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.toggle-btn.active {
  background: var(--accent-purple);
  color: white;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 30%, transparent);
}

/* Options Modal Specific Styles */
#optionsModal .modal-content {
  width: 50vw;
}

#optionsModal input[type="number"],
#optionsModal select {
  width: 100%;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.5rem;
  color: var(--text-primary);
  font-size: var(--fs-md);
}

#optionsModal input[type="number"]:focus,
#optionsModal select:focus {
  outline: none;
  border-color: var(--accent-purple);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
}

#optionsModal input[type="number"]:read-only {
  background: var(--bg-secondary);
  cursor: not-allowed;
  opacity: 0.7;
}

#optionsModal input[type="radio"] {
  accent-color: var(--accent-purple);
  cursor: pointer;
}

/* Options Trade Display in Active Trades */
.trade-card.options-trade {
  border-left: 3px solid var(--warning);
}

.trade-card.options-trade .trade-header::before {
  content: "";
  margin-right: 0;
}

.options-badge {
  display: inline-block;
  background: var(--warning);
  color: var(--bg-primary);
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  margin-left: 0.5rem;
}

.options-details {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: rgba(245, 158, 11, 0.1);
  border-radius: 4px;
  font-size: var(--fs-md);
}

.options-details-item {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.options-details-label {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  text-transform: uppercase;
}

.options-details-value {
  color: var(--text-primary);
  font-weight: 600;
}

/* Options specific table columns */
.screener-table th.options-column,
.screener-table td.options-column {
  background: rgba(245, 158, 11, 0.05);
}

/* Spinner for loading */
.spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto 1rem;
  border: 4px solid var(--bg-tertiary);
  border-top: 4px solid var(--accent-purple);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Page Content Sections */
.page-content {
  display: none;
}

.page-content.active {
  display: block;
}

/* Accounts Page Styles */
.accounts-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: rgba(42, 45, 58, 0.5);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.page-title {
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.accounts-controls {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.chart-wrapper {
  position: relative;
  height: 400px;
  padding: 1rem;
}

/* Tabs */
.tabs {
  display: flex;
  gap: 0.5rem;
}

.tab-button {
  padding: 0.75rem 1.5rem;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
  font-size: var(--fs-md);
  font-weight: 500;
}

.tab-button:hover {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--primary) 5%, transparent);
}

.tab-button.active {
  color: var(--accent-purple-light);
  border-bottom-color: var(--accent-purple);
}

.tab-content {
  display: none;
  padding-top: 1.5rem;
}

.tab-content.active {
  display: block;
}

/* Table Controls */
.table-controls {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.table-controls .control-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.table-controls label {
  font-size: var(--fs-md);
  color: var(--text-secondary);
  font-weight: 500;
}

/* Trade Summary */
.trade-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  padding: 1rem;
  background: rgba(42, 45, 58, 0.5);
  border-radius: 8px;
  border: 1px solid var(--border);
  margin-bottom: 1.5rem;
}

.summary-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.summary-label {
  font-size: var(--fs-md);
  color: var(--text-secondary);
  font-weight: 500;
}

.summary-value {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text-primary);
}

.summary-value.positive {
  color: var(--success);
}

.summary-value.negative {
  color: var(--danger);
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 1rem;
}

#ledgerPageInfo,
#historyPageInfo {
  color: var(--text-secondary);
  font-size: var(--fs-md);
}

/* Transaction Type Colors */
.transaction-deposit,
.transaction-profit {
  color: var(--success);
}

.transaction-withdrawal,
.transaction-loss,
.transaction-fee {
  color: var(--danger);
}

.transaction-adjustment {
  color: var(--warning);
}

/* Activity Type Badges */
.activity-type-badge {
    font-size: 0.7em;
    padding: 1px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    font-weight: 600;
    margin-right: 4px;
    display: inline-block;
    vertical-align: middle;
    letter-spacing: 0.02em;
}

/* P&L Colors in Tables */
.pnl-positive,
.screener-table td.pnl-positive {
  color: var(--success);
  font-weight: 600;
}

.pnl-negative,
.screener-table td.pnl-negative {
  color: var(--danger);
  font-weight: 600;
}

/* Toggle Switch */
.toggle-switch {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  user-select: none;
  position: relative;
}

.toggle-switch input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  background: #4b5563;
  border-radius: 22px;
  transition: background 0.25s ease;
  cursor: pointer;
  flex-shrink: 0;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #d1d5db;
  top: 3px;
  left: 3px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-switch input:checked + .toggle-slider {
  background: #10b981;
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(18px);
  background: #fff;
}

.toggle-switch:hover .toggle-slider {
  opacity: 0.9;
}

.toggle-label {
  color: var(--text-primary);
  font-size: var(--fs-md);
  font-weight: 500;
}
/* Options Chain Table */
.options-chain-table {
  font-size: var(--fs-md);
}

.options-chain-table tbody tr {
  transition: background 0.2s ease;
  cursor: pointer;
}

.options-chain-table tbody tr:hover {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.options-chain-table tbody tr.selected {
  background: color-mix(in srgb, var(--primary) 20%, transparent);
  border-left: 3px solid var(--accent-purple);
}

.options-chain-table tbody td {
  padding: 0.5rem;
  border-bottom: 1px solid rgba(55, 65, 81, 0.5);
  font-size: var(--fs-sm);
}

.options-chain-table tbody tr:hover td {
  border-bottom-color: color-mix(in srgb, var(--primary) 30%, transparent);
}

/* Call side styling */
.options-chain-table .call-side {
  text-align: right;
  color: var(--text-primary);
  transition: all 0.2s ease;
}

/* Highlight all call cells in row when hovering over any call cell */
.options-chain-table tr:has(.call-side:hover) .call-side.itm {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.options-chain-table tr:has(.call-side:hover) .call-side.otm {
  background: rgba(16, 185, 129, 0.08);
  color: #10b981;
}

/* Put side styling */
.options-chain-table .put-side {
  text-align: left;
  color: var(--text-primary);
  transition: all 0.2s ease;
}

/* Highlight all put cells in row when hovering over any put cell */
.options-chain-table tr:has(.put-side:hover) .put-side.itm {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.options-chain-table tr:has(.put-side:hover) .put-side.otm {
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
}

/* Strike column (center) */
.options-chain-table .strike-column {
  text-align: center;
  font-weight: 700;
  background: var(--bg-primary);
  border-left: 2px solid var(--border);
  border-right: 2px solid var(--border);
  color: var(--accent-purple-light);
}

/* ATM strike highlight */
.options-chain-table .atm-strike {
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  font-weight: 800;
  color: var(--accent-purple);
}

/* ITM/OTM indicators */
.options-chain-table .itm {
  font-weight: 600;
  opacity: 1;
}

.options-chain-table .otm {
  opacity: 0.5;
  font-weight: 400;
}

/* ==============================
   Unified Tab System (.app-tabs)
   Folder-tab style: solid bg on active, rounded top corners
   Used across: backtest type, backtest results, analytics, journal, strategies
   ============================== */
.app-tabs {
  display: flex;
  gap: 4px;
  margin-top: 1rem;
  padding: 0 1rem;
  border-bottom: 2px solid var(--border);
  overflow-x: auto;
}

.app-tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.5rem;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.app-tab i {
  font-size: var(--fs-md);
  opacity: 0.6;
}

.app-tab:hover {
  color: var(--text-primary);
  background: var(--bg-secondary);
}

.app-tab:hover i {
  opacity: 0.8;
}

.app-tab.active {
  background: var(--accent-purple);
  color: #fff;
  border-color: var(--accent-purple);
}

.app-tab.active i {
  opacity: 1;
  color: #fff;
}

.app-tab-content {
  display: none;
}

.app-tab-content.active {
  display: block;
}

/* Results Tab Content */
.results-tab-content {
  display: none;
}

.results-tab-content.active {
  display: block;
}

/* Stale Data Alert Banner */
.stale-data-alert {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(239, 68, 68, 0.15));
  border-bottom: 2px solid var(--warning);
  padding: 12px 20px;
  position: sticky;
  top: 0;
  z-index: 99; /* Below sidebar (1000) */
  margin-left: 240px; /* Account for expanded sidebar width */
  transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.sidebar-collapsed .stale-data-alert {
  margin-left: 64px; /* Collapsed sidebar width */
}

.stale-data-alert .alert-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  max-width: 1400px;
  margin: 0 auto;
}

.stale-data-alert .alert-icon {
  font-size: var(--fs-base);
}

.stale-data-alert .alert-message {
  color: var(--warning);
  font-weight: 500;
  font-size: var(--fs-md);
}

.stale-data-alert .btn-warning {
  background: var(--warning);
  color: #1a1b23;
  border: none;
  padding: 6px 16px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.stale-data-alert .btn-warning:hover {
  background: #d97706;
  transform: translateY(-1px);
}

.stale-data-alert .btn-link {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  text-decoration: underline;
  font-size: var(--fs-md);
}

.stale-data-alert .btn-link:hover {
  color: var(--text-primary);
}

.btn-sm {
  padding: 4px 12px;
  font-size: var(--fs-md);
}

/* =============================================================================
   SUBSCRIPTION MANAGEMENT
   ============================================================================= */

/* Summary stat cards */
.sub-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.sub-stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  text-align: center;
}

.sub-stat-value {
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.sub-stat-label {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

/* Plan badge */
.plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

/* Sub status badges */
.sub-status-badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: capitalize;
}

.sub-status-active {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.sub-status-expiring {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.sub-status-expired {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.sub-status-free {
  background: rgba(107, 114, 128, 0.15);
  color: #9ca3af;
}

/* Users table */
.sub-users-table {
  width: 100%;
  border-collapse: collapse;
}

.sub-users-table thead th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
}

.sub-users-table tbody td {
  padding: 0.65rem 1rem;
  font-size: var(--fs-md);
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}

.sub-users-table tbody tr:hover {
  background: var(--bg-secondary);
}

/* Plans table in settings */
.sub-plans-table {
  width: 100%;
  border-collapse: collapse;
}

.sub-plans-table thead th {
  padding: 0.6rem 0.75rem;
  text-align: left;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}

.sub-plans-table tbody td {
  padding: 0.6rem 0.75rem;
  font-size: var(--fs-md);
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}

/* Access matrix table */
.subscription-matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md);
}

.subscription-matrix-table thead th {
  padding: 0.6rem 0.5rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}

.subscription-matrix-table tbody td {
  padding: 0.5rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.subscription-matrix-table .matrix-feature-cell {
  position: sticky;
  left: 0;
  background: var(--card-bg);
  white-space: nowrap;
  font-weight: 500;
  z-index: 1;
  padding-right: 1rem;
}

/* Matrix dropdown */
.matrix-select {
  border: none;
  border-radius: 999px;
  padding: 0.2rem 0.5rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  appearance: none;
  -webkit-appearance: none;
  min-width: 70px;
}

/* Access level badges / selects */
.access-badge.access-none {
  background: rgba(107, 114, 128, 0.15);
  color: #9ca3af;
}

.access-badge.access-limited {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.access-badge.access-full {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

/* Admin tab content panels */
.admin-tab-content {
  /* inherits display from JS */
}

/* Color swatch picker */
.color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  transition: border-color 0.15s, transform 0.15s;
}

.color-swatch:hover {
  transform: scale(1.15);
}

.color-swatch input[type="radio"] {
  display: none;
}

.color-swatch:has(input:checked) {
  border-color: var(--text-primary);
  transform: scale(1.15);
}

/* Responsive */
@media (max-width: 768px) {
  .sub-stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Signal Explorer */
.signal-search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-secondary, #111827);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0.375rem;
  max-height: 240px;
  overflow-y: auto;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.signal-search-item {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: var(--fs-md);
  color: var(--text-default, #f8fafc);
  font-family: monospace;
}
.signal-search-item:hover {
  background: color-mix(in srgb, var(--primary) 15%, transparent);
}
/* #signalPeriodGroup / #signalSourceGroup styling moved to theme.css (.sx-seg, 2026-10-15) */
/* Pill buttons — small inline action buttons used throughout the app */
.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 20px;
  border: none;
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, transparent), rgba(59, 130, 246, 0.12));
  color: var(--accent-blue, #3b82f6);
  backdrop-filter: blur(4px);
}
.btn-pill:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 25%, transparent), rgba(59, 130, 246, 0.25));
  transform: translateY(-1px);
}
.btn-pill i {
  font-size: var(--fs-xs);
}

/* Chart layer panel items */
.chart-layer-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  transition: background 0.15s;
}
.chart-layer-item:hover {
  background: rgba(150,150,150,0.08);
}
.chart-layer-item input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--accent-blue, #3b82f6);
  cursor: pointer;
  margin: 0;
}
.chart-layer-swatch {
  width: 18px;
  height: 12px;
  border-radius: 2px;
  flex-shrink: 0;
}


/* ── Forward-test detail tables (Open Positions / Trade Ledger / Daily Portfolio) ── */
.results-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-secondary);
}
.results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md);
}
.results-table thead th {
  text-align: left;
  padding: 0.65rem 1rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-light);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}
.results-table tbody td {
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.results-table tbody tr:last-child td { border-bottom: none; }
.results-table tbody tr:hover { background: rgba(148, 163, 184, 0.07); }
.results-table th.num,
.results-table td.num { text-align: right; }
.results-table td.positive { color: var(--success); }
.results-table td.negative { color: var(--danger); }

/* Concentration flag on the screener's "Position % of Acct" cell.
   ADVISORY ONLY — the position is never reduced. Fires above
   position_sizing.concentration_warn_pct (default 25% of account), a threshold
   chosen so it stays silent while a strategy sizes as designed and speaks only
   when an input is off. See v4/scripts/shared/position_sizing.py. */
.position-pct-warn {
  color: var(--warning);
  font-weight: 600;
  cursor: help;
}