/* ============================================
   PAGES: Trading Records Dashboard
   ============================================ */

/* โ”€โ”€ Trade Records Header Buttons โ”€โ”€ */
.tr-header-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--color-primary-light);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.tr-header-btn:hover {
  background: var(--surface-3);
  border-color: var(--border);
  color: var(--color-primary-light);
}
.tr-header-btn.tr-header-btn-icon {
  padding: 7px 10px;
  gap: 0;
}



/* =================== Layout =================== */

/* Main container rendered by JS */
.trading-records-dashboard {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 32px;
}

.tr-dashboard {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-bottom: 32px;
}

/* โ”€โ”€ Pagination โ”€โ”€ */
.tr-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface-2, rgba(255,255,255,0.02));
  flex-wrap: wrap;
  gap: 8px;
}
/* Label "50 / page · N records" — standard UI font (mono looked out of place) */
.tr-pg-label {
  font: 400 12.5px/1 var(--font-sans, 'Inter', sans-serif);
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.tr-pagination .btn.active,
.tr-page-btn.active {
  background: var(--color-primary) !important;
  color: var(--surface-3, #111) !important;
  border-color: var(--color-primary) !important;
  font-weight: 700;
}

/* Light mode: dark bg needs white text */
html[data-theme="light"] .tr-page-btn.active {
  color: #FFFFFF !important;
}

/* โ”€โ”€ No-accounts empty state โ”€โ”€ */
.tr-no-accounts {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  grid-column: 1 / -1;
}

/* ============================================
   Two-Column Row: Performance Overview + RR vs Win Rate
   ============================================ */

.journal-two-col-row {
  display: grid;
  grid-template-columns: 55% 45%;
  gap: 24px;
  margin-bottom: 0;
  align-items: start;
}

.journal-two-col-left,
.journal-two-col-right {
  min-width: 0;
}

.journal-two-col-left .stats-section,
.journal-two-col-right .tr-section {
  height: 100%;
}

@media (max-width: 1024px) {
  .journal-two-col-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .journal-two-col-row {
    gap: 16px;
  }
}

.tr-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  padding: 24px;
  box-shadow: var(--shadow);
}

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

.tr-section-title {
  font-size: var(--font-size-xl, 1.15rem);
  font-weight: var(--font-weight-bold, 700);
  color: var(--text);
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.tr-section-title i {
  color: var(--color-primary, var(--color-primary));
}

.tr-section-header .tr-section-title {
  margin-bottom: 0;
}

/* =================== Account Cards =================== */

.tr-account-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  padding: 18px;
  border-top-width: 3px;
  transition: var(--transition, all 0.2s ease);
}

.tr-account-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.tr-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.tr-card-name {
  font-size: var(--font-size-base, 0.95rem);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--text);
}

.tr-status-badge {
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 600;
}
.tr-status-live    { background: rgba(34, 197, 94,0.15); color: var(--color-success); border: 1px solid rgba(34, 197, 94,0.3); }
.tr-status-offline { background: rgba(90,100,120,0.15); color: var(--text-dim); border: 1px solid rgba(90,100,120,0.3); }
.tr-status-paused  { background: rgba(245, 158, 11,0.15);  color: var(--color-warning); border: 1px solid rgba(245, 158, 11,0.3); }
.tr-status-off     { background: rgba(239, 68, 68,0.15);   color: var(--color-danger); border: 1px solid rgba(239, 68, 68,0.3); }
.tr-status-funded  { background: rgba(255,255,255,0.15); color: var(--color-primary); }

.tr-card-balance { display: flex; flex-direction: column; gap: 4px; }
.tr-bal-label { font-size: 0.75rem; color: var(--text-dim); }
.tr-bal-value { font-size: 1.5rem; font-weight: 700; }

/* =================== Stats Grid =================== */

.tr-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.tr-stat-card {
  background: var(--surface-2, rgba(255,255,255,0.04));
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: var(--transition, all 0.2s ease);
}

.tr-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.tr-stat-icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 1.2rem;
  color: var(--color-primary, var(--color-primary));
  flex-shrink: 0;
}

.tr-stat-content, .tr-stat-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tr-stat-label   { font-size: 0.72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.4px; }
.tr-stat-val, .tr-stat-value { font-size: 1.15rem; font-weight: 700; color: var(--text); white-space: nowrap; }
.tr-stat-value.positive { color: var(--color-success) !important; }
.tr-stat-value.negative { color: var(--color-danger) !important; }

/* =================== Colors =================== */

.tr-positive { color: var(--color-success) !important; font-weight: 600; }
.tr-negative { color: var(--color-danger) !important; font-weight: 600; }

/* =================== Trades Table =================== */

.tr-table-wrap {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--border);
  padding-bottom: 6px;
  /* Custom scrollbar โ€” thinner + styled */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.35) transparent;
}

.tr-table-wrap::-webkit-scrollbar {
  height: 5px;
}
.tr-table-wrap::-webkit-scrollbar-track {
  background: transparent;
  margin: 0 8px;
}
.tr-table-wrap::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.35);
  border-radius: 99px;
}
.tr-table-wrap::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.6);
}

.tr-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 680px;
}

.tr-table thead {
  background: rgba(255,255,255,0.02);
}

.tr-table th {
  padding: var(--table-head-pad-y) var(--table-cell-pad-x);
  text-align: left;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
  border-radius: 0;
}

.tr-table tbody tr {
  transition: background 0.15s;
}
.tr-table tbody td {
  border-bottom: 1px solid var(--border);
}
.tr-table tbody tr:last-child td { border-bottom: none; }
.tr-table tbody tr:hover { background: var(--surface-2, rgba(255,255,255,0.03)); }

.tr-table td {
  /* ตัวฐาน — ใช้กับ .tr-table ที่อยู่ "นอก" .tr-journal ด้วย (เช่น ตารางใน
     day-popup ของ Performance Calendar) จึงต้องอ้าง token เดียวกัน ไม่งั้น
     ป๊อปอัปปฏิทินจะแน่นกว่าตารางหลักอีกที่หนึ่ง */
  padding: var(--table-cell-pad-y) var(--table-cell-pad-x);
  font-size: var(--table-font-size);
  color: var(--text);
}

.tr-time-cell { font-size: 0.75rem !important; color: var(--text-dim) !important; white-space: nowrap; }

/* ── ความสมมาตรของแถว ────────────────────────────────────────────────────
   ปัญหาเดิม: คอลัมน์ข้อความ (Message / Opened by / Closed by) ไม่มีเพดานความกว้าง
   ข้อความอย่าง "Reverse Copy Close" จึงตัดเป็น 3 บรรทัด ทำให้แถวนั้นสูงกว่าแถวอื่น
   ~3 เท่า ตารางอ่านยากเพราะความสูงแถวไม่คงที่ (สแกนสายตาลงล่างไม่ได้)
   วิธีแก้: บรรทัดเดียว + ellipsis ให้ "ทุกแถวสูงเท่ากันเสมอ" ค่าเต็มอ่านได้จาก
   title เมื่อเอาเมาส์ชี้ — ไม่มีข้อมูลหายไป แลกกับความสม่ำเสมอที่ใช้มอนิเตอร์ได้จริง */
.tr-msg-cell {
  color: var(--text-dim);
  font-size: 0.82rem;
  max-width: 168px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ⚠️ ห้ามใส่ height/padding ตายตัวให้ตารางนี้อีก
   เคยใส่ height:42px + padding 12px ไว้ตรงนี้ แล้วได้ผลว่า Trade Records แน่นกว่า
   Webhook/Copy Trading อย่างเห็นได้ชัด ทั้งที่เป็นหน้าเดียวกันในเว็บเดียวกัน
   ขนาดแถวของทุกตารางคุมด้วย --table-cell-pad-* ใน components/_tables.css ที่เดียว
   (และกฎที่ "ชนะ" จริงของตารางนี้คือ `.tr-journal table.tr-table td` ด้านล่างสุด
    ไม่ใช่ `.tr-table td` — specificity สูงกว่า ต้องไปแก้ที่นั่นด้วยเสมอ) */

.tr-dir-badge, .tr-res-badge {
  padding: 3px 9px; border-radius: 7px;
  font-size: 0.72rem; font-weight: 600; display: inline-block;
}
.tr-dir-buy    { background: rgba(34, 197, 94,0.15); color: var(--color-success); }
.tr-dir-sell   { background: rgba(239, 68, 68,0.15);  color: var(--color-danger); }
.tr-res-win    { background: rgba(34, 197, 94,0.15); color: var(--color-success); }
.tr-res-loss   { background: rgba(239, 68, 68,0.15);  color: var(--color-danger); }
.tr-res-open   { background: rgba(255,255,255,0.15); color: var(--color-primary); }
.tr-res-breakeven { background: rgba(142,153,176,0.15); color: var(--text-dim); }

/* โ”€โ”€ Record Type badge โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */
.tr-type-badge {
  padding: 3px 9px; border-radius: 7px;
  font-size: 0.70rem; font-weight: 600; display: inline-block; white-space: nowrap;
}
.tr-type-trade      { background: rgba(255,255,255,0.15); color: var(--color-primary); }
.tr-type-deposit    { background: rgba(34, 197, 94,0.18); color: var(--color-success); }
.tr-type-withdrawal { background: rgba(239, 68, 68,0.18);  color: var(--color-danger); }
.tr-type-balance    { background: rgba(245, 158, 11,0.18); color: var(--color-warning); }

/* =================== Empty State =================== */

.tr-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-dim);
}
.tr-empty i    { font-size: 2.2rem; margin-bottom: 12px; display: block; opacity: 0.5; }
.tr-empty p    { margin: 0; font-size: 0.9rem; }

