/* TradeMate Executive Terminal Theme */
:root {
  --bg-app: #F8FAFC;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F8FAFC;
  --bg-header-dark: #0B192C;
  --border-color: #E2E8F0;
  --border-light: #F1F5F9;
  --text-primary: #0F172A;
  --text-secondary: #64748B;
  --text-muted: #94A3B8;

  --color-green: #059669;
  --color-green-btn: #059669;
  --color-green-btn-hover: #047857;
  --color-green-bg: #DCFCE7;
  --color-green-text: #15803D;

  --color-red: #DC2626;
  --color-red-btn: #DC2626;
  --color-red-btn-hover: #B91C1C;
  --color-red-bg: #FEE2E2;
  --color-red-text: #B91C1C;

  --color-amber: #D97706;
  --color-amber-bg: #FEF3C7;
  --color-amber-text: #B45309;

  --color-blue: #2563EB;
  --color-blue-btn: #2563EB;
  --color-blue-btn-hover: #1D4ED8;
  --color-blue-bg: #EFF6FF;
  --color-blue-text: #1E40AF;

  --color-cyan-metric: #38BDF8;
  --color-mint-val: #34D399;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);

  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

body {
  background-color: var(--bg-app);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: 13px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ==========================================
   TIER 1: EXECUTIVE DARK NAVY HEADER (Matching media_1789375369019.png)
   ========================================== */
.app-header-dark {
  background: #FFFFFF;
  border-bottom: 1px solid #E2E8F0;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.header-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-left {
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
}

.brand-title-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
}

.brand-icon {
  font-size: 18px;
  line-height: 1;
}

.brand-title-text {
  font-size: 15px;
  font-weight: 700;
  color: #0F172A;
  letter-spacing: -0.2px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  user-select: none;
  white-space: nowrap;
}

/* Three Primary Navigation Tabs in Header per SYS_HEADER_BUTTONS_TABS.md Section 1.1 */
.header-nav-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
}

.header-tab-btn {
  background: transparent;
  border: 1px solid transparent;
  color: #94A3B8;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  user-select: none;
  white-space: nowrap;
}

.header-tab-btn:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.08);
}

.header-tab-btn.active {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.22);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Status Dots with Soft Halo Glow */
.status-dot-dark {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  transition: all 0.3s ease;
}
.status-dot-dark.green {
  background-color: #00C076 !important;
  box-shadow: 0 0 0 3px rgba(0, 192, 118, 0.2), 0 0 8px rgba(0, 192, 118, 0.5);
}
.status-dot-dark.orange, .status-dot-dark.amber {
  background-color: #F59E0B !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2), 0 0 8px rgba(245, 158, 11, 0.5);
}
.status-dot-dark.red {
  background-color: #EF4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2), 0 0 8px rgba(239, 68, 68, 0.5);
}

/* Header Dropdown Menu */
.header-dropdown-wrap {
  display: flex;
  align-items: center;
  margin-left: 10px;
}

.header-select-dark {
  appearance: none;
  -webkit-appearance: none;
  background-color: #111d2e;
  border: 1px solid #1f334d;
  border-radius: 6px;
  color: #f1f5f9;
  font-size: 13px;
  font-weight: 500;
  height: 34px;
  padding: 0 32px 0 12px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  outline: none;
  font-family: inherit;
  transition: all 0.2s ease;
}

.header-select-dark:hover,
.header-select-dark:focus {
  background-color: #18283e;
  border-color: #2b4466;
}

