/* TradePlayGround - Light Theme */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  background-color: #f8f9fa;
  color: #212529;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ==============================================================================
   1. APP HEADER BAR (Replicated from Commodity - Light Theme Only)
   ============================================================================== */
.cm-header {
  background: #FFFFFF;
  border-bottom: 1px solid #E2E8F0;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.cm-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cm-brand-title {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.02em;
}

.cm-brand-icon {
  margin-right: 8px;
  color: #0284C7;
  flex-shrink: 0;
}

.cm-title-full {
  display: inline;
}

.cm-title-mobile {
  display: none;
}

.cm-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cm-btn-hub {
  font-weight: 700;
  color: #0369A1;
  background: #E0F2FE;
  border-color: #7DD3FC;
}
.cm-btn-hub:hover {
  background: #BAE6FD;
}

.cm-clock-display {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
  font-weight: 600;
  color: #64748B;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  padding: 5px 10px;
  border-radius: 4px;
}

.cm-chip-btn {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  color: #0F172A;
  padding: 5px 11px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
}
.cm-chip-btn:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
}

/* Small Broker Capsule before Logout Button (Dot + Name only) */
.broker-capsule {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #0F172A;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.broker-capsule:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
}

.broker-capsule.connected {
  border-color: #86EFAC;
  background: #F0FDF4;
}

.broker-capsule.reauth {
  border-color: #FCD34D;
  background: #FFFBEB;
}

.capsule-broker-name {
  font-weight: 700;
  color: #0F172A;
}

@media (max-width: 640px) {
  .cm-header {
    padding: 0 12px;
    height: 48px;
  }
  .cm-title-full {
    display: none;
  }
  .cm-title-mobile {
    display: inline;
  }
  .cm-clock-display {
    display: none;
  }
}

/* Login Gate Modal */
.login-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  padding: 20px;
}

.login-card {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  width: 100%;
  max-width: 400px;
  padding: 32px;
  animation: fadeInCard 0.25s ease-out;
}

@keyframes fadeInCard {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.login-header {
  text-align: center;
  margin-bottom: 24px;
}

.login-icon {
  font-size: 2.2rem;
  margin-bottom: 8px;
}

.login-header h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
}

.login-header p {
  font-size: 0.85rem;
  color: #64748b;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.password-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.password-input-wrapper .text-input {
  padding-right: 40px;
}

.btn-toggle-pwd {
  position: absolute;
  right: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  padding: 4px;
  color: #64748b;
}

.btn-toggle-pwd:hover {
  color: #1e293b;
}

.login-error {
  background-color: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.8rem;
  font-weight: 500;
}

.btn-login-submit {
  width: 100%;
  padding: 10px;
  font-size: 0.95rem;
}

/* Blank Canvas (Clean, uncluttered playground) */
.blank-canvas {
  flex: 1;
  width: 100%;
}


/* Status Dots & Animations */
.status-indicator-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  transition: all 0.3s ease;
}

.status-dot.green {
  background-color: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.7);
  animation: pulseGreen 2s infinite ease-in-out;
}

.status-dot.orange {
  background-color: #f59e0b;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.7);
  animation: pulseOrange 2s infinite ease-in-out;
}

.status-dot.red {
  background-color: #ef4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.7);
}

@keyframes pulseGreen {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 4px rgba(16, 185, 129, 0.5);
  }
  50% {
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.9);
  }
}

@keyframes pulseOrange {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 4px rgba(245, 158, 11, 0.5);
  }
  50% {
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.9);
  }
}