/* =================== Responsive =================== */

@media (max-width: 768px) {
  .tr-cards-grid  { grid-template-columns: 1fr; }
  .tr-stats-grid  { grid-template-columns: repeat(2, 1fr); }
  .tr-section     { padding: 16px; }
}
@media (max-width: 480px) {
  .tr-stats-grid  { grid-template-columns: 1fr; }
}

/* =================== Performance Calendar =================== */

.cal-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.cal-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cal-month-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  flex: 1;
  text-align: center;
}

.cal-nav-btn {
  background: var(--surface-2, rgba(255,255,255,0.04));
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 0.82rem;
  transition: var(--transition, all 0.2s ease);
  flex-shrink: 0;
}
.cal-nav-btn:hover {
  background: rgba(255,255,255,0.12);
  color: var(--primary-color, var(--color-primary));
  border-color: var(--primary-color, var(--color-primary));
}

.cal-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
}

.cal-summary-item {
  font-size: 0.8rem;
  color: var(--text-dim);
}
.cal-summary-item strong { color: var(--text); }

.cal-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cal-instrument-filter {
  background: var(--surface-2, rgba(255,255,255,0.04));
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.82rem;
  color: var(--text);
  cursor: pointer;
  outline: none;
}
.cal-instrument-filter:focus { border-color: var(--primary-color, var(--color-primary)); }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cal-weekday {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 6px 0;
}

.cal-cell {
  min-height: 64px;
  background: var(--surface-2, rgba(255,255,255,0.03));
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 7px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  transition: background 0.15s;
}

.cal-cell-empty {
  background: transparent;
  border-color: transparent;
}

.cal-cell-profit {
  background: rgba(34, 197, 94,0.07);
  border-color: rgba(34, 197, 94,0.25);
}

.cal-cell-loss {
  background: rgba(239, 68, 68,0.07);
  border-color: rgba(239, 68, 68,0.25);
}

/* Clickable day cells */
.cal-cell-clickable {
  cursor: pointer;
  user-select: none;
}
.cal-cell-clickable:hover {
  filter: brightness(1.2);
  transform: scale(1.03);
  z-index: 1;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
.cal-cell-clickable:active {
  transform: scale(0.98);
}

/* Calendar day popup row hover */
.cal-popup-row:hover td {
  background: rgba(255,255,255,0.06) !important;
}

.cal-cell-today {
  border-color: var(--primary-color, var(--color-primary)) !important;
  box-shadow: inset 0 0 0 1px var(--primary-color, var(--color-primary));
}

.cal-day-num {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-dim);
}

.cal-pnl {
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
}

.cal-trade-count {
  font-size: 0.65rem;
  color: var(--text-dim);
}

.positive { color: var(--color-success) !important; font-weight: 600; }
.negative { color: var(--color-danger) !important; font-weight: 600; }

@media (max-width: 600px) {
  .cal-cell     { min-height: 48px; padding: 4px 5px; }
  .cal-pnl      { font-size: 0.65rem; }
  .cal-trade-count { display: none; }
}

/* =================== Add Account Card =================== */

.tr-add-account-card {
  background: var(--surface-2, rgba(255,255,255,0.04));
  border: 2px dashed var(--border) !important;
  border-top-color: transparent !important;
  border-radius: var(--radius, 12px);
  padding: 18px;
  cursor: pointer;
  transition: var(--transition, all 0.2s ease);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 130px;
}

.tr-add-account-card:hover {
  border-color: var(--primary-color, var(--color-primary)) !important;
  background: rgba(255, 255, 255, 0.07);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.15);
}

.tr-add-account-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}

.tr-add-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  color: var(--primary-color, var(--color-primary));
  transition: var(--transition, all 0.2s ease);
}

.tr-add-account-card:hover .tr-add-icon {
  background: rgba(255, 255, 255, 0.22);
}

.tr-add-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dim);
}

/* =================== Add Account Modal =================== */

.tr-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.tr-modal {
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius, 14px);
  width: 100%;
  max-width: 420px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  animation: tr-modal-in 0.2s ease;
}

@keyframes tr-modal-in {
  from { opacity: 0; transform: scale(0.95) translateY(-8px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);     }
}

.tr-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
}

.tr-modal-header h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tr-modal-header h3 i { color: var(--primary-color, var(--color-primary)); }

.tr-modal-close {
  background: none; border: none;
  width: 30px; height: 30px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition, all 0.2s);
}
.tr-modal-close:hover { background: var(--surface-2); color: var(--text); }

.tr-modal-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }

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

.tr-form-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.tr-form-input {
  background: var(--surface-2, rgba(255,255,255,0.04));
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 0.9rem;
  color: var(--text);
  outline: none;
  width: 100%;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.tr-form-input:focus { border-color: var(--primary-color, var(--color-primary)); box-shadow: var(--focus); }

.tr-modal-footer {
  padding: 14px 20px 18px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
}

.tr-modal-error {
  margin: 0 20px 14px;
  padding: 9px 13px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  color: var(--color-danger);
  font-size: 0.82rem;
}

/* =================== Calendar Navigation =================== */

.cal-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cal-instrument-filter {
  background: var(--surface-2, rgba(255,255,255,0.04));
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.82rem;
  color: var(--text);
  cursor: pointer;
  outline: none;
}
.cal-instrument-filter:focus { border-color: var(--primary-color, var(--color-primary)); }

.cal-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.cal-nav-btn {
  background: var(--surface-2, rgba(255,255,255,0.04));
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 0.82rem;
  transition: var(--transition, all 0.2s ease);
  flex-shrink: 0;
}
.cal-nav-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--primary-color, var(--color-primary));
  border-color: var(--primary-color, var(--color-primary));
}

/* =================== RR vs Win Rate Chart =================== */

.rr-chart-hint {
  font-size: 0.75rem;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 5px;
}
.rr-chart-hint i { color: var(--color-warning); }

.rr-chart-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}

.rr-chart-svg-wrap {
  width: 100%;
  background: var(--surface-2, rgba(255,255,255,0.03));
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.rr-svg {
  width: 100%;
  height: auto;
  display: block;
}

.rr-dot {
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
  transform-origin: center;
}
.rr-dot:hover {
  opacity: 1 !important;
  transform: scale(1.8);
}

.rr-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.rr-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text-dim);
}

.rr-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.rr-legend-label {
  font-weight: 600;
  color: var(--text);
}

.rr-legend-val {
  color: var(--text-dim);
}

.rr-tooltip-box {
  position: absolute;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #f1f5f9;
  padding: 6px 12px;
  border-radius: 7px;
  font-size: 0.78rem;
  pointer-events: none;
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}


/* =================== Section Wrappers =================== */

/* Shared section title */
.section-title {
  font-size: var(--font-size-xl, 1.1rem);
  font-weight: var(--font-weight-bold, 700);
  color: var(--text);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-title i { color: var(--color-primary, var(--color-primary)); }

/* Title row with actions on the right */
.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.section-title-row .section-title { margin-bottom: 0; }

/* Trading Accounts wrapper */
.account-cards-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  padding: 24px;
  box-shadow: var(--shadow);
}

.account-cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

/* alias: tr-cards-grid also maps to same layout */
.tr-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

/* Performance Overview wrapper (left column) */
.stats-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  padding: 24px;
  box-shadow: var(--shadow);
  box-sizing: border-box;
}

/* Recent Trades wrapper */
.trades-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  padding: 24px;
  box-shadow: var(--shadow);
}

.trades-table-container {
  overflow-x: auto;
}

/* Performance Calendar wrapper */
.calendar-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  padding: 24px;
  box-shadow: var(--shadow);
}

.calendar-container {
  /* inner calendar content */
}

/* no-data-message โ€” used as empty state in renderTradesTable */
.no-data-message {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-dim);
}
.no-data-message i { font-size: 2.2rem; margin-bottom: 12px; display: block; opacity: 0.5; }
.no-data-message p { margin: 0; font-size: 0.9rem; }