/* Right Controls: Identical Button Sizes & Colors per User Instruction */
.section-right {
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.btn-hdr-action,
.broker-chip-dark,
.btn-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: rgba(2, 132, 199, 0.08) !important;
  border: 1px solid rgba(2, 132, 199, 0.25) !important;
  color: #0284C7 !important;
  transition: all 0.2s ease;
  user-select: none;
  font-family: inherit;
  box-sizing: border-box;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.btn-hdr-action span,
.broker-chip-dark span,
.btn-dark span {
  color: #0284C7;
  font-size: 12px;
  font-weight: 600;
}

/* Green Connection State (Matching Fyers example: light mint green bg, soft green border) */
.broker-chip-dark.connected,
.broker-chip-dark:has(.status-dot-dark.green) {
  background: #F0FDF4 !important;
  border: 1px solid rgba(16, 185, 129, 0.45) !important;
}

.broker-chip-dark.connected:hover,
.broker-chip-dark:has(.status-dot-dark.green):hover {
  background: #DCFCE7 !important;
  border-color: #10B981 !important;
}

/* Orange/Amber Connection State (Matching disconnected/syncing: light amber bg, soft amber border) */
.broker-chip-dark.disconnected,
.broker-chip-dark.syncing,
.broker-chip-dark:has(.status-dot-dark.amber),
.broker-chip-dark:has(.status-dot-dark.orange) {
  background: #FFFBEB !important;
  border: 1px solid rgba(245, 158, 11, 0.45) !important;
}

.broker-chip-dark.disconnected:hover,
.broker-chip-dark.syncing:hover,
.broker-chip-dark:has(.status-dot-dark.amber):hover,
.broker-chip-dark:has(.status-dot-dark.orange):hover {
  background: #FEF3C7 !important;
  border-color: #F59E0B !important;
}

/* Default / Alerts & Lock Hover */
.btn-hdr-action:hover,
.btn-dark:hover {
  background: rgba(2, 132, 199, 0.16) !important;
  border-color: #0284C7 !important;
  color: #0284C7 !important;
}

.btn-hdr-action svg,
.btn-dark svg {
  color: #0284C7;
  stroke: #0284C7;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.btn-hdr-action:hover svg,
.btn-dark:hover svg {
  color: #0284C7;
  stroke: #0284C7;
}

/* ==========================================
   TIER 2: SECONDARY WHITE TABS BAR
   ========================================== */
.tabs-nav-white {
  background: #FFFFFF;
  border-bottom: 1px solid #E2E8F0;
  padding: 0 24px;
  height: 44px;
  display: flex;
  align-items: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}
.tabs-container {
  display: flex;
  gap: 12px;
}
.tab-btn {
  padding: 10px 18px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  font-size: 14px;
  font-weight: 500;
  color: #64748B;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-bottom: -1px;
}
.tab-btn:hover {
  color: #0F172A;
}
.tab-btn.active {
  color: #1E60D5;
  border-bottom-color: #1E60D5;
  font-weight: 700;
}

/* ==========================================
   MAIN CONTAINER & GRID (2-Column 50% / 50%)
   ========================================== */
.main-content {
  padding: 14px 16px;
  max-width: 100%;
  margin: 0 auto;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.dashboard-grid-50-50 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

.dashboard-col-left {
  display: flex;
  flex-direction: column;
}

.dashboard-col-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ==========================================
   STRATEGY CARDS & DARK NAVY HEADERS
   ========================================== */
.strategy-card {
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.card-header {
  padding: 10px 14px;
  background: var(--bg-header-dark);
  border-bottom: 1px solid var(--bg-header-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-header-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11.5px;
}

.metric-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: var(--color-cyan-metric);
  font-size: 11.5px;
}
.metric-pill .val {
  font-weight: 700;
  color: var(--color-mint-val);
}
.metric-pill.ratio-red .val {
  color: #F87171;
}

.header-select {
  font-size: 11.5px;
  padding: 4px 10px;
  border-radius: 6px;
  border: none;
  background: #FFFFFF;
  color: #0F172A;
  font-weight: 700;
  outline: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.auto-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  font-size: 12px;
  color: #FFFFFF;
  cursor: pointer;
  user-select: none;
}
.auto-toggle input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: #2563EB;
  cursor: pointer;
}

/* ==========================================
   STRATEGY TABLES & DATA ROWS
   ========================================== */
.table-container {
  overflow-x: auto;
}

.strategy-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.strategy-table th {
  background: #F8FAFC;
  padding: 8px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #64748B;
  border-bottom: 1px solid var(--border-color);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.strategy-table th.text-center, .strategy-table td.text-center {
  text-align: center;
}
.strategy-table th.text-right, .strategy-table td.text-right {
  text-align: right;
}

.strategy-table td {
  padding: 8px 8px;
  border-bottom: 1px solid var(--border-light);
  font-size: 12px;
  vertical-align: middle;
  color: #1E293B;
  white-space: nowrap;
}

.strategy-table tr:not(.wl-contracts-drawer-row):hover > td {
  background-color: var(--bg-card-hover);
}

.underlying-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: #0F172A;
  font-size: 12px;
}

/* Chart Icon */
.chart-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.15s ease;
}
.chart-btn:hover {
  transform: scale(1.08);
}
.chart-svg {
  display: block;
}

/* Status Badges */
.badge-tag {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}
.badge-tag.bullish {
  background: var(--color-green-soft);
  color: var(--color-green-text);
}
.badge-tag.bearish {
  background: var(--color-red-soft);
  color: var(--color-red-text);
}
.badge-tag.overbought {
  background: var(--color-orange-soft);
  color: var(--color-orange-text);
}
/* Breadth Header Pills */
.breadth-bulls-pill, .breadth-bulls {
  color: #10b981 !important;
  font-weight: 700;
}
.breadth-bulls-pill .val {
  color: #10b981 !important;
}
.breadth-bears-pill, .breadth-bears {
  color: #ef4444 !important;
  font-weight: 700;
}
.breadth-bears-pill .val {
  color: #ef4444 !important;
}

/* Exact 6-State Status Badges */
.badge-bullish-green, .badge-tag.bullish-green, .badge-tag.bullish {
  background: #DCFCE7 !important;
  color: #15803D !important;
  border-radius: 4px;
  padding: 3px 8px;
  font-weight: 600;
  font-size: 11px;
  display: inline-block;
}
.badge-status-orange, .badge-tag.orange, .badge-tag.status-orange, .badge-tag.overbought, .badge-tag.oversold {
  background: #FEF3C7 !important;
  color: #B45309 !important;
  border-radius: 4px;
  padding: 3px 8px;
  font-weight: 600;
  font-size: 11px;
  display: inline-block;
}
.badge-bearish-red, .badge-tag.bearish-red, .badge-tag.bearish, .badge-tag.red {
  background: #FEE2E2 !important;
  color: #B91C1C !important;
  border-radius: 4px;
  padding: 3px 8px;
  font-weight: 600;
  font-size: 11px;
  display: inline-block;
}

/* Action Buttons in Grid */
.btn-action {
  border: none;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  min-width: 58px;
  text-align: center;
  display: inline-block;
  color: #FFFFFF !important;
}
.btn-action.entry, .btn-action-entry {
  background: #10b981 !important;
  color: #FFFFFF !important;
}
.btn-action.entry:hover, .btn-action-entry:hover {
  background: #059669 !important;
}

.btn-action.no-trade, .btn-action-no-trade, .btn-action.notrade, .btn-action.wait, .btn-action-wait {
  background: #3b82f6 !important;
  color: #FFFFFF !important;
}
.btn-action.no-trade:hover, .btn-action-no-trade:hover {
  background: #2563eb !important;
}

.btn-action.hold, .btn-action-hold {
  background: #10b981 !important;
  color: #FFFFFF !important;
}
.btn-action.hold.bearish, .btn-action-hold-bearish {
  background: #ef4444 !important;
  color: #FFFFFF !important;
}
.btn-action.hold.bullish, .btn-action-hold-bullish {
  background: #10b981 !important;
  color: #FFFFFF !important;
}
.btn-action.hold:hover, .btn-action-hold:hover {
  filter: brightness(0.92);
}

.btn-action.exit, .btn-action-exit {
  background: #ef4444 !important;
  color: #FFFFFF !important;
}
.btn-action.exit:hover, .btn-action-exit:hover {
  background: #dc2626 !important;
}

.btn-action.rollover, .btn-rollover, .btn-action-rollover, .btn-action.manual, .btn-action-manual {
  background: #8b5cf6 !important;
  color: #FFFFFF !important;
}
.btn-action.rollover:hover, .btn-rollover:hover {
  background: #7c3aed !important;
}

.btn-action.pending, .btn-action-pending, .btn-action.cancel, .btn-action-cancel {
  background: #f59e0b !important;
  color: #FFFFFF !important;
}
.btn-action.pending:hover, .btn-action-pending:hover {
  background: #d97706 !important;
}

.btn-action.partial, .btn-action-partial {
  background: #eab308 !important;
  color: #FFFFFF !important;
}
.btn-action.partial:hover, .btn-action-partial:hover {
  background: #ca8a04 !important;
}

/* LTP Right Alignment (Cells only per instruction) */
.cell-ltp {
  text-align: right !important;
  padding-right: 20px !important;
}
.cell-ltp .ltp-cell {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: baseline !important;
  gap: 6px !important;
}

/* Sub-panel Headers (Stock Option Buying) */
.subpanel-header {
  background: #F1F5F9;
  padding: 6px 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: #475569;
  border-bottom: 1px solid var(--border-color);
  border-top: 1px solid var(--border-color);
}
.subpanel-header:first-of-type {
  border-top: none;
}

.empty-placeholder {
  padding: 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
}

/* ==========================================
   CENTERED MODAL WINDOWS
   ========================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(11, 25, 44, 0.6);
  backdrop-filter: blur(3px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal-overlay.active {
  display: flex;
}

.order-modal {
  background: #FFFFFF;
  border-radius: 8px;
  width: 92%;
  max-width: 760px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-color);
  overflow: hidden;
  animation: modalScale 0.15s ease-out;
}

@keyframes modalScale {
  from { transform: scale(0.97); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.modal-header {
  padding: 12px 16px;
  background: #FAFBFC;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.modal-title {
  font-size: 14px;
  font-weight: 700;
  color: #0F172A;
}
.modal-close {
  background: transparent;
  border: none;
  font-size: 18px;
  font-weight: bold;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0 4px;
}

.modal-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.ow-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 6px;
  background: #F8FAFC;
  border: 1px solid var(--border-color);
  font-size: 12px;
  font-weight: 600;
}

.ow-margin-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 6px;
  background: #F8FAFC;
  border: 1px solid var(--border-color);
  font-size: 12px;
}

.margin-status-pill {
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 11px;
}
.margin-status-pill.available {
  background: var(--color-green-bg);
  color: var(--color-green-text);
}
.margin-status-pill.add-funds {
  background: var(--color-red-bg);
  color: var(--color-red-text);
}

.depth-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: #F8FAFC;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
}
.depth-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.depth-table th {
  padding: 3px 6px;
  color: var(--text-secondary);
  font-weight: 600;
  border-bottom: 1px solid #E2E8F0;
}
.depth-table td {
  padding: 3px 6px;
}
.depth-bid { color: var(--color-green-text); font-weight: 600; }
.depth-ask { color: var(--color-red-text); font-weight: 600; }

.modal-footer {
  padding: 12px 16px;
  background: #FAFBFC;
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.btn-primary {
  background: var(--color-green-btn);
  color: #FFFFFF;
  border: none;
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.btn-primary:hover {
  background: var(--color-green-btn-hover);
}

.btn-danger {
  background: var(--color-red-btn);
  color: #FFFFFF;
  border: none;
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.btn-danger:hover {
  background: var(--color-red-btn-hover);
}

.btn-secondary {
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.btn-secondary:hover {
  background: #F1F5F9;
}

/* ==========================================
   TRADE LOGS VIEW
   ========================================== */
.logs-view-container {
  display: none;
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.logs-view-container.active {
  display: block;
}

/* ==========================================
   AUTHENTICATION OVERLAY
   ========================================== */
.auth-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #0B192C;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
.auth-overlay.active {
  display: flex;
}

.auth-card {
  background: #FFFFFF;
  padding: 28px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
  width: 340px;
  text-align: center;
}
.auth-card h2 {
  font-size: 18px;
  margin-bottom: 6px;
  color: #0F172A;
}
.auth-card p {
  color: var(--text-secondary);
  font-size: 12px;
  margin-bottom: 20px;
}
.auth-input {
  width: 100%;
  padding: 10px;
  font-size: 14px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  margin-bottom: 14px;
  text-align: center;
  outline: none;
}
.auth-input:focus {
  border-color: var(--color-blue);
}

/* Form Styles */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.form-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}
.form-input, .form-select {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  font-size: 12px;
  outline: none;
}
.form-input:focus, .form-select:focus {
  border-color: var(--color-blue);
}

/* Segmented Toggle Control */
.toggle-group {
  display: inline-flex;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
}
.toggle-btn {
  padding: 5px 12px;
  border: none;
  background: #F8FAFC;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
}
.toggle-btn.active {
  background: var(--color-blue);
  color: #FFFFFF;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .dashboard-grid-50-50 {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 1100px) {
  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

/* Timeframe Tag on Strategy Card Header */
.timeframe-tag {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.12);
  color: #93C5FD;
  border: 1px solid rgba(147, 197, 253, 0.35);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  vertical-align: middle;
}

/* Inline Script Name & Chart Link in Underlying Cell */
.underlying-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.script-name {
  font-weight: 700;
  color: #0F172A;
  font-size: 12.5px;
}
.chart-btn-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.75;
  transition: opacity 0.15s ease, transform 0.15s ease;
  text-decoration: none;
  vertical-align: middle;
}
.chart-btn-inline:hover {
  opacity: 1;
  transform: scale(1.15);
}

/* Card Header Strategy-Specific Symbol Sync Button */
.btn-card-sync {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 5px;
  color: #CBD5E1;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-card-sync:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.45);
  color: #FFFFFF;
}
.btn-card-sync.refreshing svg {
  animation: spin 0.8s linear infinite;
}

/* Rank & Score Indicators */
.delta-up { color: #16A34A; font-weight: 700; margin-left: 3px; font-size: 10px; }
.delta-down { color: #DC2626; font-weight: 700; margin-left: 3px; font-size: 10px; }
.delta-same { color: #94A3B8; margin-left: 3px; font-size: 9px; vertical-align: middle; }

/* LTP (D%) Column */
.ltp-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
}
.ltp-val {
  font-weight: 700;
  font-size: 12px;
  color: #0F172A;
}
.ltp-pct {
  font-size: 10.5px;
  font-weight: 700;
}
.ltp-pct.green {
  color: #16A34A;
}
.ltp-pct.red {
  color: #DC2626;
}

/* Row-level Broker Dropdown Select */
.row-broker-select {
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 600;
  color: #1E293B;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: all 0.15s ease;
}
.row-broker-select:focus {
  outline: none;
  border-color: #2563EB;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

/* Symbols sync button spinning state */
.btn-symbols-dark.refreshing svg,
.btn-tvsync-dark.refreshing svg {
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   BROKER DETAILS & OAUTH MODAL STYLING (COMPACT ZERO-SCROLL)
   ========================================================================== */
.modal-overlay.hidden,
.hidden {
  display: none !important;
}

#broker-details-modal:not(.hidden) {
  display: flex !important;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.status-dot.green { background-color: #16a34a; box-shadow: 0 0 6px rgba(22, 163, 74, 0.4); }
.status-dot.orange { background-color: #f59e0b; box-shadow: 0 0 6px rgba(245, 158, 11, 0.4); }
.status-dot.red { background-color: #ef4444; box-shadow: 0 0 6px rgba(239, 68, 68, 0.4); }

.modal-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.modal-title-wrap h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}
.btn-close-modal {
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.btn-close-modal:hover {
  background: #f1f5f9;
  color: #0f172a;
}
/* ==========================================================================
   EXECUTIVE MODAL CARDS (SHOONIYA & ALERTS) per SYS_HEADER_BUTTONS_TABS.md
   ========================================================================== */
.modal-card,
.broker-modal-card-executive,
.alerts-modal-card-executive,
.tradelog-modal-card-executive {
  background: #ffffff;
  border-radius: 12px;
  width: 100%;
  max-width: 480px;
  overflow: hidden;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.15);
  animation: modalFadeIn 0.15s ease-out;
}

.tradelog-modal-card-executive {
  max-width: 860px;
}

@keyframes modalFadeIn {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

.modal-header-executive {
  background: #111c30;
  color: #ffffff;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title-executive {
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal-title-executive h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #ffffff;
}

.modal-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.badge-broker-status {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 9999px;
  letter-spacing: 0.5px;
}

.badge-connected {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.3);
}

.badge-disconnected {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.3);
}

.modal-body-executive {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #ffffff;
}

.broker-metric-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13.5px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f5f9;
}

.broker-metric-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.row-label {
  color: #64748b;
  font-weight: 500;
}

.row-val {
  color: #0f172a;
  font-weight: 700;
}

.row-val.text-green {
  color: #059669;
}

.row-val.text-red {
  color: #dc2626;
}

.row-val.highlight {
  font-size: 15px;
}

.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.modal-footer-executive {
  padding: 14px 24px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.btn-modal-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.15s ease;
  user-select: none;
}

.btn-sync-blue {
  background: #0284c7;
  color: #ffffff;
}
.btn-sync-blue:hover {
  background: #0369a1;
}

.btn-toggle-amber {
  background: #d97706;
  color: #ffffff;
}
.btn-toggle-amber:hover {
  background: #b45309;
}

.btn-toggle-green {
  background: #10b981;
  color: #ffffff;
}
.btn-toggle-green:hover {
  background: #059669;
}

.btn-close-slate {
  background: #64748b;
  color: #ffffff;
}
.btn-close-slate:hover {
  background: #475569;
}

/* Tab View switching containers */
.tab-view {
  animation: fadeInView 0.15s ease-out;
}
@keyframes fadeInView {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

.broker-modal-card {
  width: 710px;
  max-width: 95vw;
  max-height: 95vh;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.broker-modal-body {
  padding: 12px 18px 14px;
}

.broker-disconnected-view {
  text-align: center;
  padding: 24px 16px 16px;
}

.broker-alert-icon {
  margin-bottom: 14px;
}

.broker-disconnected-view h4 {
  font-size: 18px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 8px;
}

.broker-desc {
  font-size: 13.5px;
  color: #64748b;
  line-height: 1.5;
  margin-bottom: 20px;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}

.btn-broker-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #0284c7;
  color: #ffffff;
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
  transition: all 0.2s ease;
}

.btn-broker-login:hover {
  background: #0369a1;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(2, 132, 199, 0.35);
}

.broker-account-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 10px;
}

.acc-info-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #475569;
}

.acc-lbl {
  font-weight: 600;
  color: #64748b;
}

.acc-actions-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-broker-sync {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-broker-sync:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.btn-broker-sync.spinning svg {
  animation: spin 0.7s linear infinite;
}

.btn-broker-disconnect {
  padding: 4px 10px;
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fca5a5;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-broker-disconnect:hover {
  background: #fecaca;
}

/* Compact Dashboard Sections */
.broker-section-block {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 12px 10px;
  margin-bottom: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.broker-sec-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid #f1f5f9;
}

.broker-sec-title {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.broker-sec-badge {
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  background: #f1f5f9;
  padding: 1px 6px;
  border-radius: 10px;
}

.broker-cards-triplet {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.broker-cards-quad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.broker-metric-card {
  padding: 7px 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  text-align: center;
  transition: all 0.15s ease;
}

.broker-metric-card.highlight {
  border-color: #86efac;
  background: #f0fdf4;
}

.broker-metric-card.cursor-pointer {
  cursor: pointer;
}

.broker-metric-card.cursor-pointer:hover {
  border-color: #fca5a5;
  background: #fff1f2;
}

.metric-label {
  font-size: 9.5px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}

.metric-val {
  font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 2px;
}

.metric-val.text-blue { color: #0284c7; }
.metric-val.text-cyan { color: #0891b2; }
.metric-val.text-green { color: #16a34a; }
.metric-val.text-yellow { color: #d97706; }
.metric-val.text-orange { color: #ea580c; }
.metric-val.text-purple { color: #7c3aed; }
.metric-val.text-red { color: #dc2626; }

.metric-sub {
  font-size: 9px;
  color: #94a3b8;
}

/* Rejected Orders Drawer */
.broker-rejected-container {
  margin-top: 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 12px;
}

.rejected-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: #991b1b;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #fee2e2;
}

.btn-mini-close {
  background: none;
  border: none;
  font-size: 16px;
  color: #991b1b;
  cursor: pointer;
  line-height: 1;
}

.rejected-orders-list {
  max-height: 160px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rejected-order-item {
  background: #ffffff;
  border: 1px solid #fca5a5;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 11.5px;
}

.rej-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.rej-sym {
  font-weight: 700;
  color: #1e293b;
}

.rej-id {
  font-family: monospace;
  font-size: 11px;
  color: #64748b;
}

.rej-reason {
  color: #dc2626;
  font-size: 11px;
  line-height: 1.4;
}

/* ==========================================================================
   TOAST NOTIFICATIONS
   ========================================================================== */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column-reverse;
  gap: 12px;
  pointer-events: none;
  max-width: 400px;
  width: calc(100% - 48px);
}

.toast-alert {
  pointer-events: auto;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.08);
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid #e2e8f0;
  animation: slideInToast 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

@keyframes slideInToast {
  from {
    transform: translateX(110%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.toast-alert.hiding {
  transform: translateX(110%);
  opacity: 0;
}

.toast-alert.toast-entry {
  border-left: 6px solid #10b981;
}

.toast-alert.toast-exit {
  border-left: 6px solid #ef4444;
}

.toast-alert.toast-info {
  border-left: 6px solid #0284c7;
}

.toast-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.toast-entry .toast-icon {
  background: #dcfce7;
  color: #15803d;
}

.toast-exit .toast-icon {
  background: #fee2e2;
  color: #b91c1c;
}

.toast-info .toast-icon {
  background: #e0f2fe;
  color: #0284c7;
}

.toast-content {
  flex: 1;
  min-width: 0;
}

.toast-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.toast-title {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}

.toast-close {
  background: none;
  border: none;
  font-size: 16px;
  color: #94a3b8;
  cursor: pointer;
  line-height: 1;
}

.toast-close:hover {
  color: #0f172a;
}

.toast-body {
  font-size: 12px;
  color: #334155;
  line-height: 1.4;
  margin-bottom: 4px;
}

.toast-time {
  font-size: 10px;
  color: #94a3b8;
}

/* ==========================================================================
   STRATEGY UX CARD (Tier 1, Tier 2, Tier 3) per SYS_STRATEGY_UX_CARD.md
   ========================================================================== */

.strategy-card-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

/* Tier 1: Top Metrics Bar (48px) per Section 2.1 */
.tier1-metrics-bar {
  height: 48px;
  min-height: 48px;
  padding: 0 18px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.tier1-metrics-bar .metric-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tier1-metrics-bar .margin-box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.8);
  display: inline-block;
  flex-shrink: 0;
}

.status-pulse-dot.paper {
  background: #64748b;
  box-shadow: 0 0 6px rgba(100, 116, 139, 0.6);
}

.metric-label-gray {
  color: #64748b;
  font-size: 12.5px;
}

.metric-val-bold {
  color: #0f172a;
  font-weight: 700;
  font-size: 13.5px;
}

.sentiment-box {
  display: flex;
  align-items: center;
  gap: 12px;
}

.count-bulls {
  color: #059669;
  font-weight: 700;
  font-size: 13px;
}

.count-bears {
  color: #dc2626;
  font-weight: 700;
  font-size: 13px;
}

.sentiment-pill {
  padding: 2px 14px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  text-transform: none;
}

.sentiment-pill.pill-neutral {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}

.sentiment-pill.pill-bullish {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #86efac;
}

.sentiment-pill.pill-bearish {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}

.timer-box {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #475569;
  font-size: 13px;
}

.timer-text-wrap {
  color: #475569;
  font-size: 13px;
}

.timer-time-blue {
  color: #0284c7;
  font-weight: 700;
  margin-left: 4px;
}

.timer-text-wrap.warning .timer-time-blue {
  color: #dc2626;
  animation: pulseWarning 1s infinite alternate;
}

.rank-dash-blue {
  width: 8px;
  height: 4px;
  background: #2563eb;
  border-radius: 1px;
  display: inline-block;
  vertical-align: middle;
}

@keyframes pulseWarning {
  from { opacity: 1; }
  to { opacity: 0.65; }
}

/* Tier 2: Master Card Header (48px Navy #111c30) per Section 2.2 */
.tier2-master-header {
  height: 48px;
  min-height: 48px;
  padding: 0 16px;
  background: #111c30;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.strategy-badge-icon {
  font-size: 16px;
}

.strategy-title-text {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #ffffff;
}

.header-right-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.strategy-ctrl-select {
  height: 32px;
  padding: 0 10px;
  background: #1e293b;
  color: #f8fafc;
  border: 1px solid #334155;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  outline: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.strategy-ctrl-select:hover {
  background: #273549;
  border-color: #475569;
}

.strategy-ctrl-select:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25);
}

.strategy-ctrl-select:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  background: #0f172a;
  border-color: #1e293b;
  color: #94a3b8;
}

.strategy-ctrl-select.timeframe-select {
  width: 68px;
  text-align: center;
}

.strategy-btn-cyan {
  height: 32px;
  padding: 0 12px;
  background: #0284c7;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s ease, transform 0.1s ease;
  user-select: none;
}

.strategy-btn-cyan:hover {
  background: #0369a1;
}

.strategy-btn-cyan:active {
  transform: scale(0.98);
}

.refresh-icon {
  font-size: 14px;
  display: inline-block;
  line-height: 1;
}

.refresh-icon.rotating {
  animation: rotateSpin 0.75s linear infinite;
}

@keyframes rotateSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   Tier 3: Master Strategy Data Table (10 Columns per SYS_STRATEGY_UX_CARD.md)
   ========================================================================== */
.tier3-table-wrapper {
  min-height: 180px;
  background: #ffffff;
  overflow-x: auto;
  width: 100%;
}

.strategy-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  background: #ffffff;
  font-size: 12.5px;
}

.strategy-table thead {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.strategy-table th {
  height: 28px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  border-bottom: 1px solid #cbd5e1;
  border-right: 1px solid #e2e8f0;
  white-space: nowrap;
  user-select: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.strategy-table th:last-child {
  border-right: none;
}

.strategy-table tbody tr {
  height: 44px;
  border-bottom: 1px solid #eef2f6;
  transition: background-color 0.15s ease;
}

.strategy-table tbody tr:not(.wl-contracts-drawer-row):hover {
  background-color: #f8fafc;
}

.strategy-table tbody tr.row-flash-entry {
  background-color: rgba(16, 185, 129, 0.04);
  border-left: 3px solid #10b981;
}

.strategy-table tbody tr.row-flash-exit {
  background-color: rgba(239, 68, 68, 0.04);
  border-left: 3px solid #ef4444;
}

.strategy-table td {
  padding: 8px 10px;
  vertical-align: middle;
  border-bottom: 1px solid #eef2f6;
  border-right: 1px solid #eef2f6;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
}

.strategy-table td:last-child {
  border-right: none;
}

/* Col 1: INSTRUMENT */
.col-instrument, .cell-instrument {
  text-align: left !important;
  min-width: 130px;
  padding-left: 14px !important;
}

.inst-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.inst-tv-link {
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: transform 0.12s ease;
}

.inst-tv-link:hover {
  transform: scale(1.25);
}

.inst-name {
  font-weight: 700;
  font-size: 13px;
  color: #0f172a;
  letter-spacing: -0.2px;
}

.inst-name-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.inst-name-link:hover .inst-name {
  color: #2563eb;
  text-decoration: underline;
}

/* Col 2: LTP (D%) */
.col-ltp, .cell-ltp {
  text-align: right !important;
  min-width: 140px;
  padding-right: 14px !important;
}

.ltp-cell {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
}

.ltp-price {
  font-size: 13px;
  font-weight: 700;
}

.ltp-pct {
  font-size: 13px;
  font-weight: 700;
}

.ltp-price.gain, .ltp-pct.gain {
  color: #059669;
}

.ltp-price.loss, .ltp-pct.loss {
  color: #dc2626;
}

/* Col 3: RANK (Per Screenshot: Colored number + arrow on delta, black + blue dash on same) */
.col-rank, .cell-rank {
  text-align: center !important;
  min-width: 65px;
}

.rank-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-weight: 700;
  font-size: 13px;
}

.rank-wrap.up, .rank-wrap.up .rank-num, .rank-wrap.up .rank-arrow {
  color: #059669 !important;
}

.rank-wrap.down, .rank-wrap.down .rank-num, .rank-wrap.down .rank-arrow {
  color: #dc2626 !important;
}

.rank-wrap.same .rank-num {
  color: #0f172a !important;
}

.rank-wrap.same .rank-arrow {
  color: #2563eb !important;
  font-size: 11px;
}

/* Col 4: MOMENTUM SCORE (Per Screenshot: Horizontal track + score text side-by-side) */
.col-score, .cell-score {
  text-align: center !important;
  min-width: 135px;
}

.score-row-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.score-meter-track {
  width: 64px;
  height: 6px;
  background: #e2e8f0;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}

.score-zero-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #64748b;
  z-index: 2;
}

.score-fill-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  transition: width 0.3s ease, left 0.3s ease;
}

.score-fill-pos {
  background: #059669;
}

.score-fill-neg {
  background: #dc2626;
}

.score-val-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  min-width: 48px;
  justify-content: flex-end;
}

.score-val-pos {
  color: #059669;
}

.score-val-neg {
  color: #dc2626;
}

.score-val-zero {
  color: #64748b;
}

.score-arrow-up {
  color: #059669;
  font-size: 10.5px;
  line-height: 1;
}

.score-arrow-down {
  color: #dc2626;
  font-size: 10.5px;
  line-height: 1;
}

/* Col 5 & 6: TREND & WAROC (Per Screenshot: Rounded rectangular badges with right-aligned dots) */
.col-trend, .cell-trend {
  text-align: center !important;
  min-width: 110px;
}

.col-waroc, .cell-waroc {
  text-align: center !important;
  min-width: 110px;
}

.badge-status-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-sizing: border-box;
  padding: 0;
  background: transparent;
  border: none;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.badge-status-box .badge-status-txt {
  font-weight: 700;
}

.badge-status-box .badge-status-icon {
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.badge-status-green {
  background: transparent;
  border: none;
  color: #166534;
}

.badge-status-red {
  background: transparent;
  border: none;
  color: #991b1b;
}

.badge-status-gray {
  background: transparent;
  border: none;
  color: #475569;
}

/* Col 7: ZONE */
.col-zone, .cell-zone {
  text-align: center !important;
  min-width: 75px;
}

.badge-bb-zone {
  display: inline-block;
  padding: 0;
  background: transparent;
  border: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1.3;
  white-space: nowrap;
}

/* MOD-09: Bollinger Bands Volatility Envelopes per SYS_INDICATOR_ENGINE.md Section 6 */
.bb-zone-upper {
  background: transparent;
  color: #16a34a !important;
  border: none;
}

.bb-zone-lower {
  background: transparent;
  color: #dc2626 !important;
  border: none;
}

.bb-zone-u2,
.bb-zone-u1,
.bb-zone-u0 {
  background: transparent;
  color: #16a34a !important;
  border: none;
}

.bb-zone-l0,
.bb-zone-l1,
.bb-zone-l2 {
  background: transparent;
  color: #dc2626 !important;
  border: none;
}

.bb-zone-neutral {
  background: transparent;
  color: #64748b !important;
  border: none;
}

/* Col 8 & 9: Resistance & Support */
.col-res, .cell-res {
  text-align: right !important;
  min-width: 130px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.cell-res:hover, .cell-sup:hover {
  background: rgba(2, 132, 199, 0.08);
}

.col-sup, .cell-sup {
  text-align: right !important;
  min-width: 130px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.pivot-cell-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  cursor: pointer;
  user-select: none;
  padding: 2px 5px;
  border-radius: 4px;
  transition: background 0.15s ease;
}

.pivot-cell-wrap:hover {
  background: #f1f5f9;
}

.pivot-val-res {
  color: #ea580c;
  font-weight: 700;
  font-size: 13px;
}

.pivot-val-sup {
  color: #2563eb;
  font-weight: 700;
  font-size: 13px;
}

.pivot-edit-form {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pivot-input {
  width: 74px;
  height: 26px;
  font-size: 13px;
  font-weight: 700;
  padding: 1px 6px;
  border: 2px solid #0284c7;
  border-radius: 4px;
  text-align: right;
  outline: none;
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 0 0 1px rgba(2, 132, 199, 0.2);
  -moz-appearance: textfield;
}

/* Suppress native number stepper up/down arrows per user requirement */
.pivot-input::-webkit-outer-spin-button,
.pivot-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.btn-pivot-save {
  width: 24px;
  height: 26px;
  background: #10b981;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  transition: filter 0.15s ease;
}

.btn-pivot-save:hover {
  filter: brightness(1.1);
}

.btn-pivot-cancel {
  width: 24px;
  height: 26px;
  background: #64748b;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  transition: filter 0.15s ease;
}

.btn-pivot-cancel:hover {
  filter: brightness(1.1);
}

/* Col 10: ACTION */
.col-action, .cell-action {
  text-align: center !important;
  min-width: 85px;
}

.btn-action-col {
  height: 25px;
  min-width: 74px;
  padding: 0 10px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  transition: transform 0.1s ease, filter 0.15s ease;
  user-select: none;
}

.btn-action-col:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.btn-action-col:active {
  transform: translateY(0);
}

.btn-act-trade,
.btn-act-entry {
  background-color: #10b981 !important;
  color: #ffffff !important;
}

.btn-act-exit {
  background-color: #ef4444 !important;
  color: #ffffff !important;
}

.btn-act-hold-bull {
  background-color: #10b981 !important;
}

.btn-act-hold-bear {
  background-color: #ef4444 !important;
}

.btn-act-notrade {
  background-color: #3b82f6 !important;
}

.btn-act-rollover {
  background-color: #8b5cf6 !important;
  color: #ffffff !important;
}

.btn-act-cancel,
.btn-act-pending {
  background-color: #f59e0b !important;
  color: #ffffff !important;
  animation: pulse-amber-glow 2s infinite ease-in-out;
}

.btn-act-partial {
  background-color: #eab308 !important;
  color: #0f172a !important;
  font-weight: 700 !important;
}

.btn-wl-alerts-pill {
  height: 25px;
  min-width: 68px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #cbd5e1;
  background-color: #f8fafc;
  color: #334155;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.15s ease;
  user-select: none;
}

.btn-wl-alerts-pill:hover {
  background-color: #f1f5f9;
  border-color: #94a3b8;
  color: #0284c7;
  transform: translateY(-1px);
}

.btn-wl-alerts-pill:active {
  transform: translateY(0);
}

@keyframes pulse-amber-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
  }
}

/* ==========================================================================
   UNIVERSAL STRATEGY & WATCHLIST MANAGEMENT MODAL (SYS_SYMBOL_MANAGEMENT.md)
   ========================================================================== */

.modal-symbol-dialog {
  max-width: 680px;
  width: 95%;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 90vh;
}

.modal-body-scrollable {
  padding: 16px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.symbol-mgr-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mgr-section-label {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.mgr-input-group {
  display: flex;
  gap: 8px;
}

.mgr-text-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  background: #f8fafc;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.mgr-text-input:focus {
  border-color: #2563eb;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.mgr-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.mgr-search-wrap .mgr-text-input {
  padding-left: 34px;
}

.mgr-search-icon {
  position: absolute;
  left: 10px;
  font-size: 14px;
  color: #94a3b8;
  pointer-events: none;
}

.btn-mgr-action {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.btn-mgr-blue {
  background: #2563eb;
  color: #ffffff;
}

.btn-mgr-blue:hover {
  background: #1d4ed8;
}

.btn-mgr-emerald {
  background: #059669;
  color: #ffffff;
}

.btn-mgr-emerald:hover {
  background: #047857;
}

.btn-mgr-remove {
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fecaca;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-mgr-remove:hover {
  background: #dc2626;
  color: #ffffff;
}

/* Validation Preview Pill */
.symbol-preview-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 6px;
  padding: 10px 14px;
  gap: 12px;
  margin-top: 4px;
}

.preview-col-main {
  display: flex;
  align-items: center;
  gap: 8px;
}

.preview-sym-name {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

.preview-badge-segment {
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #bae6fd;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}

.preview-badge-cycle {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}

.preview-col-specs {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: #475569;
}

.preview-col-specs strong {
  color: #0f172a;
}

/* Dynamic Contract Variant Selector Pills */
.preview-variants-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.preview-variant-btn {
  background: #ffffff;
  color: #334155;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.2;
}

.preview-variant-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}

.preview-variant-btn.active {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
  box-shadow: 0 1px 2px rgba(2, 132, 199, 0.2);
}

/* Symbol Universe Table */
.symbol-mgr-table-wrap {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  overflow: hidden;
  max-height: 280px;
  overflow-y: auto;
}

.symbol-mgr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.symbol-mgr-table th {
  background: #f8fafc;
  padding: 8px 12px;
  font-weight: 700;
  font-size: 12px;
  color: #64748b;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}

.symbol-mgr-table td {
  padding: 8px 12px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  font-weight: 700;
  color: #0f172a;
}

.symbol-mgr-table tr:hover {
  background: #f8fafc;
}

.badge-cycle {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.badge-cycle-m1 {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

.badge-cycle-front {
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #bae6fd;
}

.badge-cycle-cash {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
}

/* Deletion Guard Alert Banner */
.symbol-mgr-alert {
  background: #fee2e2;
  border-left: 4px solid #ef4444;
  color: #991b1b;
  padding: 10px 16px;
  font-size: 12.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ==========================================================================
   UNIVERSAL ORDER COCKPIT MODAL (SYS_ENTRY_EXIT_ORDER_WINDOW.md)
   ========================================================================== */

.modal-cockpit-dialog {
  max-width: 640px;
  width: 95%;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 25px 30px -5px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 92vh;
}

.cockpit-badge-prd {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}

.cockpit-badge-broker {
  background: #dcfce7;
  color: #15803d;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid #bbf7d0;
}

/* Section 2: Margin Ribbon */
.cockpit-margin-ribbon {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #475569;
  font-weight: 600;
}

.margin-ribbon-col strong {
  color: #0f172a;
}

.margin-ribbon-divider {
  color: #cbd5e1;
}

.cockpit-pill-status {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}

.cockpit-pill-status.pill-avail {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.cockpit-pill-status.pill-short {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* Section 3: Parameters Grid */
.cockpit-grid-params {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.cockpit-field-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cockpit-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
}

.cockpit-select, .cockpit-input-readonly, .cockpit-input-price {
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  outline: none;
  background: #f8fafc;
  color: #0f172a;
}

.cockpit-input-readonly {
  background: #f1f5f9;
  color: #475569;
}

.cockpit-input-price:focus {
  border-color: #2563eb;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.cockpit-spinner-wrap {
  display: flex;
  align-items: center;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  overflow: hidden;
  background: #ffffff;
}

.btn-spinner {
  width: 28px;
  height: 31px;
  border: none;
  background: #f1f5f9;
  font-size: 14px;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  transition: background 0.1s ease;
}

.btn-spinner:hover {
  background: #e2e8f0;
}

.cockpit-input-num {
  flex: 1;
  border: none;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  outline: none;
  width: 100%;
}

/* Metrics Row */
.cockpit-metrics-row {
  display: flex;
  justify-content: space-between;
  background: #f1f5f9;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 14px;
}

.cockpit-metrics-row strong {
  color: #0f172a;
}

/* Market Depth Tables */
.cockpit-depth-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.depth-header-title {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.depth-tables-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.depth-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
}

.depth-table th {
  background: #f8fafc;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  border-bottom: 1px solid #e2e8f0;
}

.depth-table td {
  padding: 4px 8px;
  border-bottom: 1px solid #f1f5f9;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.1s ease;
}

.bid-table td {
  color: #059669;
}

.bid-table tr:hover td {
  background: #f0fdf4;
}

.ask-table td {
  color: #dc2626;
}

.ask-table tr:hover td {
  background: #fef2f2;
}

/* STATE B: Live P&L Hero Card */
.cockpit-pnl-card {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cockpit-pnl-card.loss {
  background: #fee2e2;
  border-color: #fecaca;
}

.pnl-title-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.4px;
}

.pnl-val-hero {
  font-size: 24px;
  font-weight: 800;
  color: #059669;
}

.cockpit-pnl-card.loss .pnl-val-hero {
  color: #dc2626;
}

.pnl-meta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  color: #64748b;
}

.pnl-meta-row strong {
  color: #0f172a;
}

.cockpit-pos-details-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.pos-detail-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
}

.pos-detail-row strong {
  color: #0f172a;
}

/* ==========================================================================
   TRADELOG CARD & THREE-TIER EXECUTION LEDGER (SYS_TRADELOG.md)
   ========================================================================== */

/* Top Summary Bar */
.tradelog-summary-bar {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.tl-sum-left {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
}

.tl-sum-center {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
}

.tl-sum-right {
  display: flex;
  gap: 20px;
  font-size: 13px;
  font-weight: 700;
}

.tl-kpi-bold {
  font-weight: 800;
}

.text-green {
  color: #059669 !important;
}

.text-red {
  color: #dc2626 !important;
}

/* Tradelog Container Card */
.tradelog-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  margin-bottom: 24px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.tradelog-header {
  background: #111c30;
  padding: 12px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tl-header-title {
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.tl-header-actions {
  display: flex;
  gap: 8px;
}

.btn-tl-collapse {
  background: #1e293b;
  color: #ffffff;
  border: 1px solid #334155;
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-tl-collapse:hover {
  background: #334155;
}

.btn-tl-download {
  background: #0284c7;
  color: #ffffff;
  border: none;
  padding: 6px 16px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-tl-download:hover {
  background: #0369a1;
}

/* 7-Dropdown Filter Ribbon */
.tradelog-filter-ribbon {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  padding: 8px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  font-size: 12px;
}

.tl-filter-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tl-filter-label {
  font-weight: 600;
  color: #64748b;
  font-size: 11.5px;
}

.tl-filter-select {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: #1e293b;
  outline: none;
  cursor: pointer;
}

.tl-filter-select:hover {
  border-color: #94a3b8;
}

/* Tradelog Table & Strict Column Layout */
.tradelog-table-container {
  overflow-x: auto;
  width: 100%;
}

.tradelog-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.tradelog-table th {
  background: #f8fafc;
  color: #475569;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 12px;
  border-bottom: 1px solid #e2e8f0;
}

/* Master Trade Rows */
.tl-row-master {
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  cursor: pointer;
  transition: background 0.15s ease;
  font-size: 13px;
  font-weight: 700;
}

.tl-row-master:hover {
  background: #f8fafc;
}

.tl-row-master.expanded {
  background: #f1f5f9;
  border-bottom: 1px solid #cbd5e1;
}

.tl-row-master td {
  padding: 11px 12px;
  color: #0f172a;
}

.caret-icon {
  display: inline-block;
  font-size: 10px;
  color: #64748b;
  transition: transform 0.15s ease;
}

/* Status Pill Badges */
.pill-open {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11.5px;
  font-weight: 700;
  display: inline-block;
}

.pill-close {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11.5px;
  font-weight: 700;
  display: inline-block;
}

/* Child Drawer Rows */
.tl-drawer-container {
  background: #ffffff;
  border-bottom: 1px solid #cbd5e1;
  padding: 10px 16px 14px 28px;
}

.tl-child-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  font-size: 12.5px;
  padding: 7px 10px;
  align-items: center;
  border-bottom: 1px dashed #f1f5f9;
}

.tl-grid-lbl {
  color: #64748b;
  font-weight: 600;
  margin-right: 4px;
}

.tl-grid-val {
  color: #0f172a;
  font-weight: 700;
}

/* Comment Rows (Soft Pastel Light Yellow per SYS_TRADELOG.md Section 7.6) */
.tl-comment-row {
  background: #fefce8;
  border: 1px solid #fef08a;
  border-radius: 4px;
  padding: 8px 12px;
  margin: 6px 0;
  font-size: 12.5px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.tl-comment-tag {
  color: #854d0e;
  font-weight: 800;
  white-space: nowrap;
}

.tl-comment-text {
  color: #1e293b;
  font-weight: 700;
  line-height: 1.4;
}

/* Edit Action Buttons */
.btn-edit-entry {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #93c5fd;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  margin-left: 6px;
  transition: all 0.15s ease;
}

.btn-edit-entry:hover {
  background: #dbeafe;
}

.btn-edit-exit {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  margin-left: 6px;
  transition: all 0.15s ease;
}

.btn-edit-exit:hover {
  background: #ffedd5;
}

/* Modal Tab Styling */
.tl-modal-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
}

.tl-modal-tab.active {
  color: #0284c7;
  border-bottom-color: #0284c7;
}

.tl-modal-input {
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 7px 10px;
  font-size: 12.5px;
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
}

.tl-modal-input:focus {
  border-color: #0284c7;
}

/* ==========================================================================
   MODERN DASHBOARD UI (2-COLUMN GRID MATCHING REFERENCE UI)
   ========================================================================== */

.dashboard-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 16px;
  padding: 16px 20px;
  max-width: 1680px;
  margin: 0 auto;
  box-sizing: border-box;
  align-items: start;
}

@media (max-width: 1280px) {
  .dashboard-main-grid {
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 14px;
    padding: 14px 16px;
  }
}

@media (max-width: 980px) {
  .dashboard-main-grid {
    grid-template-columns: 1fr;
  }
}

.dash-col-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.dash-col-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* Modern Elevated Cards */
.dash-card {
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.dash-card:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.dash-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: #ffffff;
  border-bottom: 1px solid #f1f5f9;
  min-height: 50px;
  box-sizing: border-box;
  gap: 12px;
}

.card-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-icon-badge {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #e0f2fe;
  color: #0284c7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.card-title-text {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  letter-spacing: -0.2px;
}

.btn-card-expand {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  transition: color 0.15s, background 0.15s;
}

.btn-card-expand:hover {
  background: #f1f5f9;
  color: #334155;
}

/* Card Body Empty States */
.dash-card-body {
  padding: 16px 20px;
  box-sizing: border-box;
}

.card-empty-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 34px 16px;
  min-height: 120px;
}

.empty-icon-card {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1.5px solid #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
}

.empty-icon-card-bare {
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-state-text {
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
  margin-top: 8px;
}

/* Strategy Card header controls on light background */
.dash-card .header-right-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dash-card .strategy-ctrl-select {
  height: 30px;
  padding: 0 8px;
  background: #f8fafc;
  color: #0f172a;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  outline: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.dash-card .strategy-ctrl-select:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

.dash-card .strategy-btn-cyan {
  height: 30px;
  padding: 0 12px;
  background: #0284c7;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
}

.dash-card .strategy-btn-cyan:hover {
  background: #0369a1;
}

/* Brand icon box */
.brand-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   STRATEGY CARD: 3PX DARK NAVY/BLACK CURVED TOP BORDER
   ========================================================================== */

.card-strategy-curved,
#card-mcx-futures {
  border-top: 3px solid #0f172a !important; /* ~3px thick dark navy/black */
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden;
}

.strategy-header-modern {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  min-height: 48px;
  gap: 16px;
}

.strategy-header-modern .card-header-left {
  display: flex;
  align-items: center;
  min-width: 180px;
}

.strategy-header-modern .card-header-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.strategy-header-modern .header-right-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.timer-display-text {
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.timer-time-blue {
  color: #2563eb;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

/* Col 10: STATUS / ACTION Column */
.col-status, .cell-status {
  text-align: center !important;
  min-width: 85px;
}

/* Settings Modal & S/R Configuration */
.settings-macro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  background: #f8fafc;
  padding: 12px 14px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

.mgr-pivot-input {
  width: 84px;
  padding: 4px 6px;
  border: 1.5px solid #cbd5e1;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  text-align: right;
  outline: none;
  background: #ffffff;
  transition: border-color 0.15s ease;
}

.mgr-pivot-input:focus {
  border-color: #0284c7;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15);
}

/* Edit Pen & Timeframe Mode Pills */
.mgr-edit-pen {
  cursor: pointer;
  color: #0284c7;
  font-size: 13px;
  transition: transform 0.15s ease;
  user-select: none;
}

.mgr-edit-pen:hover {
  transform: scale(1.2);
  color: #0369a1;
}

.tf-mode-toggle {
  display: inline-flex;
  background: #e2e8f0;
  border-radius: 4px;
  padding: 1px;
}

.tf-pill-btn {
  background: transparent;
  border: none;
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  padding: 2px 8px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tf-pill-btn.active {
  background: #0284c7;
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.custom-slot-box {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 4px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.slot-item {
  font-size: 11px;
  color: #334155;
  display: flex;
  justify-content: space-between;
}

.slot-item strong {
  color: #0284c7;
}

/* ==========================================================================
   MOD-05: TRADE WATCHLIST COMPONENT (Light Theme Executive Style)
   ========================================================================== */
.watchlist-container {
  padding: 16px 20px;
  max-width: 100%;
}

.watchlist-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.01);
  overflow: hidden;
}

.watchlist-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #ffffff;
  border-bottom: 1px solid #f1f5f9;
}

.watchlist-title {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  letter-spacing: -0.01em;
}

.watchlist-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.watchlist-strategy-filter {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  color: #334155;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
  outline: none;
  transition: all 0.15s ease;
  line-height: 1.4;
}

.watchlist-strategy-filter:hover {
  border-color: #94a3b8;
  color: #0f172a;
}

.watchlist-strategy-filter:focus {
  border-color: #0284c7;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15);
}

.watchlist-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.watchlist-btn-action {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.4;
}

.watchlist-btn-action:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
}

.watchlist-btn-action:active {
  background: #f1f5f9;
}

.watchlist-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.watchlist-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  text-align: left;
}

.watchlist-table thead tr {
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
}

.watchlist-table th {
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 500;
  color: #334155;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.watchlist-table td {
  padding: 10px 14px;
  font-size: 12px;
  color: #1e293b;
  border-bottom: 1px solid #f1f5f9;
  white-space: nowrap;
}

.watchlist-table tbody tr {
  transition: background 0.12s ease;
}

.watchlist-table tbody tr:not(.wl-contracts-drawer-row):not(.wl-cs-drawer-row):hover,
.watchlist-table tbody tr:not(.wl-contracts-drawer-row):not(.wl-cs-drawer-row):hover > td {
  background: #fef9c3 !important;
}

/* Alignments & Balanced Table Column Widths */
.wl-col-strategy,
.wl-col-script {
  text-align: left;
}

.watchlist-table th.wl-col-script,
.watchlist-table td.wl-col-script {
  width: 18%;
  min-width: 160px;
}

.wl-col-time {
  text-align: left;
}

.watchlist-table th.wl-col-time,
.watchlist-table td.wl-col-time {
  width: 9%;
  min-width: 85px;
  white-space: nowrap;
}

.wl-col-price,
.wl-col-score {
  text-align: right;
}

.watchlist-table th.wl-col-price,
.watchlist-table td.wl-col-price {
  width: 13%;
  min-width: 120px;
  white-space: nowrap;
}

.watchlist-table th.wl-col-score,
.watchlist-table td.wl-col-score {
  width: 7%;
  min-width: 65px;
  white-space: nowrap;
}

.watchlist-table th.sortable-th {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: color 0.15s ease, background 0.15s ease;
}

.watchlist-table th.sortable-th:hover {
  color: #0284c7;
  background-color: #f1f5f9;
}

.watchlist-table th.sortable-th .sort-indicator {
  font-size: 10px;
  margin-left: 3px;
  display: inline-block;
  opacity: 0.9;
}


.wl-col-support,
.wl-col-resistance {
  text-align: right;
  cursor: pointer;
  padding: 4px 8px;
  font-variant-numeric: tabular-nums;
  transition: background 0.15s ease;
  min-width: 85px;
  user-select: none;
  -webkit-user-select: none;
}

.watchlist-table th.wl-col-support,
.watchlist-table td.wl-col-support,
.watchlist-table th.wl-col-resistance,
.watchlist-table td.wl-col-resistance {
  width: 8%;
  white-space: nowrap;
  min-width: 85px;
}

.wl-col-support:hover,
.wl-col-resistance:hover {
  background: #fef08a !important;
}

.wl-pivot-box {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}

.wl-pivot-val {
  font-weight: 700;
  font-size: 13px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Support = Green, Resistance = Red */
.wl-pivot-val-sup {
  color: #16a34a !important; /* Green */
}

.wl-pivot-val-res {
  color: #dc2626 !important; /* Red */
}

.wl-col-trend,
.wl-col-strength,
.wl-col-zone,
.wl-col-action,
.wl-col-alerts,
.wl-col-logs {
  text-align: center;
}

.watchlist-table th.wl-col-trend,
.watchlist-table td.wl-col-trend {
  width: 9%;
  min-width: 85px;
  white-space: nowrap;
}

.watchlist-table th.wl-col-strength,
.watchlist-table td.wl-col-strength {
  width: 9%;
  min-width: 85px;
  white-space: nowrap;
}

.watchlist-table th.wl-col-zone,
.watchlist-table td.wl-col-zone {
  width: 7%;
  min-width: 75px;
  white-space: nowrap;
}

.watchlist-table th.wl-col-action,
.watchlist-table td.wl-col-action {
  width: 7%;
  min-width: 70px;
  white-space: nowrap;
}

.watchlist-table th.wl-col-alerts,
.watchlist-table td.wl-col-alerts {
  width: 7%;
  min-width: 75px;
  white-space: nowrap;
}

.watchlist-table th.wl-col-logs,
.watchlist-table td.wl-col-logs {
  width: 7%;
  min-width: 70px;
  white-space: nowrap;
}

/* Empty State / Placeholder Rows */
.watchlist-empty-row {
  height: 38px;
  background: #ffffff;
}

.watchlist-empty-cell {
  border-bottom: 1px solid #f1f5f9;
  padding: 0;
}

/* MOD-06: Script Cell Layout with TradingView Icon & Delete Button */
.wl-script-cell-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.wl-tv-chart-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
  line-height: 1;
}

.wl-tv-chart-icon:hover {
  transform: scale(1.15);
  opacity: 0.85;
}

.wl-script-name {
  font-weight: 600;
  color: #0f172a;
  font-size: 12.5px;
}

.wl-btn-delete-symbol {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 12px;
  padding: 0 2px;
  line-height: 1;
  color: #ef4444;
  opacity: 0.65;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.wl-btn-delete-symbol:hover {
  opacity: 1;
  transform: scale(1.15);
}

/* MOD-07: Watchlist Price & Day Change Feed Cell Layout */
.wl-price-cell-wrap {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 6px;
  width: 100%;
}

.wl-price-val {
  font-weight: 700;
  color: #0f172a;
  font-size: 13px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
}

.wl-price-pct {
  font-weight: 600;
  font-size: 11.5px;
  min-width: 58px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.1px;
}

.wl-price-pos {
  color: #059669;
}

.wl-price-neg {
  color: #dc2626;
}

.wl-price-zero {
  color: #64748b;
}

/* MOD-08: Score & Trend Watchlist Columns Styling */
.wl-score-val {
  font-weight: 700;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
}

.wl-score-pos {
  color: #059669;
}

.wl-score-neg {
  color: #dc2626;
}

.wl-score-zero {
  color: #64748b;
}

/* Trend Card Visual Values (clean text without color boxes) */
.wl-trend-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  background: transparent;
  border: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  letter-spacing: -0.1px;
}

.wl-trend-pill-bullish {
  background: transparent;
  border: none;
  color: #16a34a !important;
}

.wl-trend-pill-bearish {
  background: transparent;
  border: none;
  color: #dc2626 !important;
}

.wl-trend-pill-weak {
  background: transparent;
  border: none;
  color: #d97706;
}

.wl-trend-pill-neutral {
  background: transparent;
  border: none;
  color: #64748b;
}

/* ==========================================================================
   MOD-05 & MOD-10: 13th Column Logs & TradeLog / P&L Executive Modal Styles
   ========================================================================== */
.btn-wl-logs-pill {
  height: 25px;
  min-width: 68px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #cbd5e1;
  background-color: #f8fafc;
  color: #334155;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.15s ease;
}

.btn-wl-logs-pill:hover {
  background-color: #f1f5f9;
  border-color: #0284c7;
  color: #0284c7;
  transform: translateY(-1px);
}

.btn-wl-logs-pill:active {
  transform: translateY(0);
}

/* Executive Modal Panels & Table Containers */
.tradelog-tab-panel {
  background: #ffffff;
}

.tradelog-table-wrapper,
.pnl-table-wrapper {
  background: #ffffff;
}

.tradelog-table,
.pnl-table {
  background: #ffffff;
}

.tradelog-table tbody tr,
.pnl-table tbody tr {
  background: #ffffff;
}

/* Modal Tabs */
.tradelog-tab-bar {
  display: flex;
  gap: 4px;
  padding: 10px 20px 0 20px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.tradelog-tab-btn {
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  cursor: pointer;
  transition: all 0.15s ease;
  border-radius: 6px 6px 0 0;
}

.tradelog-tab-btn:hover {
  color: #0284c7;
  background: #f1f5f9;
}

.tradelog-tab-btn.active {
  color: #0284c7;
  background: #ffffff;
  border-color: #e2e8f0;
  border-bottom: 2px solid #0284c7;
  font-weight: 700;
}

/* P&L KPI Cards */
.pnl-summary-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.pnl-kpi-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 10px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.pnl-kpi-label {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pnl-kpi-val {
  font-size: 15px;
  font-weight: 800;
  color: #1e293b;
  margin-top: 3px;
}

/* Expandable Snapshot Accordion Subrow */
.tradelog-row-clickable {
  cursor: pointer;
}

.tradelog-row-clickable:hover {
  background: #f0f9ff !important;
}

.tradelog-subrow {
  background: #fafafa;
}

.snapshot-accordion-box {
  padding: 12px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  margin: 6px 10px;
}

.snapshot-accordion-title {
  font-size: 11px;
  font-weight: 700;
  color: #0284c7;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.snapshot-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.snapshot-grid-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 6px 8px;
}

.snapshot-grid-item-label {
  font-size: 9px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.snapshot-grid-item-val {
  font-size: 11px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   STRATEGY TABS BAR & NAVIGATION (MCX Mini & Multi-Strategy Tabs)
   ========================================================================== */
.strategy-tabs-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  margin-bottom: 12px;
  border-bottom: 1px solid #E2E8F0;
  padding: 0 2px;
  background: transparent;
  flex-wrap: wrap;
}

.strategy-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #64748B;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  position: relative;
  top: 1px;
}

.strategy-tab-btn:hover {
  color: #0284C7;
  background: #F1F5F9;
}

.strategy-tab-btn.active {
  color: #0284C7;
  background: #FFFFFF;
  border-color: #CBD5E1;
  border-top: 2.5px solid #0284C7;
  border-bottom: 1px solid #FFFFFF;
  font-weight: 700;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.03);
}

.strategy-tab-btn .tab-badge-count {
  font-size: 10px;
  font-weight: 700;
  background: #E0F2FE;
  color: #0284C7;
  padding: 1px 6px;
  border-radius: 10px;
}

.strategy-tab-btn.active .tab-badge-count {
  background: #0284C7;
  color: #FFFFFF;
}

.strategy-tab-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: #64748B;
  background: #FFFFFF;
  border: 1px dashed #CBD5E1;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 6px;
  margin-bottom: 2px;
  transition: all 0.15s ease;
}

.strategy-tab-add-btn:hover {
  color: #0284C7;
  border-color: #0284C7;
  background: #F0F9FF;
}

/* ==========================================================================
   MULTI-STRATEGY CARDS & METADATA BADGES
   ========================================================================== */
.strategy-cards-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.strategy-meta-badges {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.strat-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.strat-badge-mode-broker {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}

.strat-badge-mode-paper {
  background: #f8fafc;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

.strat-badge-tf {
  background: #eff6ff;
  color: #0284c7;
  border: 1px solid #bae6fd;
}

.strat-badge-seg {
  background: #f5f3ff;
  color: #7c3aed;
  border: 1px solid #ddd6fe;
}

.strat-badge-opt {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}

.strat-badge-rollover {
  background: #faf5ff;
  color: #9333ea;
  border: 1px solid #e9d5ff;
}

.strat-quick-edit-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  padding: 2px 4px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  transition: all 0.15s ease;
}

.strat-quick-edit-btn:hover {
  color: #0284c7;
  background: #f1f5f9;
}

#modal-strategy-manager {
  z-index: 1000;
}

#modal-strategy-form {
  z-index: 1050;
}

/* ==========================================================================
   SPREAD ORDER WINDOW STYLES (User Mockup Spec)
   ========================================================================== */
#modal-spread-order {
  z-index: 1100;
}

.spread-modal-card {
  max-width: 740px !important;
  width: 96% !important;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 20px 30px -5px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid #cbd5e1;
}

.spread-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 18px;
  background: #eef5f8;
  border-bottom: 1px solid #dbe6ec;
}

.spread-hdr-left {
  display: flex;
  align-items: center;
}

.spread-script-title {
  font-weight: 800;
  font-size: 16px;
  color: #1e293b;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.spread-hdr-mid {
  text-align: center;
}

.spread-title-text {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #166534;
  letter-spacing: 0.3px;
}

.spread-hdr-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.spread-atm-pill {
  font-size: 12px;
  font-weight: 700;
  color: #0284c7;
  background: #f0f9ff;
  border: 1.5px solid #38bdf8;
  padding: 4px 12px;
  border-radius: 14px;
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: 0.3px;
}

.spread-btn-close {
  background: transparent;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
  padding: 0 4px;
}

.spread-btn-close:hover {
  color: #0f172a;
}

.spread-modal-body {
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 85vh;
  overflow-y: auto;
}

/* Margin Section */
.spread-margin-wrapper {
  background: #ffffff;
}

.spread-margin-heading {
  font-size: 11.5px;
  font-weight: 800;
  color: #334155;
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}

.spread-margin-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.spread-margin-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 8px 10px;
  text-align: center;
}

.margin-box-lbl {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 2px;
  text-transform: uppercase;
}

.margin-box-val {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
}

/* Leg Containers */
.spread-leg-block {
  border-radius: 6px;
  padding: 10px 12px;
}

.sell-leg-container {
  background: #fffafa;
  border: 1px solid #fecaca;
}

.sell-leg-header {
  font-size: 11.5px;
  font-weight: 800;
  color: #991b1b;
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}

.buy-leg-container {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}

.buy-leg-header {
  font-size: 11.5px;
  font-weight: 800;
  color: #166534;
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}

.spread-table-wrap {
  overflow-x: hidden;
  width: 100%;
}

.spread-leg-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 12px;
}

.spread-leg-table th {
  font-size: 10.5px;
  font-weight: 700;
  color: #475569;
  padding: 4px 6px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.spread-leg-table td {
  padding: 6px 4px;
  vertical-align: middle;
}

.spread-opt-select {
  width: 100%;
  padding: 4px 6px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: #0f172a;
  background: #ffffff;
  box-sizing: border-box;
}

.spread-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: #ffffff;
  overflow: hidden;
}

.btn-spread-step {
  width: 24px;
  height: 26px;
  border: none;
  background: #f1f5f9;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.btn-spread-step:hover {
  background: #e2e8f0;
}

.spread-input-num {
  flex: 1;
  min-width: 38px;
  height: 26px;
  border: none;
  text-align: center;
  font-size: 11.5px;
  font-weight: 700;
  color: #0f172a;
  outline: none;
  background: transparent;
  -moz-appearance: textfield;
}

.spread-input-num::-webkit-inner-spin-button,
.spread-input-num::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.spread-input-limit {
  width: 100%;
  height: 26px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  padding: 0 6px;
  box-sizing: border-box;
  background: #ffffff;
}

.spread-val-display {
  font-size: 12px;
  font-weight: 800;
  color: #0f172a;
  display: block;
  text-align: right;
  padding-right: 2px;
}

/* Payoff Ribbon */
.spread-payoff-ribbon {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  padding: 9px 14px;
  background: #ffffff;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
}

.payoff-metric {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.payoff-lbl {
  font-size: 12px;
  font-weight: 800;
  color: #334155;
}

.payoff-val {
  font-size: 15px;
  font-weight: 800;
}

.payoff-divider {
  color: #cbd5e1;
  font-weight: 600;
}

.spread-action-msg {
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  padding: 4px;
  border-radius: 4px;
}

/* Footer Buttons */
.spread-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  gap: 10px;
}

.btn-spread-exit {
  padding: 7px 22px;
  font-size: 12.5px;
  font-weight: 700;
  color: #b91c1c;
  background: #ffffff;
  border: 1.5px solid #ef4444;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-spread-exit:hover {
  background: #fee2e2;
}

.btn-spread-refresh {
  padding: 7px 18px;
  font-size: 12.5px;
  font-weight: 700;
  color: #0284c7;
  background: #ffffff;
  border: 1.5px solid #0ea5e9;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.btn-spread-refresh:hover {
  background: #f0f9ff;
}

.btn-spread-trade {
  flex: 1;
  max-width: 180px;
  padding: 8px 24px;
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
  background: #16a34a;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  letter-spacing: 0.5px;
  transition: background 0.15s ease;
}

.btn-spread-trade:hover {
  background: #15803d;
}

.btn-spread-trade:disabled {
  background: #94a3b8;
  cursor: not-allowed;
}




/* ==========================================================================
   UNIVERSAL SINGLE-ORDER WINDOW STYLING (MCX, Cash, Futures, Options)
   ========================================================================== */
.single-order-modal-card {
  max-width: 780px !important;
  width: 96% !important;
  background: #ffffff !important;
  border-radius: 10px !important;
  box-shadow: 0 25px 35px -5px rgba(0, 0, 0, 0.25) !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid #cbd5e1;
}

.single-order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.so-hdr-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.so-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.so-script-title {
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.2px;
}

.so-exchange-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  background: #e2e8f0;
  color: #334155;
}

.so-ltp-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.so-ltp-lbl {
  color: #64748b;
  font-weight: 600;
}

.so-ltp-val {
  font-size: 15px;
  font-weight: 800;
  color: #16a34a;
}

.so-ltp-chg {
  font-size: 12px;
  font-weight: 700;
  color: #16a34a;
}

.so-hdr-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.so-action-toggle {
  display: inline-flex;
  background: #e2e8f0;
  border-radius: 9999px;
  padding: 3px;
  user-select: none;
  border: 1px solid #cbd5e1;
}

.so-toggle-btn {
  padding: 6px 20px;
  font-size: 13px;
  font-weight: 800;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  background: transparent;
  color: #64748b;
}

.so-toggle-btn.active-buy {
  background: #16a34a;
  color: #ffffff;
  box-shadow: 0 2px 5px rgba(22, 163, 74, 0.35);
}

.so-toggle-btn.active-sell {
  background: #dc2626;
  color: #ffffff;
  box-shadow: 0 2px 5px rgba(220, 38, 38, 0.35);
}

.so-btn-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #94a3b8;
  cursor: pointer;
  line-height: 1;
}
.so-btn-close:hover {
  color: #0f172a;
}

.single-order-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 80vh;
  overflow-y: auto;
}

/* Open Position Banner */
.so-open-pos-banner {
  background: #fef3c7;
  border: 1px solid #fde047;
  border-radius: 8px;
  padding: 10px 14px;
}

.so-pos-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.so-pos-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  color: #92400e;
}

.so-pos-badge {
  padding: 2px 8px;
  border-radius: 4px;
  background: #fef08a;
  color: #854d0e;
  font-size: 11px;
  font-weight: 800;
}

.so-pos-pnl {
  font-size: 12.5px;
  font-weight: 800;
  color: #15803d;
}

.so-pos-desc {
  font-size: 11.5px;
  color: #a16207;
  margin-top: 4px;
}

/* 3-Depth Table */
.so-depth-container {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
}

.so-depth-header {
  background: #f1f5f9;
  padding: 7px 12px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.so-depth-title {
  font-size: 11.5px;
  font-weight: 800;
  color: #334155;
  letter-spacing: 0.4px;
}

.so-depth-sub {
  font-size: 11px;
  color: #64748b;
}

.so-depth-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.so-depth-th-top th {
  padding: 5px;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.th-bid-group {
  background: rgba(22, 163, 74, 0.08);
  color: #15803d;
  border-right: 1px solid #e2e8f0;
}

.th-ask-group {
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
}

.so-depth-th-sub th {
  padding: 5px 8px;
  font-size: 10.5px;
  color: #64748b;
  border-bottom: 1px solid #e2e8f0;
}

.so-depth-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #f1f5f9;
}

.so-depth-table tr.depth-row:hover {
  background: #f1f5f9;
  cursor: pointer;
}

.so-depth-table .border-r {
  border-right: 1px solid #e2e8f0;
}

.so-depth-tfoot td {
  padding: 6px 8px;
  background: #f8fafc;
  font-size: 11px;
  font-weight: 700;
  border-top: 1px solid #e2e8f0;
  color: #475569;
}

/* Dynamic Order Box */
.so-order-box {
  border-radius: 8px;
  padding: 12px 16px;
  border: 1px solid #cbd5e1;
  transition: all 0.2s ease;
}

.so-order-box.buy-mode {
  background: #f0fdf4;
  border-color: #86efac;
}

.so-order-box.sell-mode {
  background: #fff1f2;
  border-color: #fca5a5;
}

.so-box-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.so-box-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.so-action-badge {
  padding: 3px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.5px;
}

.badge-buy {
  background: #16a34a;
}

.badge-sell {
  background: #dc2626;
}

.so-segment-tag {
  font-size: 12px;
  font-weight: 700;
  color: #334155;
}

.so-box-oms-notice {
  font-size: 11.5px;
  color: #64748b;
  font-weight: 600;
}

.so-inputs-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
  align-items: end;
}

.so-field-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#so-col-type { grid-column: span 2; }
#so-col-expiry { grid-column: span 3; }
#so-col-strike { grid-column: span 3; }
#so-col-qty { grid-column: span 2; }
#so-col-price { grid-column: span 2; }

.so-field-lbl {
  font-size: 11px;
  font-weight: 800;
  color: #475569;
}

.so-input-select, .so-input-price {
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
  background: #ffffff;
  width: 100%;
}

.so-input-price {
  text-align: right;
}

.so-stepper-wrap {
  display: flex;
  align-items: center;
}

.btn-so-step {
  width: 30px;
  height: 32px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  font-size: 16px;
  font-weight: 800;
  color: #334155;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-so-step:first-child {
  border-radius: 6px 0 0 6px;
  border-right: none;
}
.btn-so-step:last-child {
  border-radius: 0 6px 6px 0;
  border-left: none;
}
.btn-so-step:hover:not(:disabled) {
  background: #e2e8f0;
}
.btn-so-step:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.so-input-num {
  border: 1px solid #cbd5e1;
  padding: 6px 4px;
  font-size: 13px;
  text-align: center;
  width: 100%;
  background: #ffffff;
}

.so-val-summary-row {
  grid-column: span 12;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 6px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.so-val-lbl {
  font-size: 11.5px;
  font-weight: 800;
  color: #64748b;
}

.so-val-amount {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
}

/* Order Status Card */
.so-status-card {
  border-radius: 8px;
  padding: 10px 14px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
}

.so-status-card.status-ready {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.so-status-card.status-partial {
  background: #fefce8;
  border-color: #fde047;
}

.so-status-card.status-rejected {
  background: #fff1f2;
  border-color: #fca5a5;
}

.so-status-card.status-filled {
  background: #f0fdf4;
  border-color: #86efac;
}

.so-status-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.so-status-badge-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.so-status-heading {
  font-size: 11px;
  font-weight: 800;
  color: #475569;
}

.so-status-pill {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 800;
}

.pill-ready { background: #e2e8f0; color: #334155; }
.pill-partial { background: #eab308; color: #ffffff; }
.pill-rejected { background: #dc2626; color: #ffffff; }
.pill-filled { background: #16a34a; color: #ffffff; }
.pill-offline { background: #64748b; color: #ffffff; }

.so-order-id {
  font-size: 11.5px;
  color: #64748b;
}

.so-status-msg {
  font-size: 12px;
  font-weight: 500;
  color: #334155;
  line-height: 1.4;
}

.so-partial-action-row {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.so-partial-text {
  font-size: 11.5px;
  font-weight: 600;
  color: #854d0e;
}

.btn-so-cancel-remaining {
  background: #dc2626;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s ease;
}
.btn-so-cancel-remaining:hover {
  background: #b91c1c;
}

/* Footer Actions */
.single-order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

.btn-so-exit {
  border: 1px solid #cbd5e1;
  background: #ffffff;
  padding: 8px 22px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 800;
  color: #334155;
  cursor: pointer;
}
.btn-so-exit:hover {
  background: #f1f5f9;
}

.btn-so-refresh {
  border: 1px solid #0284c7;
  background: #ffffff;
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 800;
  color: #0284c7;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-so-refresh:hover {
  background: #f0f9ff;
}

.btn-so-execute {
  border: none;
  padding: 9px 36px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.5px;
}

.btn-so-execute.btn-act-buy {
  background: #16a34a;
}
.btn-so-execute.btn-act-buy:hover:not(:disabled) {
  background: #15803d;
}

.btn-so-execute.btn-act-sell {
  background: #dc2626;
}
.btn-so-execute.btn-act-sell:hover:not(:disabled) {
  background: #b91c1c;
}

.btn-so-execute:disabled {
  background: #94a3b8 !important;
  cursor: not-allowed !important;
  opacity: 0.7;
}

/* =========================================================
   MCX INLINE CONTRACTS DRAWER & SUB-TABLE (LIGHT THEME)
   ========================================================= */
.wl-contracts-drawer-row {
  display: none;
  background: #F8FAFC !important;
}
.wl-contracts-drawer-row.open {
  display: table-row;
  animation: fadeInDrawer 0.2s ease-in-out;
}
.wl-contracts-drawer-row:hover,
.wl-contracts-drawer-row:hover > td,
.wl-contracts-drawer-row > td {
  background: #F8FAFC !important;
}

@keyframes fadeInDrawer {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

.wl-contracts-drawer-row .drawer-cell-container {
  padding: 0 !important;
  background: #F8FAFC !important;
  border-bottom: 2px solid #0284C7;
}

.wl-contracts-drawer-row .drawer-inner-box {
  padding: 14px 20px 18px 20px;
  background: #F8FAFC !important;
  border-left: 4px solid #0284C7;
}

.wl-contracts-drawer-row .drawer-top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #E2E8F0;
}

.wl-contracts-drawer-row .drawer-title {
  font-size: 13px;
  font-weight: 700;
  color: #0F172A;
  display: flex;
  align-items: center;
  gap: 8px;
}

.wl-contracts-drawer-row .drawer-balance-badge {
  font-size: 12px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  padding: 4px 10px;
  border-radius: 4px;
  color: #64748B;
}
.wl-contracts-drawer-row .drawer-balance-val {
  color: #0369A1;
  font-weight: 700;
  margin-left: 4px;
}

.wl-contracts-drawer-row .contracts-sub-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px !important;
  white-space: nowrap;
  background: #F0F7FF !important;
  border-radius: 6px;
  overflow: hidden;
}

.wl-contracts-drawer-row .contracts-sub-table thead th {
  background: #E0F2FE !important;
  color: #0F172A;
  font-size: 11px !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 9px 12px;
  border-bottom: 1.5px solid #BFDBFE !important;
  text-align: center;
}

.wl-contracts-drawer-row .contracts-sub-table tbody tr,
.wl-contracts-drawer-row .contracts-sub-table tbody tr td {
  border-bottom: 1px solid #E2E8F0;
  transition: background 0.15s ease;
  background: #F0F7FF !important;
}
.wl-contracts-drawer-row .contracts-sub-table tbody tr:last-child,
.wl-contracts-drawer-row .contracts-sub-table tbody tr:last-child td {
  border-bottom: none;
}
.wl-contracts-drawer-row .contracts-sub-table tbody tr:hover,
.wl-contracts-drawer-row .contracts-sub-table tbody tr:hover td {
  background: #E0F2FE !important;
}

.wl-contracts-drawer-row .contracts-sub-table td {
  padding: 8px 10px;
  vertical-align: middle;
  text-align: center;
  font-size: 12px !important;
  background: #F0F7FF !important;
}

.wl-contracts-drawer-row .contract-sym-box {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.wl-contracts-drawer-row .contract-tsym {
  font-weight: 800;
  color: #0F172A;
  font-size: 13px;
  letter-spacing: 0.2px;
}
.wl-contracts-drawer-row .contract-cycle-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  width: fit-content;
}
.wl-contracts-drawer-row .cycle-current {
  background: #E0F2FE;
  color: #0369A1;
  border: 1px solid #7DD3FC;
}
.wl-contracts-drawer-row .cycle-next {
  background: #F3E8FF;
  color: #7E22CE;
  border: 1px solid #D8B4FE;
}

.wl-contracts-drawer-row .expiry-dte-cell {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.wl-contracts-drawer-row .expiry-date-text {
  font-weight: 700;
  color: #0F172A;
  font-size: 12px;
}
.wl-contracts-drawer-row .dte-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 700;
  font-size: 10px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  width: fit-content;
}
.wl-contracts-drawer-row .dte-safe {
  background: #DCFCE7;
  color: #166534;
  border: 1px solid #86EFAC;
}
.wl-contracts-drawer-row .dte-warning {
  background: #FEF3C7;
  color: #92400E;
  border: 1px solid #FCD34D;
}

.wl-contracts-drawer-row .margin-val {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-weight: 700;
  font-size: 12px;
  color: #0F172A;
  text-align: center;
}
.wl-contracts-drawer-row .margin-status-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  display: inline-block;
  margin-top: 2px;
}
.wl-contracts-drawer-row .tag-available { background: #DCFCE7; color: #166534; }
.wl-contracts-drawer-row .tag-shortfall { background: #FEE2E2; color: #991B1B; }

.wl-contracts-drawer-row .pos-box {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.wl-contracts-drawer-row .pos-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 800;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  width: fit-content;
}
.wl-contracts-drawer-row .pos-long { background: #DCFCE7; color: #166534; border: 1px solid #86EFAC; }
.wl-contracts-drawer-row .pos-short { background: #FEE2E2; color: #991B1B; border: 1px solid #FCA5A5; }
.wl-contracts-drawer-row .pos-flat { background: #F1F5F9; color: #64748B; border: 1px solid #E2E8F0; }

.wl-contracts-drawer-row .pnl-val {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-weight: 800;
  font-size: 12px;
  text-align: center;
}
.wl-contracts-drawer-row .pnl-sub-pct {
  font-size: 10px;
  margin-left: 4px;
}

.wl-contracts-drawer-row .execution-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 360px;
}

.wl-contracts-drawer-row .exec-row-1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.wl-contracts-drawer-row .side-toggle-group {
  display: inline-flex;
  border: 1px solid #CBD5E1;
  border-radius: 4px;
  overflow: hidden;
  background: #FFFFFF;
}
.wl-contracts-drawer-row .side-btn {
  padding: 4px 10px;
  border: none;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  background: transparent;
  color: #64748B;
  transition: all 0.15s ease;
}
.wl-contracts-drawer-row .side-btn.active-buy {
  background: #059669;
  color: #FFFFFF;
}
.wl-contracts-drawer-row .side-btn.active-sell {
  background: #DC2626;
  color: #FFFFFF;
}

.wl-contracts-drawer-row .input-with-label {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 4px;
  padding: 2px 6px;
}
.wl-contracts-drawer-row .input-field-lbl {
  font-size: 10px;
  color: #94A3B8;
  font-weight: 700;
  text-transform: uppercase;
}
.wl-contracts-drawer-row .exec-num-input {
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, monospace;
  color: #0F172A;
  text-align: right;
}
.wl-contracts-drawer-row .exec-num-input:focus {
  outline: none;
}
.wl-contracts-drawer-row .input-limit-price {
  width: 72px;
}

.wl-contracts-drawer-row .qty-stepper-box {
  display: inline-flex;
  align-items: center;
  border: 1px solid #CBD5E1;
  border-radius: 4px;
  overflow: hidden;
  background: #FFFFFF;
}
.wl-contracts-drawer-row .qty-step-btn {
  background: #F1F5F9;
  color: #0F172A;
  border: none;
  padding: 4px 7px;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}
.wl-contracts-drawer-row .qty-step-btn:hover {
  background: #E2E8F0;
}
.wl-contracts-drawer-row .qty-val-input {
  width: 60px;
  border: none;
  background: transparent;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, monospace;
  color: #0F172A;
  padding: 4px 2px;
}
.wl-contracts-drawer-row .qty-val-input:focus {
  outline: none;
}

.wl-contracts-drawer-row .exec-val-pill {
  background: #F1F5F9;
  border: 1px solid #CBD5E1;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-weight: 700;
  color: #0F172A;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.wl-contracts-drawer-row .exec-val-label {
  font-size: 10px;
  color: #64748B;
  font-weight: 600;
  text-transform: uppercase;
}

.wl-contracts-drawer-row .exec-row-2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.wl-contracts-drawer-row .btn-exec-action {
  padding: 5px 14px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid transparent;
}

.wl-contracts-drawer-row .btn-exec-add {
  background: #0284C7;
  color: #FFFFFF;
  border-color: #0284C7;
}
.wl-contracts-drawer-row .btn-exec-add:hover:not(:disabled) {
  background: #0369A1;
}

.wl-contracts-drawer-row .btn-exec-exit {
  background: #FEE2E2;
  color: #991B1B;
  border-color: #FCA5A5;
}
.wl-contracts-drawer-row .btn-exec-exit:hover:not(:disabled) {
  background: #FCA5A5;
}

.wl-contracts-drawer-row .btn-exec-rollover {
  background: #FEF3C7;
  color: #92400E;
  border-color: #FCD34D;
}
.wl-contracts-drawer-row .btn-exec-rollover:hover:not(:disabled) {
  background: #FDE68A;
}

.wl-contracts-drawer-row .btn-exec-action:disabled {
  background: #F1F5F9 !important;
  color: #94A3B8 !important;
  border-color: #E2E8F0 !important;
  cursor: not-allowed !important;
  opacity: 0.7;
}

/* ==========================================================================
   CREDIT SPREAD INLINE DRAWER (SIMPLIFIED LIGHT THEME)
   ========================================================================== */
.wl-cs-drawer-row {
  display: none;
  background: #F8FAFC !important;
}
.wl-cs-drawer-row.open {
  display: table-row !important;
  animation: fadeInCsDrawer 0.18s ease-in-out;
}
@keyframes fadeInCsDrawer {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}
.wl-cs-drawer-row:hover,
.wl-cs-drawer-row:hover > td,
.wl-cs-drawer-row > td {
  background: #F8FAFC !important;
  border-top: none !important;
}
.wl-cs-drawer-row .drawer-cell-container {
  padding: 0 !important;
  background: #F0F7FF !important;
  border-bottom: 2px solid #3B82F6 !important;
}
.wl-cs-drawer-row.open {
  background: #F0F7FF !important;
}
.wl-cs-drawer-row.open td {
  background: #F0F7FF !important;
}
.wl-cs-drawer-row .drawer-inner-box {
  padding: 12px 18px 18px 18px;
  background: #F8FAFC;
  border-left: 4px solid #3B82F6;
  border-top: 1px solid #BFDBFE;
  border-right: 1px solid #BFDBFE;
  box-shadow: 0 4px 12px -2px rgba(59, 130, 246, 0.08);
}
.wl-cs-drawer-row .drawer-top-header {
  background: #FFFFFF;
  border: 1px solid #BFDBFE;
  border-radius: 6px;
  padding: 9px 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.wl-cs-drawer-row .drawer-title-left {
  font-size: 13px;
  font-weight: 800;
  color: #0F172A;
  display: flex;
  align-items: center;
  gap: 6px;
}
.wl-cs-drawer-row .drawer-middle-atm {
  font-size: 12px;
  font-weight: 800;
  color: #1D4ED8;
  background: #DBEAFE;
  border: 1px solid #93C5FD;
  padding: 3px 10px;
  border-radius: 4px;
  letter-spacing: 0.3px;
}
.wl-cs-drawer-row .drawer-right-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.wl-cs-drawer-row .step-dropdown-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 4px;
  padding: 3px 7px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.wl-cs-drawer-row .step-dropdown-lbl {
  font-size: 10px;
  font-weight: 700;
  color: #64748B;
  text-transform: uppercase;
}
.wl-cs-drawer-row .step-select {
  border: none;
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  color: #0F172A;
  outline: none;
  cursor: pointer;
}
.wl-cs-drawer-row .toggle-strat-group {
  display: inline-flex;
  border: 1px solid #CBD5E1;
  border-radius: 4px;
  overflow: hidden;
  background: #FFFFFF;
}
.wl-cs-drawer-row .toggle-strat-btn {
  padding: 4px 10px;
  border: none;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
  background: #FFFFFF;
  color: #64748B;
}
.wl-cs-drawer-row .toggle-strat-btn.active-pe-bull {
  background: #059669;
  color: #FFFFFF;
}
.wl-cs-drawer-row .toggle-strat-btn.active-ce-bear {
  background: #DC2626;
  color: #FFFFFF;
}
.wl-cs-drawer-row .subtable-card {
  background: #FFFFFF;
  border: 1px solid #BFDBFE;
  border-radius: 6px;
  margin-bottom: 12px;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.05);
  overflow: hidden;
}
.wl-cs-drawer-row .subtable-card-header {
  background: #EFF6FF;
  padding: 7px 14px;
  border-bottom: 1px solid #BFDBFE;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.wl-cs-drawer-row .subtable-card-heading {
  font-size: 11.5px;
  font-weight: 800;
  color: #0F172A;
  display: flex;
  align-items: center;
  gap: 6px;
}
.wl-cs-drawer-row .subtable-card-notice {
  font-size: 10.5px;
  font-weight: 700;
  color: #475569;
  background: #FFFFFF;
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid #CBD5E1;
}
.wl-cs-drawer-row .cs-unified-card {
  background: #F0F7FF;
  border: 1.5px solid #BFDBFE;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.08);
}
.wl-cs-drawer-row .spread-sub-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px !important;
  white-space: nowrap;
  background: #F0F7FF !important;
}
.wl-cs-drawer-row .spread-sub-table thead th {
  background: #E0F2FE !important;
  color: #0F172A;
  font-size: 11px !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 8px 10px;
  border-bottom: 1.5px solid #BFDBFE !important;
  text-align: center;
}
.wl-cs-drawer-row .spread-sub-table tbody tr {
  border-bottom: 1px solid #E2E8F0;
  transition: background 0.15s ease;
  background: #F0F7FF !important;
}
.wl-cs-drawer-row .spread-sub-table tbody tr:last-child {
  border-bottom: none;
}
.wl-cs-drawer-row .spread-sub-table tbody tr:hover {
  background: #E0F2FE !important;
}
.wl-cs-drawer-row .spread-sub-table td {
  padding: 8px 10px;
  vertical-align: middle;
  text-align: center;
  font-size: 12px !important;
  background: #F0F7FF !important;
}
.wl-cs-drawer-row .cell-line-1 {
  font-size: 12px !important;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.3;
}
.wl-cs-drawer-row .cell-line-2 {
  font-size: 11px !important;
  font-weight: 600;
  color: #64748B;
  line-height: 1.3;
  margin-top: 2px;
}
.wl-cs-drawer-row .exec-box-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 130px;
}
.wl-cs-drawer-row .qty-stepper-mini {
  display: inline-flex;
  align-items: center;
  border: 1px solid #CBD5E1;
  border-radius: 4px;
  overflow: hidden;
  background: #FFFFFF;
}
.wl-cs-drawer-row .qty-step-btn-mini {
  background: #F1F5F9;
  color: #0F172A;
  border: none;
  padding: 2px 7px;
  font-weight: 800;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.1s ease;
}
.wl-cs-drawer-row .qty-step-btn-mini:hover { background: #E2E8F0; }
.wl-cs-drawer-row .qty-val-input-mini {
  width: 58px;
  border: none;
  background: #FFFFFF;
  text-align: center;
  font-size: 11px !important;
  font-weight: 800;
  font-family: ui-monospace, SFMono-Regular, monospace;
  color: #0F172A;
  outline: none;
}
.wl-cs-drawer-row .cs-lot-indicator {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  white-space: nowrap;
}
.wl-cs-drawer-row .btn-exec-row {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.wl-cs-drawer-row .btn-act-add {
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
}
.wl-cs-drawer-row .btn-act-add-bull {
  background: #059669 !important;
  color: #FFFFFF !important;
  border: 1px solid #047857 !important;
}
.wl-cs-drawer-row .btn-act-add-bull:hover { background: #047857 !important; }
.wl-cs-drawer-row .btn-act-add-bear {
  background: #DC2626 !important;
  color: #FFFFFF !important;
  border: 1px solid #B91C1C !important;
}
.wl-cs-drawer-row .btn-act-add-bear:hover { background: #B91C1C !important; }
.wl-cs-drawer-row .btn-act-exit {
  background: #FEE2E2;
  color: #991B1B;
  border: 1px solid #FCA5A5;
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
}
.wl-cs-drawer-row .btn-act-exit:hover { background: #FCA5A5; }
.wl-cs-drawer-row .btn-act-exit:disabled {
  background: #F1F5F9;
  color: #94A3B8;
  border-color: #E2E8F0;
  cursor: not-allowed;
}

/* ==========================================================================
   STRATEGY TAB BOTTOM ACTIVITY & OPERATIONS LOG TABLE (AUTO & MANUAL)
   ========================================================================== */
.strategy-log-section {
  background: #FCFDFE;
  border-top: 1.5px solid #E2E8F0;
  padding: 12px 16px 16px 16px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.strategy-log-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.strategy-log-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.strategy-log-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #0F172A;
  display: flex;
  align-items: center;
  gap: 6px;
}

.strategy-log-cnt-badge {
  background: #E2E8F0;
  color: #334155;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
}

.strategy-log-filters {
  display: flex;
  align-items: center;
  gap: 6px;
}

.strat-log-flt-btn {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  padding: 2.5px 9px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  color: #64748B;
  cursor: pointer;
  transition: all 0.15s ease;
}

.strat-log-flt-btn:hover {
  background: #F1F5F9;
  color: #0F172A;
}

.strat-log-flt-btn.active {
  background: #0F172A;
  color: #FFFFFF;
  border-color: #0F172A;
}

.strategy-log-tbl-wrapper {
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  background: #FFFFFF;
  max-height: 320px;
  overflow-y: auto;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);
}

.strat-act-log-tbl {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 12px;
}

.strat-act-log-tbl thead th {
  background: #F8FAFC;
  color: #475569;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 7px 12px;
  border-bottom: 1px solid #E2E8F0;
  position: sticky;
  top: 0;
  z-index: 5;
}

.strat-act-log-tbl td {
  padding: 7px 12px;
  border-bottom: 1px solid #F1F5F9;
  vertical-align: middle;
}

.strat-act-log-tbl tbody tr:last-child td {
  border-bottom: none;
}

.strat-act-log-tbl tbody tr:hover td {
  background: #F8FAFC;
}

.strat-act-log-tbl .col-time {
  width: 140px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11.5px;
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
}

.strat-act-log-tbl .col-type {
  width: 85px;
  white-space: nowrap;
}

.strat-act-log-tbl .col-event {
  width: 190px;
  white-space: nowrap;
}

.strat-act-log-tbl .col-result {
  width: 130px;
  white-space: nowrap;
}

.strat-act-log-tbl .col-message {
  color: #1E293B;
  line-height: 1.4;
  word-break: break-word;
}

/* Separate Type Column Badges */
.log-type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.3px;
}
.log-type-auto {
  background: #EFF6FF;
  color: #1D4ED8;
  border: 1px solid #BFDBFE;
}
.log-type-manual {
  background: #FEF3C7;
  color: #B45309;
  border: 1px solid #FDE68A;
}

/* Event Category Color Badges */
.log-event-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 2.5px 8px;
  border-radius: 4px;
}
.log-evt-sync {
  background: #E0F2FE;
  color: #0369A1;
  border: 1px solid #BAE6FD;
}
.log-evt-alert {
  background: #EDE9FE;
  color: #6B21A8;
  border: 1px solid #D8B4FE;
}
.log-evt-trade {
  background: #ECFDF5;
  color: #047857;
  border: 1px solid #A7F3D0;
}
.log-evt-config {
  background: #FFFBEB;
  color: #B45309;
  border: 1px solid #FDE68A;
}
.log-evt-broker {
  background: #F1F5F9;
  color: #334155;
  border: 1px solid #CBD5E1;
}
.log-evt-default {
  background: #F8FAFC;
  color: #475569;
  border: 1px solid #E2E8F0;
}

/* Result Badges */
.log-res-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
}
.log-res-success {
  background: #DCFCE7;
  color: #166534;
  border: 1px solid #86EFAC;
}
.log-res-filled {
  background: #DCFCE7;
  color: #166534;
  border: 1px solid #86EFAC;
}
.log-res-failed {
  background: #FEE2E2;
  color: #991B1B;
  border: 1px solid #FCA5A5;
}
.log-res-rejected {
  background: #FEE2E2;
  color: #991B1B;
  border: 1px solid #FCA5A5;
}
.log-res-partial {
  background: #FEF3C7;
  color: #92400E;
  border: 1px solid #FCD34D;
}
.log-res-pending {
  background: #FEF3C7;
  color: #92400E;
  border: 1px solid #FCD34D;
}
.log-res-alert {
  background: #EDE9FE;
  color: #5B21B6;
  border: 1px solid #C4B5FD;
}
.log-res-warning {
  background: #FFFBEB;
  color: #B45309;
  border: 1px solid #FDE68A;
}

/* ==========================================================================
   SECOND TABLE: OPERATIONS LEDGER MULTI-TAB CARD & CONTROLS
   ========================================================================== */
.operations-ledger-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02);
  margin-top: 14px;
  margin-bottom: 24px;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
}

.operations-ledger-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: #F8FAFC;
  border-bottom: 1.5px solid #E2E8F0;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 44px;
}

.ledger-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ledger-tab-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.ledger-tab-btn {
  background: transparent;
  border: 1px solid transparent;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #64748B;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
  user-select: none;
}

.ledger-tab-btn:hover {
  background: #F1F5F9;
  color: #0F172A;
}

.ledger-tab-btn.active {
  background: #FFFFFF;
  color: #0284C7;
  border-color: #CBD5E1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  font-weight: 700;
}

.ledger-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ledger-strat-badge {
  background: #E0F2FE;
  color: #0369A1;
  border: 1px solid #BAE6FD;
  font-size: 11px;
  font-weight: 700;
  padding: 2.5px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.ledger-btn-action {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  color: #334155;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}

.ledger-btn-action:hover {
  background: #F1F5F9;
  color: #0F172A;
  border-color: #94A3B8;
}

.ledger-window-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 2px;
}

.ledger-ctrl-btn {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  color: #64748B;
  width: 27px;
  height: 27px;
  border-radius: 5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.15s ease;
}

.ledger-ctrl-btn:hover {
  background: #F1F5F9;
  color: #0F172A;
  border-color: #94A3B8;
}

/* Minimize State */
.operations-ledger-card.is-minimized .operations-ledger-body {
  display: none !important;
}

.operations-ledger-card.is-minimized .operations-ledger-header {
  border-bottom: none;
}

/* Maximize State */
.operations-ledger-card.is-maximized .ledger-tbl-wrapper {
  max-height: 540px !important;
}

/* Sub-bar inside each tab */
.ledger-sub-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 14px;
  background: #FFFFFF;
  border-bottom: 1px solid #F1F5F9;
  font-size: 11px;
  color: #64748B;
}

.ledger-sub-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ledger-tbl-wrapper {
  border-top: 1px solid #E2E8F0;
  max-height: 310px;
  overflow-y: auto;
  overflow-x: auto;
  background: #FFFFFF;
}

.operations-ledger-card .watchlist-table th,
.operations-ledger-card .strat-act-log-tbl th {
  background: #F8FAFC;
  color: #475569;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 8px 12px;
  border-bottom: 1px solid #E2E8F0;
  position: sticky;
  top: 0;
  z-index: 4;
}

.operations-ledger-card .watchlist-table td,
.operations-ledger-card .strat-act-log-tbl td {
  padding: 8px 12px;
  border-bottom: 1px solid #F1F5F9;
  font-size: 12px;
}

.operations-ledger-card .watchlist-table tr:hover,
.operations-ledger-card .strat-act-log-tbl tr:hover {
  background: #F8FAFC;
}