.status-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.status-badge.green {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.status-badge.orange {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}

.status-badge.red {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

/* Button Styles */
.btn {
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-primary {
  background-color: #ff6600;
  color: #ffffff;
}

.btn-primary:hover:not(:disabled) {
  background-color: #e55c00;
}

.btn-secondary {
  background-color: #f1f5f9;
  color: #334155;
  border: 1px solid #cbd5e1;
}

.btn-secondary:hover:not(:disabled) {
  background-color: #e2e8f0;
}

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

.btn-success:hover:not(:disabled) {
  background-color: #047857;
}

.btn-danger {
  background-color: #dc2626;
  color: #ffffff;
}

.btn-danger:hover:not(:disabled) {
  background-color: #b91c1c;
}

.btn-reauth {
  background-color: #ea580c;
  color: #ffffff;
}

.btn-reauth:hover:not(:disabled) {
  background-color: #c2410c;
}

.btn-reauth.connected {
  background-color: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}

.btn-reauth.connected:hover:not(:disabled) {
  background-color: #e2e8f0;
  color: #1e293b;
}

.btn-broker-logout {
  background-color: transparent;
  color: #dc2626;
  border: 1px solid #fca5a5;
}

.btn-broker-logout:hover:not(:disabled) {
  background-color: #fef2f2;
  border-color: #ef4444;
}

.btn-broker-logout:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  border-color: #e2e8f0;
  color: #94a3b8;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Fyers Modal Card Overlay */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  animation: fadeInModal 0.2s ease-out;
}

.broker-modal-card {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: scaleUpModal 0.2s ease-out;
}

@keyframes fadeInModal {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleUpModal {
  from { opacity: 0; transform: scale(0.96) translateY(-8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fafbfc;
}

.modal-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.broker-badge-icon {
  font-size: 1.5rem;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.broker-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.broker-header-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.broker-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f172a;
}

.broker-desc {
  font-size: 0.75rem;
  color: #64748b;
}

.btn-close-modal {
  background: transparent;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.btn-close-modal:hover {
  color: #0f172a;
  background: #f1f5f9;
}

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

.modal-actions-bar {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Section Cards inside Modal */
.section-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 18px;
}

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

.section-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #475569;
}

.section-sub {
  font-size: 0.72rem;
  color: #94a3b8;
  font-weight: 500;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.profile-item {
  background: #ffffff;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.profile-label {
  display: block;
  font-size: 0.68rem;
  color: #64748b;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 3px;
}

.profile-value {
  font-size: 0.88rem;
  font-weight: 600;
  color: #0f172a;
  word-break: break-all;
}

.profile-value.highlight {
  color: #0284c7;
}

.funds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.fund-card {
  background: #ffffff;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
}

.fund-card.primary-fund {
  border-left: 4px solid #10b981;
}

.fund-label {
  font-size: 0.7rem;
  color: #64748b;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.fund-amount {
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 2px;
}

.fund-hint {
  font-size: 0.68rem;
  color: #94a3b8;
}

.text-success {
  color: #059669;
}

.text-muted {
  color: #64748b;
}

/* Accordions & Fallback */
.details-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.config-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  font-size: 0.72rem;
  background: #f1f5f9;
  color: #475569;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
}

.tag strong {
  color: #1e293b;
}

.fallback-accordion, .log-accordion {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 12px;
}

.fallback-summary, .log-summary {
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  outline: none;
}

.fallback-summary:hover, .log-summary:hover {
  color: #1e293b;
}

.auth-exchange-box {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #edf2f7;
}

.input-row {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.text-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 0.85rem;
  font-family: inherit;
  outline: none;
}

.text-input:focus {
  border-color: #ff6600;
}

/* Log Console */
.log-console {
  background: #0f172a;
  border-radius: 8px;
  padding: 12px 16px;
  color: #e2e8f0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

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

.log-title {
  font-size: 0.72rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.btn-clear-log {
  background: transparent;
  border: 1px solid #334155;
  color: #94a3b8;
  font-size: 0.68rem;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-clear-log:hover {
  color: #ffffff;
  border-color: #64748b;
}

.log-content {
  font-size: 0.78rem;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
  color: #38bdf8;
  max-height: 140px;
  overflow-y: auto;
}

/* Confirmation Modal Overlay */
.confirm-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  padding: 20px;
}

.confirm-modal {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  width: 100%;
  max-width: 440px;
  padding: 28px 24px;
  text-align: center;
  animation: fadeInCard 0.2s ease-out;
}

.modal-icon {
  font-size: 2.2rem;
  margin-bottom: 12px;
}

.modal-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
}

.modal-body-text {
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.5;
  margin-bottom: 24px;
}

.modal-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* ==========================================================================
   PORTFOLIO TAB MODULE STYLES
   ========================================================================== */

.tabs-nav-bar {
  display: flex;
  gap: 8px;
  border-bottom: 2px solid #e2e8f0;
  padding: 0 24px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.tab-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: #64748b;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  margin-bottom: -2px;
}

.tab-nav-btn:hover {
  color: #0f172a;
}

.tab-nav-btn.active {
  color: #ff6600;
  border-bottom-color: #ff6600;
}

.tab-icon {
  font-size: 1.1rem;
}

.tab-view-container {
  padding: 12px 18px;
  max-width: 1560px;
  margin: 0 auto;
}

/* Toolbar */
/* Toolbar */
.portfolio-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
  width: 100%;
}

/* Left Side: Benchmark Cards */
.market-section-wrap {
  display: inline-flex;
  align-items: center;
}

.market-section-title {
  display: none;
}

.portfolio-benchmarks {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.market-sub-benchmarks {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.bm-val-amt {
  font-weight: 700;
  color: #0f172a;
  font-size: 0.82rem;
  margin: 0 2px;
}

.summary-label-desktop {
  display: inline;
}

.benchmark-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #1e293b;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  font-family: inherit;
  line-height: 1.4;
  outline: none;
}

.benchmark-card-btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.benchmark-card-btn:active {
  transform: translateY(0);
}

.benchmark-card-btn .bm-label {
  font-weight: 600;
  color: #334155;
  font-size: 0.82rem;
}

.benchmark-card-btn .bm-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.bm-badge.positive {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.bm-badge.negative {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.bm-badge.neutral {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

/* Right Side Wrap: Sync text before Buttons */
.portfolio-actions-right {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  flex-wrap: wrap;
}

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

.sync-tag {
  font-size: 0.75rem;
  color: #64748b;
  background: #f1f5f9;
  padding: 4px 9px;
  border-radius: 5px;
  display: inline-block;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid #e2e8f0;
}

@keyframes grandTotalHighlight {
  0% { background-color: rgba(59, 130, 246, 0.25); }
  100% { background-color: transparent; }
}

.highlight-grand-total tr {
  animation: grandTotalHighlight 2s ease-out;
}

.toolbar-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-action:hover,
.btn-refresh:hover,
.btn-export:hover,
.btn-add-record:hover,
.btn-tv-symbols:hover {
  background: #f8fafc;
  border-color: #3b82f6;
  color: #1d4ed8;
}

/* KPI Metric Highlights Bar */
.portfolio-kpi-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.kpi-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.05), 0 3px 6px -2px rgba(0, 0, 0, 0.03);
}

.kpi-card-invested {
  border-top: 4px solid #6366f1;
  background: linear-gradient(180deg, #fbfaff 0%, #ffffff 50%);
}

.kpi-card-mktval {
  border-top: 4px solid #0284c7;
  background: linear-gradient(180deg, #f4faff 0%, #ffffff 50%);
}

.kpi-card-unrealized {
  border-top: 4px solid #10b981;
  background: linear-gradient(180deg, #f2fcf6 0%, #ffffff 50%);
}

.kpi-card-booked {
  border-top: 4px solid #f59e0b;
  background: linear-gradient(180deg, #fffdf5 0%, #ffffff 50%);
}

.kpi-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.kpi-icon {
  font-size: 1.1rem;
}

.kpi-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
}

.kpi-val {
  font-size: 1.6rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  font-family: inherit !important;
}

.kpi-footer {
  font-size: 0.76rem;
  color: #64748b;
  margin-top: 6px;
  font-weight: 500;
}

/* Portfolio Table Layout Grids: Table 1 & 3: 66.66%, Table 2 & 4: 33.33% */
.portfolio-grid-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

@media (max-width: 1024px) {
  .portfolio-grid-row {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 16px;
  }
}


.portfolio-bottom-row {
  margin-bottom: 32px;
}

.table-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
}

.table-card-full {
  padding: 16px 20px;
}

.table-header-wrap {
  margin-bottom: 12px;
}

.table-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.table-badge {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
}

.table-badge.badge-strat {
  background: #ede9fe;
  color: #6d28d9;
}

.table-badge.badge-broker {
  background: #e0f2fe;
  color: #0369a1;
}

.table-badge.badge-gains {
  background: #dcfce7;
  color: #15803d;
}

.table-badge.badge-stocks {
  background: #e0f7fa;
  color: #00838f;
}

/* Card Top Accent Borders matching the 3-Tier Image Palette */
.card-strategy {
  border-top: 1px solid #e2e8f0 !important;
}

.card-strategy-booked {
  border-top: 1px solid #e2e8f0 !important;
}

.card-broker {
  border-top: 1px solid #e2e8f0 !important;
}

.card-broker-booked {
  border-top: 1px solid #e2e8f0 !important;
}

.card-stocks {
  border-top: 1px solid #e2e8f0 !important;
}

.table-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #f1f5f9;
}

.table-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1e293b;
}

/* ==========================================================================
   TOP SUMMARY STRIP & TABLE HEADER REDESIGN (OPTION B)
   ========================================================================== */
.card-top-summary-strip {
  margin-bottom: 6px;
  background: #ffffff;
  border-radius: 4px;
}

.summary-top-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  white-space: nowrap;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  font-family: inherit;
}

.summary-top-table td {
  padding: 5px 6px !important;
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  font-size: 12px !important;
  font-family: inherit;
  line-height: 1.25;
}

.summary-top-table tr:hover td {
  background: #f1f5f9 !important;
}

.card-broker .summary-top-table {
  width: 100% !important;
  table-layout: fixed !important;
}

.card-strategy .summary-top-table {
  width: 100% !important;
}

/* Table 5: Summary Row directly above data headers */
.card-stocks thead tr.summary-top-tr td {
  padding: 5px 6px !important;
  background: #f8fafc !important;
  border-top: 1px solid #cbd5e1 !important;
  border-bottom: 2px solid #64748b !important;
  border-left: 1px solid #cbd5e1 !important;
  border-right: 1px solid #cbd5e1 !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  font-size: 12px !important;
  font-family: inherit;
  line-height: 1.25;
}

.card-stocks thead tr.summary-top-tr:hover td {
  background: #f1f5f9 !important;
}

/* Dark Navy Title Bar */
.table-navy-title-bar {
  background: #0b192c;
  color: #ffffff;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 4px;
  margin-bottom: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  min-height: 38px;
}

.table-navy-title-bar-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

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

.navy-title-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.navy-title-text {
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Sub-Tabs inside Navy Bar for Table 5 */
.navy-tabs-nav {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.navy-tabs-nav .stock-trade-tab-btn {
  background: rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.navy-tabs-nav .stock-trade-tab-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
}

.navy-tabs-nav .stock-trade-tab-btn.active {
  background: #2563eb;
  color: #ffffff;
  border-color: #3b82f6;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Table Filters Strip (Layer 3 for Table 5) */
.table-filters-strip {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 6px 10px;
  margin-bottom: 6px;
}

.table-filters-strip .filters-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-reset-filters {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  transition: all 0.15s ease;
  white-space: nowrap;
  height: 28px;
  line-height: 1;
  margin-left: auto;
}

.btn-reset-filters:hover {
  background: #f1f5f9;
  border-color: #3b82f6;
  color: #1d4ed8;
}

/* Tables: 14px font size for table data, number font same as text */
.table-scroll-container {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

.portfolio-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  white-space: nowrap;
  border: 1px solid #cbd5e1;
  font-family: inherit;
}

.portfolio-table th {
  padding: 5px 6px !important;
  font-weight: 700;
  text-align: right;
  border: 1px solid rgba(0, 0, 0, 0.12);
  user-select: none;
  font-size: 12px !important;
  letter-spacing: 0.02em;
  line-height: 1.25;
}

.portfolio-table th.col-text {
  text-align: left;
}

.portfolio-table th.sort-th {
  cursor: pointer;
}

.sort-arrow {
  display: inline-block;
  font-size: 0.7rem;
  margin-left: 4px;
  color: rgba(255, 255, 255, 0.75);
}

.sort-arrow.asc::after {
  content: "▲";
  color: #ffffff;
}

.sort-arrow.desc::after {
  content: "▼";
  color: #ffffff;
}

.portfolio-table td {
  padding: 4px 6px !important;
  border: 1px solid #e2e8f0;
  color: #1e293b;
  font-size: 12px !important;
  font-family: inherit;
  line-height: 1.25;
}

/* Mild Zebra Striping */
.portfolio-table tbody tr:nth-child(even) td {
  background-color: #f8fafc;
}

.portfolio-table tbody tr:nth-child(odd) td {
  background-color: #ffffff;
}

/* Airtable Warm Yellow Row Hover */
.portfolio-table tbody tr:hover td {
  background-color: #fefce8 !important;
}

.portfolio-table tfoot td {
  padding: 5px 6px !important;
  background: #f1f5f9;
  border-top: 2px solid #64748b;
  border-bottom: 3px double #64748b;
  font-weight: 700;
  color: #0f172a;
  font-size: 12px !important;
  font-family: inherit;
  line-height: 1.25;
}

/* Column Alignment & Data Formats - Number font same as text font */
.col-text {
  text-align: left !important;
  font-size: 12px !important;
}

.col-num {
  text-align: right !important;
  font-family: inherit !important;
  font-size: 12px !important;
}

.col-pct {
  text-align: right !important;
  font-family: inherit !important;
  font-weight: 600;
  font-size: 12px !important;
}

.col-expand {
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  text-align: center !important;
  padding: 2px 2px !important;
}

/* Custom Themed Table Headers */
/* Top Table (Strategy Level): Matching Grand Total row style */
.card-strategy thead th,
.card-strategy-booked thead th {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  padding: 5px 6px !important;
  border-top: 1px solid #cbd5e1 !important;
  border-bottom: 2px solid #64748b !important;
  border-left: 1px solid #cbd5e1 !important;
  border-right: 1px solid #cbd5e1 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  font-family: inherit;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.card-strategy thead th.sort-th:hover,
.card-strategy-booked thead th.sort-th:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

.card-strategy thead th .sort-arrow {
  color: #64748b !important;
}

.card-strategy thead th .sort-arrow.asc::after,
.card-strategy thead th .sort-arrow.desc::after {
  color: #0f172a !important;
}

/* Middle Table (Broker Level): Matching Grand Total row style */
.card-broker thead th,
.card-broker-booked thead th {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  padding: 5px 6px !important;
  border-top: 1px solid #cbd5e1 !important;
  border-bottom: 2px solid #64748b !important;
  border-left: 1px solid #cbd5e1 !important;
  border-right: 1px solid #cbd5e1 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  font-family: inherit;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.card-broker thead th.sort-th:hover,
.card-broker-booked thead th.sort-th:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

.card-broker thead th .sort-arrow {
  color: #64748b !important;
}

.card-broker thead th .sort-arrow.asc::after,
.card-broker thead th .sort-arrow.desc::after {
  color: #0f172a !important;
}

/* Bottom Table (Stock Level): Matching Broker / Strategy Grand Total row style */
.card-stocks thead th {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  padding: 5px 6px !important;
  border-top: 1px solid #cbd5e1 !important;
  border-bottom: 2px solid #64748b !important;
  border-left: 1px solid #cbd5e1 !important;
  border-right: 1px solid #cbd5e1 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  font-family: inherit;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.card-stocks thead th.sort-th:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

.card-stocks thead th .sort-arrow {
  color: #64748b !important;
}

.card-stocks thead th .sort-arrow.asc::after,
.card-stocks thead th .sort-arrow.desc::after {
  color: #0f172a !important;
}

/* Section Group Headers: EXACT SAME COLOR AS SUBHEADERS */
th.group-header {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center !important;
  padding: 4px 6px !important;
  line-height: 1.25;
}

.card-strategy th.group-header {
  background: #9d71d8 !important;
  color: #ffffff !important;
  border: 1px solid #8c5ec9 !important;
}

.card-broker th.group-header {
  background: #16b0d6 !important;
  color: #ffffff !important;
  border: 1px solid #0ea0c4 !important;
}

.card-stocks th.group-header {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

/* Realised Table (Strategy Realised): Soft Purple (#9d71d8) */
.card-realised thead th {
  background: #9d71d8 !important;
  color: #ffffff !important;
  border: 1px solid #8c5ec9 !important;
  font-size: 12px !important;
}

.card-realised thead th.sort-th:hover {
  background: #8c5ec9 !important;
  color: #ffffff !important;
}

.card-realised th.col-header-first,
.card-realised td.col-header-first {
  width: 125px !important;
  min-width: 125px !important;
  max-width: 125px !important;
  text-align: left !important;
}

/* Grid for Strategy and Broker side-by-side */
.strategy-broker-grid {
  display: flex;
  gap: 16px;
  align-items: stretch;
  flex-wrap: wrap;
  width: 100%;
}

#view-strategy-broker-row {
  margin-bottom: 8px !important;
}

.card-strategy,
.card-broker {
  display: flex !important;
  flex-direction: column !important;
}

.card-strategy {
  flex: 2;
  min-width: 640px;
}

.card-broker {
  flex: 1;
  min-width: 320px;
}

.card-strategy .table-scroll-container,
.card-broker .table-scroll-container {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  height: 100% !important;
}

#table-strategy-summary,
#table-broker-summary {
  height: 100% !important;
}

#table-strategy-summary tbody tr td,
#table-broker-summary tbody tr td {
  vertical-align: middle !important;
}

/* Grid for Broker and Realised side-by-side */
.broker-realised-grid {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 100%;
}

.table-scroll-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-width: 100%;
}

.portfolio-row-full {
  display: block !important;
  width: 100% !important;
  margin-bottom: 22px;
}

/* Standard Table Layout across all tables */
.portfolio-table {
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse;
  font-size: 12px !important;
  white-space: nowrap;
  border: 1px solid #cbd5e1;
  font-family: inherit;
}

.portfolio-table th,
.portfolio-table td {
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Expand / Collapse Chevron Toggle Column (Table 5) */
.portfolio-table th.col-expand,
.portfolio-table td.col-expand {
  width: 25px !important;
  min-width: 25px !important;
  max-width: 25px !important;
  text-align: center !important;
  padding: 2px !important;
}

#th-expand-all {
  cursor: pointer;
  user-select: none;
  font-size: 11px;
  color: #475569;
  transition: all 0.15s ease;
}

#th-expand-all:hover {
  color: #0284c7;
  background-color: #cbd5e1 !important;
}

/* Specific Table 1 Reactive Layout & Column Proportions */
#table-strategy-summary {
  width: 100% !important;
  min-width: 860px !important;
  max-width: 100% !important;
  table-layout: fixed !important;
}

.card-strategy th.col-header-first,
.card-strategy td.col-header-first {
  width: 13% !important;
  min-width: 95px !important;
  text-align: left !important;
}

.card-strategy th.col-breadth-split,
.card-strategy td.col-breadth-split {
  width: 14% !important;
  min-width: 125px !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

/* Bulls (Green) and Bears (Red) colored text */
.text-green,
.bulls-val {
  color: #16a34a !important;
  font-weight: 700 !important;
}

.text-red,
.bears-val {
  color: #dc2626 !important;
  font-weight: 700 !important;
}

.slash-sep {
  color: #64748b !important;
  font-weight: 700 !important;
  margin: 0 2px;
}

.card-strategy th.col-sentiment,
.card-strategy td.col-sentiment {
  width: 13% !important;
  min-width: 110px !important;
  text-align: center !important;
}

.card-strategy th.col-mktval,
.card-strategy td.col-mktval {
  width: 16% !important;
  min-width: 145px !important;
  text-align: right !important;
  overflow: visible !important;
}

.card-strategy th.col-ytd,
.card-strategy td.col-ytd {
  width: 14% !important;
  min-width: 130px !important;
  text-align: right !important;
  overflow: visible !important;
}

.card-strategy th.col-month,
.card-strategy td.col-month {
  width: 15% !important;
  min-width: 140px !important;
  text-align: right !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.card-strategy th.col-day,
.card-strategy td.col-day {
  width: 15% !important;
  min-width: 130px !important;
  text-align: right !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Specific Table 2: Broker Summary Reactive Layout */
#table-broker-summary {
  width: 100% !important;
  table-layout: fixed !important;
}

.card-broker th.col-header-first,
.card-broker td.col-header-first {
  width: 20% !important;
  min-width: 85px !important;
  text-align: left !important;
}

.card-broker th.col-invest,
.card-broker td.col-invest {
  width: 27% !important;
  min-width: 135px !important;
  text-align: right !important;
  overflow: visible !important;
}

.card-broker th.col-mktval,
.card-broker td.col-mktval {
  width: 29% !important;
  min-width: 135px !important;
  text-align: right !important;
  overflow: visible !important;
}

.card-broker th.col-day,
.card-broker td.col-day {
  width: 24% !important;
  min-width: 115px !important;
  text-align: right !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.card-realised th.col-header-first,
.card-realised td.col-header-first {
  width: 110px !important;
  min-width: 110px !important;
  max-width: 110px !important;
  text-align: left !important;
}

.card-stocks th.col-header-first,
.card-stocks td.col-header-first {
  width: 85px !important;
  min-width: 85px !important;
  max-width: 85px !important;
  text-align: left !important;
}

/* Breadth & Trend Columns */
.col-breadth-split {
  width: 75px !important;
  min-width: 75px !important;
  max-width: 75px !important;
  text-align: center !important;
  padding: 4px 2px !important;
  box-sizing: border-box;
}

.col-sentiment {
  width: 85px !important;
  min-width: 85px !important;
  max-width: 85px !important;
  text-align: center !important;
  box-sizing: border-box;
}

.col-trend,
.card-stocks th.col-trend,
.card-stocks td.col-trend {
  width: 75px !important;
  min-width: 75px !important;
  max-width: 75px !important;
  text-align: center !important;
  box-sizing: border-box;
}

.col-score,
.card-stocks th.col-score,
.card-stocks td.col-score {
  width: 85px !important;
  min-width: 85px !important;
  max-width: 85px !important;
  text-align: center !important;
  box-sizing: border-box;
}

/* Shared Standard Column Widths across all tables */
.col-invest {
  width: 110px !important;
  min-width: 110px !important;
  max-width: 110px !important;
}

.col-mktval {
  width: 110px !important;
  min-width: 110px !important;
  max-width: 110px !important;
}

.col-tax-detail {
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
}

.col-realized {
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
}

.col-overall {
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
}

.col-ytd {
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
}

.col-unreal-detail {
  width: 95px !important;
  min-width: 95px !important;
  max-width: 95px !important;
}

.col-month {
  width: 95px !important;
  min-width: 95px !important;
  max-width: 95px !important;
  text-align: right !important;
}

.col-day {
  width: 90px !important;
  min-width: 90px !important;
  max-width: 90px !important;
}

/* Collapsible Columns */
.col-collapse-hidden {
  display: none !important;
}

/* Simple Bold Names for Strategy, Broker, Stock */
.col-name {
  font-weight: 700;
  color: #0f172a;
  font-size: 12px !important;
}

/* Value Highlights */
.val-positive {
  color: #15803d !important;
  font-weight: 600;
}

.val-negative {
  color: #dc2626 !important;
  font-weight: 600;
}

.val-neutral {
  color: #64748b !important;
  font-weight: 500;
}

.val-zero-dim {
  color: #94a3b8 !important;
  font-weight: 400 !important;
}

/* Single-Line Value (No Decimals) & Percentage (#.#% in parens) */
.cell-single-line {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  white-space: nowrap;
  line-height: 1.25;
  font-size: 12px !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  overflow: visible !important;
}

.cell-single-line .change-val-num,
.cell-single-line .num-val {
  flex: 1;
  text-align: right !important;
  font-size: 12px !important;
  font-weight: 600;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  white-space: nowrap !important;
  overflow: visible !important;
}

.cell-single-line .change-val-pct,
.cell-single-line .pct-val {
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  text-align: right !important;
  font-size: 11px !important;
  font-weight: 600;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Stacked Change Value & Percentage Box - Font size 12 */
.cell-change-box {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  line-height: 1.25;
  gap: 1px;
}

.val-desktop {
  display: inline !important;
}

.val-mobile {
  display: none !important;
}

.change-val-num {
  font-size: 12px !important;
  font-weight: 600;
  line-height: 1.25;
}

.change-val-num.is-positive {
  color: #111827 !important; /* Black for positive value */
}

.change-val-num.is-negative {
  color: #dc2626 !important; /* Red for negative value */
}

.change-val-num.is-zero {
  color: #64748b !important;
}

.change-val-pct {
  font-size: 11px !important;
  font-weight: 600;
  line-height: 1.25;
}

.change-val-pct.is-positive {
  color: #16a34a !important; /* Green for positive pct */
}

.change-val-pct.is-negative {
  color: #dc2626 !important; /* Red for negative pct */
}

.change-val-pct.is-zero {
  color: #64748b !important;
}

/* Portfolio Top Tabs (Strategy Summary vs Broker Summary) */
.portfolio-top-tabs-nav {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

.portfolio-top-tab-btn {
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
}

.portfolio-top-tab-btn:hover {
  background: #f8fafc;
  color: #0f172a;
}

.portfolio-top-tab-btn.active.active-strategy {
  background: #9d71d8;
  color: #ffffff;
  border-color: #8c5ec9;
  box-shadow: 0 2px 4px rgba(157, 113, 216, 0.25);
}

.portfolio-top-tab-btn.active.active-broker {
  background: #16b0d6;
  color: #ffffff;
  border-color: #0ea0c4;
  box-shadow: 0 2px 4px rgba(22, 176, 214, 0.25);
}

/* Stock Trades Tabs (Open vs Booked vs All Trades: Same format as Refresh button) */
.stock-trades-tabs-nav {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.stock-trade-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  outline: none;
  white-space: nowrap;
}

.stock-trade-tab-btn:hover {
  background: #f8fafc;
  border-color: #3b82f6;
  color: #1d4ed8;
}

.stock-trade-tab-btn.active {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #64748b;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Strategy Badges */
.badge-strat-item {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.badge-strat-sip {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

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

.badge-strat-pms {
  background: #eef2ff;
  color: #4338ca;
  border: 1px solid #c7d2fe;
}

.badge-strat-ipo {
  background: #faf5ff;
  color: #7e22ce;
  border: 1px solid #e9d5ff;
}

.badge-strat-bonds {
  background: #ecfeff;
  color: #0e7490;
  border: 1px solid #a5f3fc;
}

.badge-strat-default {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

/* Broker Badges */
.badge-broker-item {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.badge-broker-fyers {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
}

.badge-broker-alice {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.badge-broker-definedge {
  background: #f5f3ff;
  color: #6d28d9;
  border: 1px solid #ddd6fe;
}

.badge-broker-dhan {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.badge-broker-groww {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.badge-broker-flat {
  background: #fefce8;
  color: #a16207;
  border: 1px solid #fef08a;
}

.badge-broker-shoonya {
  background: #f8fafc;
  color: #334155;
  border: 1px solid #cbd5e1;
}

.badge-broker-default {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

/* Stock Symbol Pill */
.stock-symbol-badge {
  display: inline-block;
  font-weight: 700;
  color: #0f172a;
  padding: 2px 8px;
  border-radius: 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  transition: all 0.15s ease;
}

.stock-symbol-cell:hover .stock-symbol-badge {
  background: #fff7ed;
  border-color: #fdba74;
  color: #ea580c;
}

.badge-fy {
  display: inline-block;
  padding: 1px 6px;
  background: #f1f5f9;
  color: #475569;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
}

.drilldown-badge {
  display: inline-block;
  background: #ff6600;
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.row-zero-holding {
  opacity: 0.75;
}

.row-zero-holding:hover {
  opacity: 1;
}

/* Drilldown Row & Sub-table */
.btn-expand-row {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.8rem;
  color: #64748b;
  padding: 2px 6px;
  border-radius: 4px;
  transition: transform 0.15s ease, color 0.15s ease;
}

.btn-expand-row:hover {
  color: #ff6600;
  background: #fff7ed;
}

.btn-expand-row.expanded {
  transform: rotate(90deg);
  color: #ff6600;
}

.drilldown-tr {
  background: #fafbfc;
}

.drilldown-container {
  padding: 12px 16px;
  border-left: 3px solid #ff6600;
  background: #fafbfc;
}

.drilldown-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #475569;
  margin-bottom: 8px;
}

.drilldown-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  overflow: hidden;
  font-family: inherit;
}

.drilldown-table th {
  background: #f1f5f9;
  padding: 6px 10px;
  font-weight: 600;
  color: #475569;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
  font-size: 12px;
}

.drilldown-table td {
  padding: 6px 10px;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
  font-size: 14px;
  font-family: inherit;
}

.drilldown-table tfoot td {
  padding: 6px 10px;
  background: #f8fafc;
  border-top: 2px solid #cbd5e1;
  color: #334155;
  font-size: 13px;
}

.badge-status {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
}

.badge-status.open {
  background: #dcfce7;
  color: #15803d;
}

.badge-status.close {
  background: #f1f5f9;
  color: #475569;
}

.badge-tax {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
}

.badge-tax.ltcg {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
}

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

/* Filters Bar */
.filters-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  color: #475569;
  font-weight: 500;
}

.filter-select {
  padding: 4px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #ffffff;
  color: #1e293b;
  font-size: 0.8rem;
  cursor: pointer;
  outline: none;
}

.filter-select:focus {
  border-color: #ff6600;
  box-shadow: 0 0 0 2px rgba(255, 102, 0, 0.15);
}

.filter-input {
  padding: 4px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 0.8rem;
  outline: none;
  width: 140px;
}

.filter-input:focus {
  border-color: #ff6600;
  box-shadow: 0 0 0 2px rgba(255, 102, 0, 0.15);
}

.filter-stats {
  font-size: 0.75rem;
  color: #64748b;
  padding: 3px 8px;
  background: #f1f5f9;
  border-radius: 4px;
}

/* Add Record Modal */
.modal-card {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  width: 100%;
  overflow: hidden;
}

.add-record-card {
  background: #ffffff !important;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-width: 580px;
  overflow: hidden;
  animation: scaleUpModal 0.2s ease-out;
}

.record-form {
  padding: 22px 24px;
  background: #ffffff;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.info-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #334155;
  letter-spacing: 0.01em;
}

.record-form .text-input,
.record-form .filter-select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 0.88rem;
  color: #1e293b;
  background: #ffffff;
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.record-form .text-input:focus,
.record-form .filter-select:focus {
  border-color: #0284c7;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.select-full {
  width: 100%;
}

.record-error {
  margin-top: 14px;
  padding: 10px 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 500;
}

.btn-save-record {
  background: #0284c7 !important;
  border-color: #0369a1 !important;
  color: #ffffff !important;
  font-weight: 600;
  padding: 8px 18px;
}

.btn-save-record:hover {
  background: #0369a1 !important;
  border-color: #075985 !important;
}

/* TradingView Chart Icon & Symbol Flex */
.stock-name-cell-wrap {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.stock-name-flex {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.stock-qty-subtext {
  font-size: 0.72rem;
  color: #64748b;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 600;
  line-height: 1.2;
}

.tv-chart-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  vertical-align: middle;
  transition: transform 0.15s ease;
}

.tv-chart-link:hover {
  transform: scale(1.12);
}

.tv-chart-link .chart-svg {
  display: block;
}

.tv-chart-link .chart-svg rect {
  transition: fill 0.15s ease, stroke 0.15s ease;
}

.tv-chart-link:hover .chart-svg rect {
  fill: #dbeafe;
  stroke: #60a5fa;
}

/* TradingView Symbols Edit Window Modal */
.tv-symbols-card {
  max-width: 680px;
  width: 95%;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.22);
  animation: scaleUpModal 0.2s ease-out;
}

.tv-symbols-table th {
  background: #f8fafc;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
  border-bottom: 1px solid #cbd5e1;
}

.tv-symbols-table td {
  padding: 8px 12px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 13px;
  vertical-align: middle;
}

.tv-symbols-table tbody tr:hover td {
  background: #f8fafc;
}

.tv-symbol-input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  background: #ffffff;
  color: #0f172a;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tv-symbol-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
  outline: none;
}

.tv-symbol-input.changed {
  border-color: #f59e0b;
  background-color: #fffbeb;
}

.btn-tv-test {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  color: #2563eb;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
}

.btn-tv-test:hover {
  background: #dbeafe;
  border-color: #93c5fd;
  color: #1d4ed8;
}

.btn-tv-save-row {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  color: #15803d;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-tv-save-row:hover {
  background: #dcfce7;
  border-color: #86efac;
}

.tv-symbols-feedback.success {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
}

.tv-symbols-feedback.error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

/* ==========================================================================
   MODULE-05: STRATEGY MOMENTUM, TREND & STRENGTH DASHBOARD STYLING
   ========================================================================== */

/* Strategy Breadth Sentiment Metrics Cards */
.strategy-breadth-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.breadth-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 14px 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.breadth-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
}

.breadth-card-title {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #64748b;
  margin-bottom: 6px;
}

.breadth-card-val {
  font-size: 1.6rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.1;
  font-feature-settings: "tnum";
}

.breadth-card-sub {
  font-size: 0.75rem;
  color: #94a3b8;
  margin-top: 6px;
}

/* Specific Card Borders */
.breadth-card.card-bulls {
  border-left: 4px solid #16a34a;
}

.breadth-card.card-bears {
  border-left: 4px solid #dc2626;
}

.breadth-card.card-ratio {
  border-left: 4px solid #0284c7;
}

.breadth-card.card-sentiment {
  border-left: 4px solid #8b5cf6;
}

/* Breadth Progress Bar */
.breadth-meter-wrap {
  width: 100%;
  height: 8px;
  background: #fee2e2;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 8px;
  display: flex;
}

.breadth-meter-bar {
  height: 100%;
  background: #16a34a;
  transition: width 0.4s ease;
}

/* Market Sentiment Badges */
.breadth-sentiment-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 700;
  width: fit-content;
}

.sentiment-bullish {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.sentiment-bearish {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

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

/* Strategy Toolbar & Filters */
.strategy-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.strategy-filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

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

.filter-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #475569;
  white-space: nowrap;
}

.search-item {
  min-width: 180px;
}

.search-input {
  padding: 5px 10px;
  font-size: 0.85rem;
  height: 32px;
  border-radius: 6px;
}

/* Strategy Wide Table */
.card-strategy-ranking {
  margin-top: 8px;
}

.wide-table {
  min-width: 1250px;
}

.col-rank,
.col-delta,
.col-trend,
.col-score {
  width: 78px !important;
  min-width: 78px !important;
  max-width: 78px !important;
  text-align: center !important;
  vertical-align: middle !important;
  padding: 5px 3px !important;
  box-sizing: border-box;
}

.col-score {
  font-weight: 700 !important;
  text-align: center !important;
  vertical-align: middle !important;
}

.col-score span {
  display: inline-block;
  font-weight: 700 !important;
  text-align: center;
}

/* Rank Movement Badges */
.rank-delta-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  font-feature-settings: "tnum";
}

.rank-delta-tag.delta-up {
  color: #15803d;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}

.rank-delta-tag.delta-down {
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
}

.rank-delta-tag.delta-flat {
  color: #64748b;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

/* Strategy Tag Badges */
.strat-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.strat-tag.strat-IPO { background: #ede9fe; color: #6d28d9; border: 1px solid #ddd6fe; }
.strat-tag.strat-SIP { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
.strat-tag.strat-Bonds { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.strat-tag.strat-PMS { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.strat-tag.strat-MIB { background: #fae8ff; color: #86198f; border: 1px solid #f5d0fe; }

/* Badge Columns */
.col-badge {
  text-align: center;
  white-space: nowrap;
}

/* Trend Badges */
.trend-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  max-width: 72px;
  height: 22px;
  box-sizing: border-box;
  padding: 0 3px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.trend-tag.trend-bullish {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.trend-tag.trend-bearish {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

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

/* Breadth Sentiment Badges */
.breadth-sentiment-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.breadth-sentiment-tag.sentiment-bullish {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.breadth-sentiment-tag.sentiment-bearish {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

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



.header-split-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.breadth-dominance-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 2px 2px;
}

.breadth-counts-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

.breadth-bull-val {
  color: #16a34a !important;
  text-align: left !important;
  font-weight: 700;
}

.breadth-bear-val {
  color: #dc2626 !important;
  text-align: right !important;
  font-weight: 700;
}

.ratio-bar-wrap {
  display: flex;
  height: 7px;
  width: 100%;
  border-radius: 9999px;
  overflow: hidden;
  background: #e2e8f0;
  margin-top: 3px;
}

.ratio-bar-bull {
  background: #16a34a;
  height: 100%;
  transition: width 0.25s ease;
}

.ratio-bar-bear {
  background: #dc2626;
  height: 100%;
  transition: width 0.25s ease;
}

/* Strength Badges - Uniform Fixed Box Size */
.strength-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 86px;
  min-width: 86px;
  max-width: 86px;
  height: 24px;
  box-sizing: border-box;
  padding: 0 4px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

/* Strength Badges - Bullish Variants (Text Green #166534) */
.strength-tag.strength-bull-strong {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.strength-tag.strength-bull-weak {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #dcfce7;
}

.strength-tag.strength-bull-extreme,
.strength-tag.strength-bull-over {
  background: #fff7ed;
  color: #166534;
  border: 1px solid #fed7aa;
}

/* Strength Badges - Bearish Variants (Text Red #991b1b) */
.strength-tag.strength-bear-strong {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.strength-tag.strength-bear-weak {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fee2e2;
}

.strength-tag.strength-bear-extreme,
.strength-tag.strength-bear-over {
  background: #fefce8;
  color: #991b1b;
  border: 1px solid #fef08a;
}

.strength-tag.strength-neutral {
  background: #f8fafc;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

/* Score Visual Cell */
.score-cell-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.score-num {
  font-weight: 700;
  width: 50px;
  text-align: right;
  font-feature-settings: "tnum";
}

.score-bar-bg {
  flex: 1;
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}

.score-bar-fill {
  position: absolute;
  height: 100%;
  top: 0;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.score-bar-fill.fill-pos {
  left: 50%;
  background: #16a34a;
}

.score-bar-fill.fill-neg {
  right: 50%;
  background: #dc2626;
}

.score-bar-center {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #94a3b8;
}

/* Delete Record Button & Confirmation Modal */
.btn-delete-record {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  padding: 2px 6px;
  font-size: 0.85rem;
  line-height: 1;
  color: #94a3b8;
  transition: all 0.15s ease;
}

.btn-delete-record:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
  transform: scale(1.1);
}

.delete-record-card {
  max-width: 480px;
  width: 92%;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.22);
}

.delete-record-summary {
  margin: 16px 0 20px 0;
  padding: 12px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  font-size: 0.82rem;
  text-align: left;
}

.delete-summary-item {
  display: flex;
  flex-direction: column;
}

.delete-summary-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  font-weight: 600;
}

.delete-summary-val {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0f172a;
}


.val-single {
  font-size: 12px !important;
  font-weight: 600;
  color: #111827 !important;
}

/* ==========================================================================
   Mild Colors for Expandable & Collapsed Columns in Line with Header Colors
   ========================================================================== */

/* Strategy Summary (Table 1: Soft Purple / Lilac #9d71d8) */
.card-strategy thead th.col-tax-detail,
.card-strategy thead th.col-unreal-detail {
  background: #8e5ec9 !important;
  border-color: #7e4eb9 !important;
  color: #ffffff !important;
}

.card-strategy td.col-tax-detail,
.card-strategy td.col-unreal-detail {
  background-color: rgba(157, 113, 216, 0.08) !important;
}

.card-strategy tbody tr:nth-child(even) td.col-tax-detail,
.card-strategy tbody tr:nth-child(even) td.col-unreal-detail {
  background-color: rgba(157, 113, 216, 0.12) !important;
}

.card-strategy tbody tr:hover td.col-tax-detail,
.card-strategy tbody tr:hover td.col-unreal-detail {
  background-color: rgba(157, 113, 216, 0.20) !important;
}

.card-strategy tfoot td.col-tax-detail,
.card-strategy tfoot td.col-unreal-detail {
  background-color: #ede5f8 !important;
}

.card-strategy td.col-realized,
.card-strategy td.col-day {
  background-color: rgba(157, 113, 216, 0.03);
}

/* Broker Summary (Table 2: Bright Aqua / Cyan #16b0d6) */
.card-broker thead th.col-tax-detail,
.card-broker thead th.col-unreal-detail {
  background: #0ea0c4 !important;
  border-color: #0c8fae !important;
  color: #ffffff !important;
}

.card-broker td.col-tax-detail,
.card-broker td.col-unreal-detail {
  background-color: rgba(22, 176, 214, 0.08) !important;
}

.card-broker tbody tr:nth-child(even) td.col-tax-detail,
.card-broker tbody tr:nth-child(even) td.col-unreal-detail {
  background-color: rgba(22, 176, 214, 0.12) !important;
}

.card-broker tbody tr:hover td.col-tax-detail,
.card-broker tbody tr:hover td.col-unreal-detail {
  background-color: rgba(22, 176, 214, 0.20) !important;
}

.card-broker tfoot td.col-tax-detail,
.card-broker tfoot td.col-unreal-detail {
  background-color: #daf3f8 !important;
}

.card-broker td.col-realized,
.card-broker td.col-day {
  background-color: rgba(22, 176, 214, 0.03);
}

/* Stock Realised Holding Details (Table 5: Matches Broker Card Theme) */
.card-stocks td.col-tax-detail,
.card-stocks td.col-unreal-detail {
  background-color: rgba(22, 176, 214, 0.08) !important;
}

.card-stocks tbody tr:nth-child(even) td.col-tax-detail,
.card-stocks tbody tr:nth-child(even) td.col-unreal-detail {
  background-color: rgba(22, 176, 214, 0.12) !important;
}

.card-stocks tbody tr:hover td.col-tax-detail,
.card-stocks tbody tr:hover td.col-unreal-detail {
  background-color: rgba(22, 176, 214, 0.20) !important;
}

.card-stocks tfoot td.col-tax-detail,
.card-stocks tfoot td.col-unreal-detail {
  background-color: #daf3f8 !important;
}

.card-stocks td.col-realized,
.card-stocks td.col-day {
  background-color: rgba(22, 176, 214, 0.03);
}

/* ========================================================================= */
/* MOBILE VIEW ONLY (<= 768px): Clean 3-Column Layout, Normal Fonts, Full Values */
/* ========================================================================= */
@media (max-width: 768px) {
  /* Header: Brand title, Fyers capsule, and Logout button */
  .header {
    padding: 0 10px;
    height: 44px;
    min-height: 44px;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .brand-title {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
  }

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

  .broker-capsule {
    padding: 3px 8px !important;
    font-size: 0.78rem !important;
  }

  .btn-logout {
    padding: 3px 10px !important;
    font-size: 0.75rem !important;
  }

  .tabs-nav-bar {
    padding: 0 10px;
    min-height: 36px;
  }

  .tab-nav-btn {
    padding: 6px 12px;
    font-size: 0.85rem !important;
  }

  .tab-view-container {
    padding: 8px 6px;
  }

  /* Portfolio Toolbar */
  .portfolio-toolbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
    width: 100% !important;
  }

  /* Market Section */
  .market-section-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: 100% !important;
  }

  .market-section-title {
    display: block !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: #475569 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding-left: 2px !important;
  }

  .portfolio-benchmarks {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
  }

  /* Portfolio Day Value & % - Full Width Prominent Card */
  .bm-portfolio-btn {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 6px 12px !important;
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
  }

  .bm-portfolio-btn .bm-label {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
  }

  .bm-portfolio-btn .bm-val-amt {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    margin: 0 auto 0 8px !important;
  }

  .bm-portfolio-btn .bm-badge {
    font-size: 0.82rem !important;
    padding: 2px 8px !important;
  }

  /* NSE, Alpha, GoldBees - 3 Equal Columns */
  .market-sub-benchmarks {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
    width: 100% !important;
  }

  .market-sub-benchmarks .benchmark-card-btn {
    width: 100% !important;
    padding: 5px 4px !important;
    font-size: 0.78rem !important;
    justify-content: center !important;
    text-align: center !important;
    min-width: 0 !important;
    gap: 4px !important;
    border-radius: 5px !important;
  }

  .market-sub-benchmarks .bm-label {
    font-size: 0.76rem !important;
    font-weight: 600 !important;
  }

  .market-sub-benchmarks .bm-badge {
    font-size: 0.74rem !important;
    padding: 1px 4px !important;
  }

  /* Under Portfolio Tab: Sync Time and Refresh button ONLY */
  .portfolio-actions-right {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    gap: 8px !important;
  }

  .sync-tag,
  #portfolio-sync-tag {
    font-size: 0.74rem !important;
    color: #64748b !important;
    background: #f1f5f9 !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 1 auto !important;
  }

  .portfolio-actions {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
  }

  /* Strictly hide Trade, Symbol, and Export buttons on mobile */
  #btn-portfolio-add-record,
  #btn-portfolio-tv-symbols,
  #btn-portfolio-export {
    display: none !important;
  }

  #btn-portfolio-refresh {
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 10px !important;
    font-size: 0.78rem !important;
    border-radius: 4px !important;
    line-height: 1.2 !important;
  }

  /* GRID: Top Row Stacking */
  .strategy-broker-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .card-strategy,
  .card-broker,
  .table-card-full {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 6px 4px !important;
    border-radius: 6px !important;
  }

  /* Card Navy Title Bars */
  .table-navy-title-bar {
    padding: 4px 8px !important;
    font-size: 0.8rem !important;
    min-height: unset !important;
  }

  .navy-title-text {
    font-size: 0.8rem !important;
  }

  /* ========================================================================= */
  /* RESPONSIVE TABLE WIDTHS: FULL WIDTH, FIXED LAYOUT                         */
  /* ========================================================================= */
  #table-strategy-summary,
  #table-broker-summary,
  #table-stocks,
  .card-strategy .portfolio-table,
  .card-broker .portfolio-table,
  .card-stocks .portfolio-table,
  .summary-top-table,
  .stock-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  .table-scroll-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* SUMMARY ROW ON TOP: HIDE THE WORD "SUMMARY" IN FIRST COLUMN */
  .summary-label-desktop {
    display: none !important;
  }

  /* NORMAL SIZE FONTS FOR HEADERS AND CELLS */
  .card-strategy thead th,
  .card-broker thead th,
  .card-stocks thead th,
  .portfolio-table thead th,
  .portfolio-table th,
  .summary-top-table th,
  .summary-top-table td,
  th.sort-th,
  th.col-header-first,
  th.col-sentiment,
  th.col-mktval,
  th.col-day,
  th.col-trend {
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 4px 4px !important;
    line-height: 1.25 !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .portfolio-table td {
    font-size: 11.5px !important;
    padding: 4px 4px !important;
    line-height: 1.25 !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  /* Financial Number & Percentage Containers: Full Values, Normal Size */
  .cell-single-line,
  .change-box-flex {
    display: inline-flex !important;
    align-items: baseline !important;
    justify-content: flex-end !important;
    gap: 3px !important;
    width: 100% !important;
  }

  .cell-single-line .change-val-num,
  .cell-single-line .num-val,
  .change-val-num {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
  }

  .cell-single-line .change-val-pct,
  .cell-single-line .pct-val,
  .change-val-pct {
    font-size: 10.5px !important;
    line-height: 1.2 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding-left: 0 !important;
  }

  .col-name {
    font-size: 11.5px !important;
    font-weight: 700 !important;
  }

  /* ========================================================================= */
  /* STRATEGY SUMMARY TABLE (TABLE 1): 3 COLUMNS ONLY (Strategy | Sentiment | Day) */
  /* ========================================================================= */
  .card-strategy .col-breadth-split,
  .card-strategy .col-mktval,
  .card-strategy .col-ytd,
  .card-strategy .col-month {
    display: none !important;
  }

  .card-strategy th.col-header-first,
  .card-strategy td.col-header-first {
    width: 32% !important;
    text-align: left !important;
  }

  .card-strategy th.col-sentiment,
  .card-strategy td.col-sentiment {
    width: 30% !important;
    text-align: center !important;
  }

  .card-strategy th.col-day,
  .card-strategy td.col-day {
    width: 38% !important;
    text-align: right !important;
  }

  /* ========================================================================= */
  /* BROKER SUMMARY TABLE (TABLE 2): 3 COLUMNS ONLY (Broker | Market Value | Day) */
  /* ========================================================================= */
  .card-broker .col-invest {
    display: none !important;
  }

  .card-broker th.col-header-first,
  .card-broker td.col-header-first {
    width: 28% !important;
    text-align: left !important;
  }

  .card-broker th.col-mktval,
  .card-broker td.col-mktval {
    width: 38% !important;
    text-align: right !important;
  }

  .card-broker th.col-day,
  .card-broker td.col-day {
    width: 34% !important;
    text-align: right !important;
  }

  /* ========================================================================= */
  /* STOCK SUMMARY TABLE (TABLE 5): 3 COLUMNS ONLY (Script | Trend | Day)      */
  /* ========================================================================= */
  .card-stocks .col-expand,
  .card-stocks .col-score,
  .card-stocks .col-invest,
  .card-stocks .col-mktval,
  .card-stocks .col-overall,
  .card-stocks .col-ytd,
  .card-stocks .col-month {
    display: none !important;
  }

  .card-stocks th.col-header-first,
  .card-stocks td.col-header-first {
    width: 38% !important;
    text-align: left !important;
  }

  .card-stocks th.col-trend,
  .card-stocks td.col-trend {
    width: 26% !important;
    text-align: center !important;
  }

  .card-stocks th.col-day,
  .card-stocks td.col-day {
    width: 36% !important;
    text-align: right !important;
  }

  /* Stock Sub-Tabs */
  .table-navy-title-bar-flex {
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 4px 8px !important;
  }

  .stock-trades-tabs-nav .stock-trade-tab-btn {
    padding: 3px 7px !important;
    font-size: 11px !important;
    border-radius: 4px !important;
  }

  /* Stock Filters: Row 1 (Strategy, Broker), Row 2 (Search, Reset) */
  .table-filters-strip {
    padding: 5px 6px !important;
  }

  .filters-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center !important;
  }

  .filter-group-tax,
  .filter-group-trend {
    display: none !important;
  }

  .filter-group-strategy,
  .filter-group-broker {
    flex: 1 1 calc(50% - 4px) !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  .filter-group-strategy label,
  .filter-group-broker label {
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  .filter-group-strategy .filter-select,
  .filter-group-broker .filter-select {
    flex: 1 !important;
    padding: 2px 4px !important;
    font-size: 11px !important;
    height: 26px !important;
  }

  .filter-search-group {
    flex: 1 1 calc(60% - 4px) !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  .filter-search-group label {
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  .filter-search-group .filter-input {
    flex: 1 !important;
    padding: 2px 4px !important;
    font-size: 11px !important;
    height: 26px !important;
  }

  .btn-reset-filters {
    flex: 1 1 calc(35% - 4px) !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    height: 26px !important;
    justify-content: center !important;
    margin-left: 0 !important;
  }

  /* Sentiment & Trend Tags */
  .breadth-sentiment-tag,
  .trend-tag {
    font-size: 10px !important;
    padding: 2px 5px !important;
    border-radius: 4px !important;
    line-height: 1.2 !important;
    display: inline-block !important;
  }

  /* Script Column: Name, SVG Chart Icon, Qty Subtext */
  .stock-name-cell-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
  }

  .stock-name-flex {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  .tv-chart-link .chart-svg {
    width: 14px !important;
    height: 14px !important;
  }

  .stock-qty-subtext {
    font-size: 9.5px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    line-height: 1.1 !important;
  }

  .sort-arrow {
    font-size: 8px !important;
    margin-left: 2px !important;
  }
}