/* Responsive: section padding on small screens */
@media (max-width: 768px) {
  .account-cards-section,
  .stats-section,
  .trades-section,
  .calendar-section { padding: 16px; }

  .account-cards-container {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   Filter Bar
   ============================================ */
.tr-filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.filter-btn-group { display: flex; gap: 6px; }
.filter-btn {
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.2s;
}
.filter-btn:hover {
  border-color: var(--color-primary, var(--color-primary));
  color: var(--text);
}
.filter-btn.active {
  background: rgba(255,255,255,0.15);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.filter-date-input {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.82rem;
}
.filter-apply-btn {
  padding: 6px 16px;
  border-radius: 8px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.2s;
}
.filter-apply-btn:hover { background: #4f46e5; }

/* ============================================
   Pagination (legacy page-btn styles)
   ============================================ */
.page-btn {
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s;
}
.page-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.page-info { color: var(--text-dim); font-size: 0.82rem; }

/* ============================================
   Column Add Button (in table header)
   ============================================ */
.col-add-th  { width: 40px; }
.col-add-btn {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1.5px dashed var(--border);
  background: transparent;
  color: var(--text-dim);
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.col-add-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }

.col-del-btn {
  margin-left: 6px;
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.9rem;
  opacity: 0;
  transition: opacity 0.2s;
}
th:hover .col-del-btn { opacity: 1; }

/* ============================================
   Column Modal
   ============================================ */
.col-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
.col-modal-inner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  width: 340px;
  max-width: 90vw;
}
.col-modal-inner h3 {
  margin: 0 0 4px;
  font-size: 1.1rem;
  color: var(--text);
}
.col-name-input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--color-primary);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.9rem;
  margin: 12px 0;
  box-sizing: border-box;
}
.col-name-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.15);
}
.col-color-picker { display: flex; gap: 8px; margin: 8px 0 16px; flex-wrap: wrap; }
.col-color-dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s;
}
.col-color-dot:hover { transform: scale(1.1); }
.col-color-dot.selected { border-color: #fff; transform: scale(1.15); }

.col-type-card {
  padding: 10px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
}
.col-type-card:hover { border-color: var(--color-primary,var(--color-primary)); background: rgba(255,255,255,0.06); }
.col-type-card.active { border-color: var(--color-primary,var(--color-primary)); background: rgba(255,255,255,0.12); }

/* ============================================
   Custom Cell (contenteditable)
   ============================================ */
.tr-custom-cell {
  min-width: 80px;
  cursor: text;
  transition: all 0.15s;
}
.tr-custom-cell:hover {
  background: rgba(255,255,255,0.04);
}
.tr-custom-cell[contenteditable]:focus {
  outline: 1.5px solid var(--color-primary);
  border-radius: 4px;
  background: rgba(255,255,255,0.07);
}
/* Fix number/text input inside custom cells โ€” no grey box */
.tr-custom-cell input.tr-cell-input {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: var(--text) !important;
  font-size: inherit !important;
  font-family: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-shadow: none !important;
}
.tr-custom-cell input.tr-cell-input:focus {
  background: rgba(255,255,255,0.07) !important;
  border-radius: 4px !important;
}
.tr-custom-cell input.tr-cell-number {
  width: 60px !important;
  text-align: right !important;
}
.tr-custom-cell input.tr-cell-text {
  width: 100% !important;
  min-width: 70px !important;
}

/* Dim text for commission/swap */
.tr-dim { color: var(--text-dim); font-size: 0.85rem; }

/* ============================================
   v2 โ€” Date Tabs & Filter Area
   ============================================ */
.tr-filter-area { display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.tr-date-tabs   { display:flex; gap:6px; flex-wrap:wrap; }
.tr-date-tab {
  padding: 5px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: none;
  color: var(--text-dim);
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.18s;
}
.tr-date-tab:hover  { border-color: var(--text-dim); color: var(--text); }
.tr-date-tab.active { border-color: var(--color-primary,var(--color-primary)); color: var(--color-primary,var(--color-primary)); background: rgba(255,255,255,0.08); }

.tr-date-range { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tr-date-input { max-width: 160px; }

/* โ”€โ”€ Filter chips โ”€โ”€ */
.tr-active-chips { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.tr-filter-chip {
  display:flex; align-items:center; gap:5px;
  padding: 3px 10px; border-radius:20px;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.3);
  font-size: 0.78rem;
}
.tr-chip-prop  { color: var(--text-dim); }
.tr-chip-op    { color: var(--color-primary,var(--color-primary)); font-style:italic; }
.tr-chip-val   { color: var(--text); font-weight:600; }
.tr-chip-remove { background:none;border:none;cursor:pointer;color:var(--text-dim);padding:0 2px;font-size:1rem;line-height:1; }
.tr-chip-remove:hover { color:var(--color-danger); }
.tr-filter-badge {
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;
  background:var(--color-primary,var(--color-primary));color:#fff;
  font-size:0.7rem;font-weight:700;margin-left:4px;
}

/* โ”€โ”€ Analytics independent date range control โ”€โ”€ */
.av-date-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.av-date-btn {
  padding: 3px 9px;
  border-radius: 5px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-dim);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.av-date-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.35);
  color: var(--color-primary-light);
}
.av-date-btn.active {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.5);
  color: var(--color-primary-light);
  font-weight: 600;
}
.av-date-custom {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.av-date-input {
  background: var(--surface-2, rgba(255,255,255,0.05));
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  padding: 4px 8px;
  font-size: 0.75rem;
  font-family: var(--font-mono, monospace);
  outline: none;
  width: 120px;
  cursor: pointer;
}
.av-date-input:focus { border-color: var(--color-primary); }
.av-date-input::-webkit-calendar-picker-indicator {
  filter: invert(0.6);
  cursor: pointer;
  padding: 0;
  margin: 0;
  width: 12px;
  height: 12px;
}
.filter-date-input::-webkit-calendar-picker-indicator {
  filter: invert(0.6);
  cursor: pointer;
  padding: 0;
  margin: 0;
  width: 12px;
  height: 12px;
}

/* โ”€โ”€ Notion-style filter chips โ”€โ”€ */
.nf-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  align-items: center;
}
.nf-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-dim);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.nf-chip:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.2);
  color: #e2e8f0;
}
.nf-chip--active {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.45);
  color: var(--color-primary-light);
}
.nf-chip--active:hover {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.65);
}
.nf-chip-field { font-weight: 500; color: inherit; }
.nf-chip-sep   { color: #6b7280; font-size: 0.75rem; margin: 0 1px; }
.nf-chip-val   { font-weight: 600; color: var(--color-primary-light); }
.nf-chip-caret { font-size: 0.62rem; color: #6b7280; margin-left: 1px; }
.nf-chip--active .nf-chip-caret { color: var(--color-primary); }

.nf-add-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 6px;
  background: transparent;
  border: 1px dashed rgba(255,255,255,0.15);
  color: #6b7280;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.nf-add-filter-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.4);
  color: var(--color-primary-light);
}

/* โ”€โ”€ New badge-style filter chips (replaces inline selects) โ”€โ”€ */
.tr-filter-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  align-items: center;
}

/* ============================================
   v2 โ€” Column Drag & Drop
   ============================================ */
.tr-th-draggable                    { transition: background 0.12s, opacity 0.15s; cursor: grab; }
.tr-th-draggable:active             { cursor: grabbing; }
.tr-th-drag-over                    { background: rgba(255,255,255,0.15) !important; border-bottom: 2px solid var(--color-primary,var(--color-primary)) !important; }
.tr-drag-handle                     { opacity:0.35; transition:opacity 0.15s; cursor: grab; }
.tr-th-draggable:hover .tr-drag-handle { opacity:1; color: var(--color-primary,var(--color-primary)) !important; }
.tr-td-mono      { font-family: var(--font-mono); font-size:0.82rem; color:var(--text-dim); font-variant-numeric: tabular-nums; }
.tr-mono, #tradingRecordsContainer .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ============================================
   v2 โ€” Property Type List (step 1 modal)
   ============================================ */
.tr-prop-type-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.tr-prop-type-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
  min-height: 60px;
}
.tr-prop-type-item:hover { border-color: var(--color-primary,var(--color-primary)); background:rgba(255,255,255,0.06); }
.tr-prop-type-item.is-active,
.tr-prop-type-item.active {
  border-color: var(--color-primary);
  background: rgba(255,255,255,0.1);
}
.tr-prop-type-item.is-active i,
.tr-prop-type-item.active i { color: var(--color-primary); }
.tr-prop-type-item i { font-size: 1.1rem; color: var(--text-dim); }
.tr-prop-type-item div { font-size: 0.82rem; font-weight: 600; color: var(--text); }

/* โ”€โ”€ Options list โ”€โ”€ */
.tr-options-list { display:flex; flex-direction:column; gap:4px; }
.tr-opt-row      { display:flex; align-items:center; gap:8px; }

/* ============================================
   v2 โ€” Tag / Select Cell
   ============================================ */
.tr-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  margin: 1px;
}
.tr-multi-cell { cursor: pointer; }
.tr-multi-cell:hover { background: rgba(255,255,255,0.04); }

/* ============================================
   Select dropdown (floating)
   ============================================ */
.tr-select-dd {
  z-index: 9999;
  min-width: 180px;
}
.tr-dd-opt {
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.15s;
}
.tr-dd-opt:hover { background: rgba(255,255,255,0.06) !important; }
.tr-dd-clear {
  cursor: pointer;
  border-radius: 7px;
  transition: background 0.15s;
}
.tr-dd-clear:hover { background: rgba(239, 68, 68,0.1); }

/* ============================================
   Checkbox cell
   ============================================ */
.tr-check-cell { accent-color: var(--color-primary,var(--color-primary)); width: 16px; height: 16px; cursor: pointer; }

/* ============================================
   Form input (inline)
   ============================================ */
.tr-form-input {
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.85rem;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s;
}
.tr-form-input:focus { border-color: var(--color-primary,var(--color-primary)); }

/* ============================================
   Section title row
   ============================================ */
.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 10px;
}
.section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-title i { color: var(--color-primary,var(--color-primary)); }

/* tr-section title alias */
.tr-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tr-section-title i { color: var(--color-primary,var(--color-primary)); }
.tr-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}

/* ============================================
   Two-column journal layout
   ============================================ */
.journal-two-col-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 900px) {
  .journal-two-col-row { grid-template-columns: 1fr; }
}

/* ============================================
   Modal overlay / modal
   ============================================ */
.tr-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.tr-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 100%;
  max-width: 520px;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tr-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
}
.tr-modal-header h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.tr-modal-close {
  background: none; border: none; cursor: pointer;
  color: var(--text-dim); font-size: 1rem; padding: 4px 8px; border-radius: 6px;
  transition: background 0.15s;
}
.tr-modal-close:hover { background: rgba(239, 68, 68,0.1); color: var(--color-danger); }
.tr-modal-body { padding: 18px 20px; overflow-y: auto; flex: 1; }
.tr-modal-footer {
  padding: 12px 20px 16px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  border-top: 1px solid var(--border);
}

/* ============================================
   col-type-card
   ============================================ */
.col-type-card {
  padding: 10px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
}
.col-type-card:hover { border-color: var(--color-primary,var(--color-primary)); background: rgba(255,255,255,0.06); }
.col-type-card.active { border-color: var(--color-primary,var(--color-primary)); background: rgba(255,255,255,0.12); }

/* ============================================
   tr-popup (column header rename/delete)
   ============================================ */
.tr-popup {
  z-index: 9999;
  animation: fadeInDown 0.15s ease;
}

/* ============================================
   Account Card โ€” Balance / Equity / Stats rows
   (added for Round2 FIX)
   ============================================ */
.tr-card-balance-row,
.tr-card-equity-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 8px;
}
.tr-card-balance-val {
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.tr-card-equity-val {
  font-size: 0.92rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tr-card-equity-val.tr-positive { color: var(--color-success); }
.tr-card-equity-val.tr-negative { color: var(--color-danger); }

.tr-card-stats {
  display: flex;
  gap: 0;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.tr-card-stat {
  flex: 1;
  text-align: center;
  padding: 0 4px;
}
.tr-card-stat + .tr-card-stat {
  border-left: 1px solid rgba(255,255,255,0.06);
}

/* ============================================
   New Property modal โ€” color swatch active
   ============================================ */
.tr-col-color-swatch {
  border: none;
  padding: 0;
  flex-shrink: 0;
  transition: outline 0.1s;
}
.tr-col-color-swatch.is-active,
.tr-col-color-swatch:focus-visible {
  outline: 3px solid #fff !important;
  outline-offset: 2px;
}

/* ============================================
   Custom column header menu (โ‹ฎ trigger)
   ============================================ */
.tr-custom-th {
  position: relative;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.tr-col-head-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  font-size: 0.8rem;
  color: var(--text-dim);
  cursor: pointer;
  margin-left: 4px;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
  vertical-align: middle;
}
.tr-custom-th:hover .tr-col-head-menu,
.tr-col-head-menu:hover { opacity: 1; background: rgba(255,255,255,0.08); }

/* ============================================
   Custom confirm modal (showModal replacement)
   ============================================ */
.custom-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.custom-confirm-modal.show { opacity: 1; }
.custom-confirm-content {
  background: #1a1d2e;
  border: 1px solid #2d3148;
  border-radius: 14px;
  padding: 0;
  min-width: 340px;
  max-width: 420px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
  overflow: hidden;
  transform: scale(0.96);
  transition: transform 0.2s ease;
}
.custom-confirm-modal.show .custom-confirm-content { transform: scale(1); }
.custom-confirm-header {
  padding: 20px 24px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.custom-confirm-header h4 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--text,#f1f5f9); }
.custom-confirm-body { padding: 12px 24px 20px; }
.custom-confirm-body p { margin: 0; font-size: 0.9rem; color: var(--text-dim,var(--text-dim)); line-height: 1.55; }
.custom-confirm-body strong { color: var(--text,#f1f5f9); }
.custom-confirm-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid #2d3148;
  background: rgba(0,0,0,0.2);
}
.custom-confirm-footer .btn-secondary {
  background: transparent; border: 1px solid #374151; color: var(--text-dim,var(--text-dim));
  border-radius: 8px; padding: 8px 20px; font-size: 0.88rem; cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.custom-confirm-footer .btn-secondary:hover { border-color: #6b7280; color: var(--text,#f1f5f9); }
.custom-confirm-footer .btn-danger {
  background: var(--color-danger); border: none; color: #fff;
  border-radius: 8px; padding: 8px 20px; font-size: 0.88rem; font-weight: 600;
  cursor: pointer; transition: background 0.15s;
}
.custom-confirm-footer .btn-danger:hover { background: #dc2626; }
/* ============================================
   Pagination buttons (new)
   ============================================ */
.tr-page-btn {
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 0.82rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: all 0.2s;
}
.tr-page-btn:hover {
  border-color: var(--color-primary,var(--color-primary));
  color: var(--color-primary,var(--color-primary));
}
.tr-page-info {
  color: var(--text-dim);
  font-size: 0.82rem;
}

/* ============================================
   Custom column header
   ============================================ */
.tr-custom-th {
  position: relative;
  white-space: nowrap;
  min-width: 120px;
}
.tr-col-name { font-size: inherit; font-weight: inherit; }
.tr-col-type-badge {
  font-size: 0.68rem;
  color: var(--text-dim);
  margin-left: 4px;
  opacity: 0.7;
}
.tr-col-head-menu {
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--text-dim);
  font-size: 1rem;
  margin-left: 4px;
  transition: background 0.15s;
}
.tr-col-head-menu:hover { background: rgba(255,255,255,0.08); color: var(--text); }

/* ============================================
   Tags & multi-select cells
   ============================================ */
.tr-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  margin: 1px;
}
.tr-multi-cell { cursor: pointer; }
.tr-multi-cell:hover { background: rgba(255,255,255,0.04); }

/* ============================================
   Select dropdown (floating)
   ============================================ */
.tr-select-dd {
  z-index: 9999;
  min-width: 180px;
}
.tr-dd-opt {
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.15s;
}
.tr-dd-opt:hover { background: rgba(255,255,255,0.06) !important; }
.tr-dd-clear {
  cursor: pointer;
  border-radius: 7px;
  transition: background 0.15s;
}
.tr-dd-clear:hover { background: rgba(239, 68, 68,0.1); }

/* ============================================
   Checkbox cell
   ============================================ */
.tr-check-cell { accent-color: var(--color-primary,var(--color-primary)); width: 16px; height: 16px; cursor: pointer; }

/* ============================================
   Form input (inline)
   ============================================ */
.tr-form-input {
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.85rem;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s;
}
.tr-form-input:focus { border-color: var(--color-primary,var(--color-primary)); }

/* ============================================
   Section title row
   ============================================ */
.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 10px;
}
.section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-title i { color: var(--color-primary,var(--color-primary)); }

/* tr-section title alias */
.tr-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tr-section-title i { color: var(--color-primary,var(--color-primary)); }
.tr-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}

/* ============================================
   Two-column journal layout
   ============================================ */
.journal-two-col-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 900px) {
  .journal-two-col-row { grid-template-columns: 1fr; }
}

/* ============================================
   Modal overlay / modal
   ============================================ */
.tr-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.tr-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 100%;
  max-width: 520px;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tr-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
}
.tr-modal-header h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.tr-modal-close {
  background: none; border: none; cursor: pointer;
  color: var(--text-dim); font-size: 1rem; padding: 4px 8px; border-radius: 6px;
  transition: background 0.15s;
}
.tr-modal-close:hover { background: rgba(239, 68, 68,0.1); color: var(--color-danger); }
.tr-modal-body { padding: 18px 20px; overflow-y: auto; flex: 1; }
.tr-modal-footer {
  padding: 12px 20px 16px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  border-top: 1px solid var(--border);
}

/* ============================================
   col-type-card
   ============================================ */
.col-type-card {
  padding: 10px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
}
.col-type-card:hover { border-color: var(--color-primary,var(--color-primary)); background: rgba(255,255,255,0.06); }
.col-type-card.active { border-color: var(--color-primary,var(--color-primary)); background: rgba(255,255,255,0.12); }

/* ============================================
   tr-popup (column header rename/delete)
   ============================================ */
.tr-popup {
  z-index: 9999;
  animation: fadeInDown 0.15s ease;
}

/* ============================================
   ANALYTICS PANEL: Sidebar + View Switcher
   ============================================ */

.analytics-panel-wrapper {
  display: flex;
  gap: 0;
  align-items: stretch;
  background: var(--surface, rgba(15,23,42,0.9));
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius, 12px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.35);
  overflow: visible;
  min-height: 300px;
}

/* โ”€โ”€ Left sidebar with 4 action boxes โ”€โ”€ */
.analytics-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 72px;
  min-width: 72px;
  flex-shrink: 0;
  border-right: 2px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius, 12px) 0 0 var(--radius, 12px);
  overflow: hidden;
}

.analytics-sidebar-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 18px 6px;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: all 0.18s ease;
  user-select: none;
  min-height: 72px;
  position: relative;
}
.analytics-sidebar-box:last-child { border-bottom: none; }
.analytics-sidebar-box i {
  font-size: 1.1rem;
  transition: transform 0.15s;
  color: var(--color-primary, var(--color-primary));
  opacity: 0.7;
}
.analytics-sidebar-box:hover {
  background: rgba(255,255,255,0.15);
  color: var(--color-primary, var(--color-primary));
}
.analytics-sidebar-box:hover i { transform: scale(1.2); opacity: 1; }
.analytics-sidebar-box:active { transform: scale(0.96); }
.analytics-sidebar-box.is-active {
  background: rgba(255,255,255,0.18);
  color: var(--color-primary, var(--color-primary));
  border-right: 3px solid var(--color-primary, var(--color-primary));
}
.analytics-sidebar-box.is-active i { opacity: 1; }

/* โ”€โ”€ Right content area โ”€โ”€ */
.analytics-content-area {
  flex: 1;
  min-width: 0;
  padding: 20px 24px;
}

/* โ”€โ”€ View container โ”€โ”€ */
.analytics-view-container { display: flex; flex-direction: column; gap: 16px; }

.analytics-view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 4px;
}

.analytics-view-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.analytics-view-title i { color: var(--color-primary, var(--color-primary)); }

.analytics-view-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.analytics-acc-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text-dim);
  background: var(--surface-2, rgba(255,255,255,0.04));
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 12px;
}
.analytics-acc-badge i { color: var(--color-primary, var(--color-primary)); }

.av-dots-row { display: flex; gap: 6px; align-items: center; }
.av-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--border);
  transition: background 0.2s, transform 0.2s;
}
.av-dot.active {
  background: var(--color-primary, var(--color-primary));
  transform: scale(1.3);
}

/* โ”€โ”€ View 0 (Performance + RR) uses journal-two-col-row inside content โ”€โ”€ */
.analytics-content-area .journal-two-col-row {
  margin-bottom: 0;
}
.analytics-content-area .tr-section {
  border: 1px solid var(--border);
}

/* โ”€โ”€ View 1: Balance/Equity Chart โ”€โ”€ */
.bev-chart-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bev-svg {
  width: 100%;
  height: auto;
  background: var(--surface-2, rgba(255,255,255,0.03));
  border: 1px solid var(--border);
  border-radius: 10px;
  display: block;
}

.bev-month-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.bev-month-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
}

.bev-month-label {
  color: var(--text-dim);
  min-width: 52px;
  font-weight: 600;
}

.bev-month-pnl { font-weight: 700; }

/* โ”€โ”€ View 2: Trade Statistics โ”€โ”€ */
.ts-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  margin-bottom: 16px;
}

.ts-donut-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.ts-donut-label {
  font-size: 0.78rem;
  color: var(--text-dim);
  text-align: center;
}

.ts-day-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  justify-content: center;
  padding: 8px 0;
}

.ts-day-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.ts-day-bar-wrap {
  display: flex;
  align-items: flex-end;
  width: 18px;
}

.ts-day-bar { transition: height 0.3s ease; }

.ts-day-label {
  font-size: 0.65rem;
  color: var(--text-dim);
  font-weight: 600;
  letter-spacing: 0.3px;
}

.ts-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.ts-stat-item {
  background: var(--surface-2, rgba(255,255,255,0.04));
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ts-stat-lbl {
  font-size: 0.68rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
}

.ts-stat-val {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

/* โ”€โ”€ View 3: Symbol Analysis โ”€โ”€ */
.sa-wrap { display: flex; flex-direction: column; gap: 16px; }

.sa-top {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.sa-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 160px;
}

.sa-leg-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
}

.sa-leg-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sa-leg-sym { flex: 1; color: var(--text); font-weight: 600; }
.sa-leg-count { color: var(--text-dim); font-size: 0.75rem; }

.sa-table {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sa-hdr, .sa-row {
  display: grid;
  grid-template-columns: 80px 1fr 80px 50px 60px;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.8rem;
}

.sa-hdr {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-dim);
  background: var(--surface-2, rgba(255,255,255,0.03));
}

.sa-row {
  border: 1px solid var(--border);
  background: var(--surface-2, rgba(255,255,255,0.02));
  transition: background 0.15s;
}
.sa-row:hover { background: rgba(255,255,255,0.06); }

.sa-sym { font-weight: 700; }
.sa-pnl-bar-wrap { height: 6px; background: var(--border); border-radius: 4px; overflow: hidden; }
.sa-pnl-bar { height: 100%; border-radius: 4px; min-width: 2px; }
.sa-pnl-bar.positive-bar { background: var(--color-success); }
.sa-pnl-bar.negative-bar { background: var(--color-danger); }
.sa-pnl-val { font-weight: 700; font-size: 0.78rem; text-align: right; }
.sa-count { color: var(--text-dim); font-size: 0.78rem; text-align: center; }
.sa-pf-val { font-weight: 600; font-size: 0.78rem; text-align: right; }

/* โ”€โ”€ no-data-message used in analytics views โ”€โ”€ */
.no-data-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  gap: 12px;
  color: var(--text-dim);
  font-size: 0.9rem;
  text-align: center;
}
.no-data-message i { font-size: 2rem; opacity: 0.4; }

/* โ”€โ”€ All-view mode: every section stacked vertically โ”€โ”€ */
.analytics-all-view {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.analytics-all-section {
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}
.analytics-all-section:last-child {
  border-bottom: none;
  padding-bottom: 4px;
}

@media (max-width: 900px) {
  .analytics-panel-wrapper { flex-direction: column; }
  .analytics-sidebar {
    flex-direction: row;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .analytics-sidebar-box {
    flex: 1;
    border-bottom: none;
    border-right: 1px solid var(--border);
    padding: 12px 4px;
  }
  .analytics-sidebar-box:last-child { border-right: none; }
  .analytics-sidebar-box.is-active {
    border-right: none;
    border-bottom: 3px solid var(--color-primary, var(--color-primary));
  }
}

@media (max-width: 600px) {
  .ts-grid { grid-template-columns: 1fr; justify-items: center; }
  .sa-hdr, .sa-row { grid-template-columns: 70px 1fr 70px 40px; }
  .sa-pf-val { display: none; }
}

/* ============================================
   PROTOTYPE 1:1 — Trading Records Classes
   ============================================ */

/* Storage bar */
.tr-storage-bar { margin-bottom: 18px; }
.tr-storage-bar .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tr-storage-track { background: rgba(255,255,255,0.05); border-radius: 4px; height: 6px; overflow: hidden; margin-top: 6px; }
.tr-storage-fill { height: 100%; border-radius: 4px; background: var(--color-success); }
.tr-storage-fill.warn { background: var(--color-warning); }
.tr-storage-fill.danger { background: var(--color-danger); }

/* Eyebrow label */
.eyebrow {
  font: 700 9.5px/1 var(--font-sans, Inter, sans-serif);
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-muted); display: flex; align-items: center; gap: 7px;
}
.eyebrow i { color: var(--text-dim); }

/* Account cards row — horizontal */
.tr-accounts-row {
  display: flex; gap: 14px; overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.tr-accounts-row::-webkit-scrollbar { height: 4px; }
.tr-accounts-row::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }

/* Single account card — prototype style */
.tr-acc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
  min-width: 200px; flex-shrink: 0;
}
.tr-acc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.tr-acc-name { font: 600 13.5px/1.3 var(--font-sans, Inter, sans-serif); color: var(--text); }
.tr-acc-no { font: 500 11px/1.3 var(--font-mono, JetBrains Mono, monospace); color: var(--text-muted); margin-top: 2px; }
.tr-acc-status {
  font: 600 9.5px/1 var(--font-sans, Inter, sans-serif); letter-spacing: 0.08em;
  padding: 3px 7px; border-radius: 99px;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.tr-acc-status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.tr-acc-status.live { background: rgba(34,197,94,0.12); color: var(--color-success); border: 1px solid rgba(34,197,94,0.30); }
.tr-acc-status.off, .tr-acc-status.offline { background: rgba(255,255,255,0.04); color: var(--text-muted); border: 1px solid var(--border); }
.tr-acc-status.paused { background: rgba(245,158,11,0.12); color: var(--color-warning); border: 1px solid rgba(245,158,11,0.30); }
.tr-bal-row { display: flex; align-items: baseline; justify-content: space-between; }
.tr-bal-label { font: 500 11px/1 var(--font-sans, Inter, sans-serif); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.tr-bal-val { font: 600 16px/1 var(--font-mono, JetBrains Mono, monospace); color: var(--text); font-variant-numeric: tabular-nums; }
.tr-eq-val { font: 500 13px/1 var(--font-mono, JetBrains Mono, monospace); font-variant-numeric: tabular-nums; }
.tr-eq-val.up-c { color: var(--color-success); }
.tr-eq-val.down-c { color: var(--color-danger); }
.tr-acc-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding-top: 10px; border-top: 1px solid var(--border); }
.tr-acc-mini > div { display: flex; flex-direction: column; gap: 2px; }
.tr-acc-mini .mlbl { font: 500 9.5px/1 var(--font-sans, Inter, sans-serif); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.tr-acc-mini .mval { font: 600 13px/1 var(--font-mono, JetBrains Mono, monospace); color: var(--text); font-variant-numeric: tabular-nums; }

/* Add account card — dashed */
.tr-add-acc-card {
  background: transparent; border: 1px dashed rgba(255,255,255,0.15);
  border-radius: var(--radius, 12px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  color: var(--text-muted); cursor: pointer; min-height: 150px; min-width: 160px;
  transition: all 0.18s ease;
}
.tr-add-acc-card:hover { border-color: rgba(34,197,94,0.4); color: var(--color-success); background: rgba(34,197,94,0.03); }
.tr-add-acc-card i { font-size: 1.1rem; }
.tr-add-acc-card span { font: 500 12.5px/1 var(--font-sans, Inter, sans-serif); }

/* Analytics panel — prototype layout */
.tr-analytics {
  display: grid; grid-template-columns: 56px 1fr; gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  padding: 14px;
  margin-bottom: 18px;
}
.tr-analytics-side { display: flex; flex-direction: column; gap: 6px; }
.tr-side-box {
  aspect-ratio: 1; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-0);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--text-dim); cursor: pointer; transition: all 0.15s ease;
}
.tr-side-box:hover { border-color: rgba(255,255,255,0.3); color: var(--text); background: var(--surface-2); }
.tr-side-box.is-active { border-color: var(--color-success); color: var(--color-success); background: rgba(34,197,94,0.06); }
.tr-side-box i { font-size: 0.85rem; }
.tr-side-box span { font: 500 8.5px/1 var(--font-sans, Inter, sans-serif); text-transform: uppercase; letter-spacing: 0.04em; }
.tr-analytics-main { min-width: 0; }

/* Analytics header */
.tr-av-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.tr-av-title { font: 600 15px/1 var(--font-sans, Inter, sans-serif); color: var(--text); display: flex; align-items: center; gap: 9px; margin: 0; }
.tr-av-title i { color: var(--color-success); font-size: 0.9rem; }
.tr-av-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tr-acc-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 99px;
  background: var(--surface-2); border: 1px solid var(--border);
  font: 500 11px/1 var(--font-sans, Inter, sans-serif); color: var(--text-dim); cursor: pointer;
}
.tr-acc-badge i { font-size: 0.7rem; }
.tr-av-dots { display: flex; gap: 6px; align-items: center; }
.tr-av-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border); transition: background 0.2s, transform 0.2s; cursor: pointer; }
.tr-av-dot.active { background: var(--color-success); transform: scale(1.25); box-shadow: 0 0 6px rgba(34,197,94,0.5); }

/* Date range chips */
.tr-range-chips { display: inline-flex; gap: 2px; padding: 3px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 99px; }
.tr-range-chip { padding: 5px 11px; font: 500 11.5px/1 var(--font-sans, Inter, sans-serif); color: var(--text-dim); cursor: pointer; border-radius: 99px; border: 0; background: transparent; transition: all 0.15s; }
.tr-range-chip.active { background: rgba(255,255,255,0.08); color: var(--text); }
.tr-range-chip:hover { color: var(--text); }

/* Carousel */
.tr-carousel { position: relative; }
.tr-track { position: relative; }
.tr-slide { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; visibility: hidden; transition: opacity 280ms ease; }
.tr-slide.active { position: relative; opacity: 1; visibility: visible; }

/* Performance overview — cards split */
.tr-ov-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 14px; align-items: stretch; }
@media (max-width: 1100px) { .tr-ov-split { grid-template-columns: 1fr; } }
.tr-ov-cards { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 1fr); gap: 10px; align-content: stretch; }

/* OVC stat card — prototype style */
.tr-ovc {
  position: relative; background: var(--surface-0); border: 1px solid var(--border);
  border-radius: var(--radius, 12px); padding: 12px 14px;
  display: flex; flex-direction: column; justify-content: center;
}
.tr-ovc-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 9px; }
.tr-ovc-ic {
  width: 28px; height: 28px; border-radius: 8px; background: var(--surface-2);
  border: 1px solid var(--border); display: grid; place-items: center;
  color: var(--text-dim); font-size: 0.75rem; flex-shrink: 0;
}
.tr-ovc-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font: 600 9.5px/1 var(--font-mono, JetBrains Mono, monospace);
  padding: 2px 5px; border-radius: 4px;
}
.tr-ovc-badge.up { background: rgba(34,197,94,0.12); color: var(--color-success); }
.tr-ovc-badge.dn { background: rgba(239,68,68,0.12); color: var(--color-danger); }
.tr-ovc-lbl { font: 500 10px/1 var(--font-sans, Inter, sans-serif); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.tr-ovc-num { font: 600 20px/1.2 var(--font-mono, JetBrains Mono, monospace); color: var(--text); font-variant-numeric: tabular-nums; margin-top: 3px; }
.tr-ovc-num.pos { color: var(--color-success); }
.tr-ovc-num.neg { color: var(--color-danger); }
.tr-ovc-sub { font: 500 9.5px/1.3 var(--font-mono, JetBrains Mono, monospace); color: var(--text-muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
.tr-ovc-sub .pos { color: var(--color-success); }
.tr-ovc-sub .neg { color: var(--color-danger); }

/* Journal (Trade Records) section */
.tr-journal {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius, 12px); overflow: hidden;
  margin-bottom: 18px;
}
.tr-journal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap;
  background: rgba(255,255,255,0.01);
}
.tr-journal-head h3 { font: 600 14px/1 var(--font-sans, Inter, sans-serif); color: var(--text); display: flex; align-items: center; gap: 9px; margin: 0; }
.tr-journal-head h3 i { color: var(--text-dim); font-size: 0.85rem; }
.tr-journal-head .count { font: 400 12px/1 var(--font-mono, JetBrains Mono, monospace); color: var(--text-muted); margin-left: 6px; }
.tr-jbtns { display: flex; gap: 6px; align-items: center; }
.tr-journal-head .tr-filter-bar { margin-bottom: 0; }
.tr-jbtn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-dim); cursor: pointer; font: 500 12px/1 var(--font-sans, Inter, sans-serif);
  transition: all 0.15s ease;
}
.tr-jbtn:hover { color: var(--text); border-color: rgba(255,255,255,0.3); background: var(--surface-3); }
.tr-jbtn.icon-only { padding: 7px 9px; }
.tr-jbtn i { font-size: 0.75rem; }

/* Trade table — prototype journal style */
.tr-journal .tr-table-wrap { border-radius: 0; border: none; border-top: 0; }
/* กฎ 2 บรรทัดนี้คือตัวที่ชนะจริงสำหรับตาราง Trade Records (อยู่ใน .tr-journal)
   ผูกเข้า token กลางเพื่อให้ช่องไฟเท่ากับ table.t และ .accounts-table เป๊ะ */
.tr-journal table.tr-table th {
  font-size: 10px;
  letter-spacing: 0.10em;
  padding: var(--table-head-pad-y) var(--table-cell-pad-x);
}
.tr-journal table.tr-table td {
  font-size: var(--table-font-size);
  padding: var(--table-cell-pad-y) var(--table-cell-pad-x);
}

/* Row type / direction / result pills — prototype */
.rtype {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 7px; border-radius: 5px; font: 600 9.5px/1.4 var(--font-sans, Inter, sans-serif); letter-spacing: 0.03em;
}
.rtype.trade { background: rgba(110,168,255,0.12); color: #6EA8FF; border: 1px solid rgba(110,168,255,0.25); }
.rtype.deposit { background: rgba(34,197,94,0.12); color: var(--color-success); border: 1px solid rgba(34,197,94,0.30); }
.rtype.withdrawal { background: rgba(239,68,68,0.12); color: var(--color-danger); border: 1px solid rgba(239,68,68,0.30); }
.rtype.balance { background: rgba(245,158,11,0.12); color: var(--color-warning); border: 1px solid rgba(245,158,11,0.30); }
.dir-pill { font: 700 9.5px/1 var(--font-sans, Inter, sans-serif); padding: 2px 6px; border-radius: 4px; }
.dir-pill.buy { background: var(--color-success); color: #052e16; }
.dir-pill.sell { background: var(--color-danger); color: #450a0a; }
.dir-pill.buy_limit, .dir-pill.buy_stop { background: rgba(34,197,94,0.2); color: var(--color-success); }
.dir-pill.sell_limit, .dir-pill.sell_stop { background: rgba(239,68,68,0.2); color: var(--color-danger); }
.res-pill { font: 600 10px/1 var(--font-sans, Inter, sans-serif); padding: 2px 7px; border-radius: 99px; }
.res-pill.win { background: rgba(34,197,94,0.12); color: var(--color-success); border: 1px solid rgba(34,197,94,0.30); }
.res-pill.loss { background: rgba(239,68,68,0.12); color: var(--color-danger); border: 1px solid rgba(239,68,68,0.30); }
.res-pill.be { background: rgba(255,255,255,0.05); color: var(--text-dim); border: 1px solid var(--border); }
.res-pill.open { background: rgba(110,168,255,0.12); color: #6EA8FF; border: 1px solid rgba(110,168,255,0.25); }
.cell-empty { color: rgba(255,255,255,0.15); }
.cell-tag { display: inline-flex; padding: 1px 7px; border-radius: 99px; font: 500 10.5px/1.5 var(--font-sans, Inter, sans-serif); }
.cell-tag.t-blue { background: rgba(110,168,255,0.12); color: #6EA8FF; }
.cell-tag.t-green { background: rgba(34,197,94,0.12); color: var(--color-success); }
.cell-tag.t-amber { background: rgba(245,158,11,0.12); color: var(--color-warning); }

/* Prototype calendar classes */
.tr-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 10px; }
.tr-cal-nav { display: flex; align-items: center; gap: 10px; }
.tr-cal-nav button { width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim); cursor: pointer; display: grid; place-items: center; transition: all 0.15s; }
.tr-cal-nav button:hover { border-color: rgba(255,255,255,0.3); color: var(--text); }
.tr-cal-nav button i { font-size: 0.7rem; }
.tr-cal-month { font: 600 14px/1 var(--font-sans, Inter, sans-serif); color: var(--text); min-width: 150px; text-align: center; }
.tr-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.tr-cal-dow { font: 600 10px/1 var(--font-sans, Inter, sans-serif); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; text-align: center; padding: 4px 0; }
.tr-cal-cell {
  aspect-ratio: 1.25; border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 8px; display: flex; flex-direction: column; justify-content: space-between;
  background: var(--surface-0); min-height: 58px;
}
.tr-cal-cell.empty { background: transparent; border-color: transparent; }
.tr-cal-cell.win { background: rgba(34,197,94,0.07); border-color: rgba(34,197,94,0.30); }
.tr-cal-cell.loss { background: rgba(239,68,68,0.06); border-color: rgba(239,68,68,0.30); }
.tr-cal-date { font: 500 11px/1 var(--font-mono, JetBrains Mono, monospace); color: var(--text-dim); }
.tr-cal-pnl { font: 600 11.5px/1.2 var(--font-mono, JetBrains Mono, monospace); font-variant-numeric: tabular-nums; }
.tr-cal-pnl.pos { color: var(--color-success); }
.tr-cal-pnl.neg { color: var(--color-danger); }
.tr-cal-trades { font: 400 9px/1 var(--font-sans, Inter, sans-serif); color: var(--text-muted); }

/* === Balance & Equity stat cards === */
.tr-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.tr-stat-card {
  display: flex; align-items: center; gap: 11px;
  background: var(--surface-0); border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px); padding: 12px 14px;
}
.tr-stat-ic {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  background: var(--surface-2); border: 1px solid var(--border);
  display: grid; place-items: center; color: var(--text-muted); font-size: 0.75rem;
}
.tr-stat-meta { display: flex; flex-direction: column; min-width: 0; }
.tr-stat-lbl { font: 500 10px/1 var(--font-sans, Inter, sans-serif); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.tr-stat-num { font: 600 16px/1.2 var(--font-mono, JetBrains Mono, monospace); color: var(--text); font-variant-numeric: tabular-nums; }
.tr-stat-num.positive { color: var(--color-success); }
.tr-stat-num.negative { color: var(--color-danger); }
.tr-stat-sub { font: 500 10px/1.3 var(--font-sans, Inter, sans-serif); color: var(--text-muted); margin-top: 3px; }
.tr-chart-box {
  background: var(--surface-0); border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px); padding: 16px;
}
@media (max-width: 1100px) { .tr-stats-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .tr-stats-grid { grid-template-columns: repeat(2, 1fr); } }

/* === Donut / Trade Stats / Symbol Analysis panels === */
.tr-donut-row { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 14px; }
@media (max-width: 1040px) { .tr-donut-row { grid-template-columns: 1fr; } }

.tr-panel {
  background: var(--surface-0); border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px); padding: 16px;
}
.tr-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.tr-panel-title { font: 600 11px/1 var(--font-sans, Inter, sans-serif); color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.07em; }
.tr-panel-meta { font: 500 10.5px/1 var(--font-mono, JetBrains Mono, monospace); color: var(--text-muted); }

/* ── Edge Analysis view ──────────────────────────────────────────────────────
   Deliberately NOT .tr-ov-cards: that grid hard-codes four rows for the eight-card
   Performance layout, so a four-card row there inherits four rows of height and
   leaves a large empty gap. auto-fit sizes to whatever it is given. */
.tr-edge-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px; margin-bottom: 14px;
}
.tr-edge-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 1040px) { .tr-edge-split { grid-template-columns: 1fr; } }

.tr-edge-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 0; border-bottom: 1px solid var(--border);
}
.tr-edge-row:last-child { border-bottom: none; }
.tr-edge-lbl {
  flex: 0 0 108px; display: flex; align-items: center; gap: 6px;
  font: 500 11.5px/1.3 var(--font-family); color: var(--text-dim);
}
.tr-edge-lbl i { font-size: 10px; opacity: 0.65; width: 12px; text-align: center; }
.tr-edge-key {
  flex: 1; min-width: 0; font: 600 12.5px/1.3 var(--font-mono, JetBrains Mono, monospace);
  color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tr-edge-val {
  font: 700 13px/1.3 var(--font-mono, JetBrains Mono, monospace);
  margin-left: auto; white-space: nowrap;
}
/* The panel rows were emitting .up-c/.down-c all along, but the only rule for those
   classes in this file was scoped `.tr-eq-val.up-c` — so nothing matched and every
   figure in "What actually works" and "Top combinations" rendered in plain --text.
   A P&L column where profit and loss look identical is the one column that has to be
   readable at a glance, so it is bound here to the same two tokens the KPI cards use
   (.tr-ovc-num.pos/.neg), which is why the cards above were already coloured. */
.tr-edge-val.up-c { color: var(--color-success); }
.tr-edge-val.down-c { color: var(--color-danger); }
.tr-edge-meta {
  flex: 0 0 100%; font: 400 10.5px/1.3 var(--font-mono, JetBrains Mono, monospace);
  color: var(--text-muted); padding-left: 118px;
}
/* Win rate takes the same two colours at reduced weight: it qualifies the money figure
   beside it, so it should be scannable without competing with it. */
.tr-edge-wr { font-weight: 600; }
.tr-edge-wr.up-c { color: var(--color-success); opacity: 0.85; }
.tr-edge-wr.down-c { color: var(--color-danger); opacity: 0.85; }
/* Edge Analysis is the only server-computed view, so a chip click round-trips. Dim the
   stale answer rather than blanking it — a flash of empty panels reads as data loss. */
.tr-edge.is-restating { opacity: 0.45; transition: opacity 120ms ease; }
@media (max-width: 560px) { .tr-edge-meta { padding-left: 0; } }
/* A ranked answer built on a handful of trades is worse than no answer at all in a
   trading product, so thin buckets are visibly marked rather than quietly shown. */
.tr-edge-warn {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px;
  background: rgba(245, 158, 11, 0.12); color: var(--color-warning);
  font: 600 9.5px/1.5 var(--font-family); text-transform: uppercase; letter-spacing: 0.04em;
}
.tr-edge-note {
  margin-top: 12px; display: flex; align-items: flex-start; gap: 7px;
  font: 400 11px/1.5 var(--font-family); color: var(--text-muted);
}
.tr-edge-note i { margin-top: 2px; opacity: 0.6; }

.tr-donut-wrap { display: flex; justify-content: center; padding: 8px 0 14px; }
.tr-donut { width: 142px; height: 142px; border-radius: 50%; position: relative; }
.tr-donut::after { content: ''; position: absolute; inset: 24px; border-radius: 50%; background: var(--surface-0); }
.tr-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1; }
.tr-donut-big { font: 600 26px/1 var(--font-serif, 'Instrument Serif', serif); font-style: italic; color: var(--text); font-variant-numeric: tabular-nums; }
.tr-donut-sm { font: 500 10px/1 var(--font-sans, Inter, sans-serif); color: var(--text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.06em; }

.tr-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tr-mini { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm, 8px); padding: 9px 11px; }
.tr-mini .l { font: 500 9px/1 var(--font-sans, Inter, sans-serif); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.tr-mini .v { font: 600 13px/1 var(--font-mono, JetBrains Mono, monospace); color: var(--text); margin-top: 5px; font-variant-numeric: tabular-nums; display: block; }
.tr-mini .v.pos { color: var(--color-success); }
.tr-mini .v.neg { color: var(--color-danger); }

.tr-donut-legend { display: flex; flex-direction: column; gap: 8px; }
.tr-dleg { display: flex; align-items: center; gap: 8px; font: 500 11.5px/1 var(--font-sans, Inter, sans-serif); color: var(--text-dim); }
.tr-dleg .nm { flex: 1; }
.tr-dleg .pc { font-family: var(--font-mono, JetBrains Mono, monospace); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tr-dotmark { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* === Outcome Breakdown bars === */
.tr-ob-row { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 10px; padding: 7px 0; }
.tr-ob-lbl { font: 500 11.5px/1 var(--font-sans, Inter, sans-serif); color: var(--text-dim); }
.tr-ob-track { position: relative; height: 14px; }
.tr-ob-track::before { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--border); }
.tr-ob-bar { position: absolute; top: 2px; height: 10px; border-radius: 3px; }
.tr-ob-bar.pos { left: 50%; background: linear-gradient(90deg, rgba(34,197,94,0.5), var(--color-success)); }
.tr-ob-bar.neg { right: 50%; background: linear-gradient(90deg, var(--color-danger), rgba(239,68,68,0.5)); }
.tr-ob-val { font: 600 11.5px/1 var(--font-mono, JetBrains Mono, monospace); font-variant-numeric: tabular-nums; min-width: 80px; text-align: right; }
.tr-ob-foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); text-align: center; }
.tr-ob-foot > div .l { font: 500 9.5px/1 var(--font-sans, Inter, sans-serif); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.tr-ob-foot > div .v { font: 600 16px/1 var(--font-serif, 'Instrument Serif', serif); font-style: italic; color: var(--text); margin-top: 6px; display: block; font-variant-numeric: tabular-nums; }

/* === Breakdown grid (hold-time / session / day-of-week) === */
.tr-bd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 980px) { .tr-bd-grid { grid-template-columns: 1fr; } }
.tr-bd-col { background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--radius-sm, 8px); padding: 14px 15px; }
.tr-bd-col-title { font: 600 11px/1 var(--font-sans, Inter, sans-serif); color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.07em; display: flex; align-items: center; gap: 7px; margin-bottom: 14px; }
.tr-bd-col-title i { color: var(--text-muted); font-size: 0.75rem; }
.tr-bd-col-title .agg { margin-left: auto; font: 500 10px/1 var(--font-mono, JetBrains Mono, monospace); color: var(--text-muted); letter-spacing: 0; text-transform: none; }
.tr-bd-row { padding: 9px 0; border-bottom: 1px solid var(--border); }
.tr-bd-row:last-child { border-bottom: 0; padding-bottom: 0; }
.tr-bd-row:first-child { padding-top: 0; }
.tr-bd-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.tr-bd-lbl { font: 600 12px/1 var(--font-sans, Inter, sans-serif); color: var(--text); width: 66px; flex-shrink: 0; }
/* Session rows carry the viewer-local equivalent of the (UTC-defined) session
   window. nowrap so "20:00–04:00" never splits across lines inside the fixed label. */
.tr-bd-tz { display: block; margin-top: 4px; font: 500 9.5px/1 var(--font-mono, JetBrains Mono, monospace); color: var(--text-muted); white-space: nowrap; }
.tr-bd-count { font: 500 10.5px/1 var(--font-mono, JetBrains Mono, monospace); color: var(--text-muted); }
.tr-bd-count b { color: var(--text-dim); font-weight: 600; }
.tr-bd-net { margin-left: auto; font: 600 12px/1 var(--font-mono, JetBrains Mono, monospace); font-variant-numeric: tabular-nums; }
.tr-split { display: flex; height: 7px; border-radius: 4px; overflow: hidden; background: rgba(255,255,255,0.05); gap: 2px; margin-bottom: 6px; }
.tr-split-win { background: linear-gradient(90deg, rgba(34,197,94,0.55), var(--color-success)); border-radius: 3px; }
.tr-split-loss { background: linear-gradient(90deg, var(--color-danger), rgba(239,68,68,0.55)); border-radius: 3px; }
.tr-bd-detail { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tr-wl { font: 500 10.5px/1 var(--font-mono, JetBrains Mono, monospace); display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.tr-wl.win { color: var(--color-success); }
.tr-wl.loss { color: var(--color-danger); }
.tr-wl .c { color: var(--text-muted); }

/* === Per-symbol metrics table === */
table.tr-sym-table { width: 100%; border-collapse: collapse; font-size: 12px; }
table.tr-sym-table th { text-align: right; padding: 8px 10px; font: 600 9.5px/1 var(--font-sans, Inter, sans-serif); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; border-bottom: 1px solid var(--border); }
table.tr-sym-table th:first-child { text-align: left; }
table.tr-sym-table td { text-align: right; padding: 9px 10px; border-bottom: 1px solid var(--border); font-family: var(--font-mono, JetBrains Mono, monospace); font-variant-numeric: tabular-nums; color: var(--text-dim); }
table.tr-sym-table td:first-child { text-align: left; }
table.tr-sym-table tr:last-child td { border-bottom: 0; }
.tr-sym-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 0; }
.tr-sym-name { font-family: var(--font-sans, Inter, sans-serif); font-weight: 600; color: var(--text); }
/* scroll all symbols within a fixed card height; header stays pinned */
.tr-sym-scroll { max-height: 268px; overflow-y: auto; margin: 0 -2px; }
.tr-sym-scroll::-webkit-scrollbar { width: 7px; }
.tr-sym-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }
table.tr-sym-table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-0); }

/* === Score P&L horizontal bars === */
.tr-score-scroll { max-height: 300px; overflow-y: auto; padding-right: 4px; }
.tr-score-scroll::-webkit-scrollbar { width: 7px; }
.tr-score-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }
.tr-score-row { display: grid; grid-template-columns: 88px 1fr 92px; align-items: center; gap: 12px; padding: 7px 0; }
.tr-score-name { font: 600 12px/1 var(--font-sans, Inter, sans-serif); color: var(--text-dim); }
.tr-score-track { height: 22px; background: rgba(255,255,255,0.04); border-radius: 5px; position: relative; overflow: hidden; }
.tr-score-fill { position: absolute; top: 0; left: 0; height: 100%; border-radius: 5px; display: flex; align-items: center; padding: 0 9px; }
.tr-score-fill.pos { background: linear-gradient(90deg, rgba(34,197,94,0.85), rgba(34,197,94,0.4)); border: 1px solid rgba(34,197,94,0.4); }
.tr-score-fill.neg { background: linear-gradient(90deg, rgba(239,68,68,0.85), rgba(239,68,68,0.4)); border: 1px solid rgba(239,68,68,0.4); }
.tr-score-tag { font: 500 10px/1 var(--font-mono, JetBrains Mono, monospace); color: #04150b; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tr-score-fill.neg .tr-score-tag { color: #1a0606; }
.tr-score-val { font: 600 12px/1 var(--font-mono, JetBrains Mono, monospace); text-align: right; font-variant-numeric: tabular-nums; }
.tr-chart-title { font: 600 12px/1 var(--font-sans, Inter, sans-serif); color: var(--text-dim); display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.tr-chart-title i { font-size: 0.78rem; color: var(--text-muted); }
.tr-chart-hint { margin-left: auto; font: 400 10.5px/1 var(--font-sans, Inter, sans-serif); color: var(--text-muted); }

/* Light mode overrides for new classes */
html[data-theme="light"] .tr-acc-card { background: var(--surface); }
html[data-theme="light"] .tr-analytics { background: var(--surface); }
html[data-theme="light"] .tr-side-box { background: var(--surface-0); }
html[data-theme="light"] .tr-ovc { background: var(--surface-0); }
html[data-theme="light"] .tr-journal { background: var(--surface); }
html[data-theme="light"] .tr-stat-card { background: var(--surface-0); }
html[data-theme="light"] .tr-chart-box { background: var(--surface-0); }
html[data-theme="light"] .tr-panel { background: var(--surface-0); }
html[data-theme="light"] .tr-mini { background: var(--surface); }
html[data-theme="light"] .tr-donut::after { background: var(--surface-0); }
html[data-theme="light"] .dir-pill.buy { color: #14532d; }
html[data-theme="light"] .dir-pill.sell { color: #7f1d1d; }
html[data-theme="light"] .cell-empty { color: rgba(0,0,0,0.2); }

/* ── Calendar day-detail popup — table matches main .tr-table, theme-aware ── */
.cal-day-popup .tr-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-2, var(--surface));
}

/* ── P&L colour, page-wide ───────────────────────────────────────────────────
   The Trading Records renderer emits .up-c / .down-c in twelve places, but only
   `.tr-eq-val.up-c` was ever defined for them (plus the two Edge Analysis rules
   above, added the same day as this). Everywhere else the class was inert and
   the figure came out in the neutral --text: Hold-time, By session and
   By day-of-week showed a −$329 bucket and a +$165 bucket in exactly the same
   white, which is the one distinction those panels exist to make.

   Defined once here as the page baseline rather than as a fourth scoped copy —
   a panel added later that emits the pair now gets the colour instead of
   shipping this bug again. Sits at the end of the file so it also wins the
   specificity TIES against the neutral `color: var(--text)` declarations
   earlier in the file (.tr-donut-big); the two selectors that genuinely
   outrank a bare class are named explicitly below. */
.up-c { color: var(--color-success); }
.down-c { color: var(--color-danger); }

/* Payoff ratio / Expectancy / Kelly % — `.tr-ob-foot > div .v` is (0,2,1) and
   pins --text, so a bare class cannot reach it. */
.tr-ob-foot > div .v.up-c { color: var(--color-success); }
.tr-ob-foot > div .v.down-c { color: var(--color-danger); }
/* Per-symbol WR / PF / R:R cells — `table.tr-sym-table td` is (0,1,2). */
table.tr-sym-table td.up-c { color: var(--color-success); }
table.tr-sym-table td.down-c { color: var(--color-danger); }

/* Win rate in the breakdown rows: the same two colours at lower weight. It
   qualifies the money figure to its right, so it has to be readable without
   competing with it — identical treatment to .tr-edge-wr in Edge Analysis. */
.tr-bd-wr.up-c { color: var(--color-success); opacity: 0.85; }
.tr-bd-wr.down-c { color: var(--color-danger); opacity: 0.85; }