/* ============================================
   COMPONENTS: Tables โ€” Obsidian Aurora
   ============================================
   Tonal hover, minimal borders, uppercase
   headers with letter-spacing.
   ============================================ */

/* Table Container */
.table-container {
  overflow-x: auto;
}

.history-scroll {
  max-height: 420px;
  overflow-y: auto;
}

/* Accounts Table */
.accounts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--text);
}

/* Table flows as ONE with its card (prototype: no inner panel / no inset).
   Cards that wrap a table drop their body padding so the table is full-bleed;
   th/td horizontal padding (22px) provides the text inset instead. */
.card-body:has(> .table-container) {
  padding: 0;
}

.accounts-table th,
.accounts-table td {
  padding: var(--table-cell-pad-y) var(--table-cell-pad-x);
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.accounts-table th {
  background: rgba(255, 255, 255, 0.02);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.10em;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
}

.accounts-table tbody tr {
  transition: var(--transition);
}

.accounts-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* (No rounded thead corners — table header is flush with the card, like prototype) */

/* Entry animation for genuinely NEW rows.
   Was bound to `tr:first-child`, which meant it replayed every single time the top
   row's DOM node was replaced — i.e. on every 30s refresh and every visit to the
   page, whether or not anything had changed. That was the table "flicker".
   app.js (_syncRows) now adds .row-enter only to rows that did not exist before,
   and strips it on animationend. */
.accounts-table tbody tr.row-enter {
  animation: fadeInSlide 0.3s ease-out;
}

/* Retention cap counter under history tables ("18 / 200") */
.table-cap-footer {
  padding: 8px 22px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--color-text-muted);
}

/* No Data Message */
.no-data-message {
  padding: 40px;
  color: var(--text-dim);
  text-align: center;
}

.no-data-message i {
  font-size: 2.6rem;
  margin-bottom: 12px;
  color: var(--color-gray-400);
  display: block;
}

.no-data-message p {
  margin: 0;
}

/* Table Actions */
.table-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  width: max-content;    /* ป้องกัน table-actions ยืดตาม flex space-between */
  flex-shrink: 0;        /* ไม่ shrink จน select แคบเกิน */
}

/* Select dropdown ใน table-actions — compact ตามเนื้อหา ไม่ยืดเต็ม */
.table-actions .select {
  max-width: 160px;
}

/* Pair Table Cell */
.pair-table-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.pair-table-master,
.pair-table-slave {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}

.pair-table-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.pair-table-arrow {
  font-size: 1.2rem;
  color: var(--color-primary);
}

/* API Token Cell */
.api-token-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 250px;
}

.api-token-cell code {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text);
  background: var(--surface-0);
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =================== History Table Specific Styles =================== */

#copyHistoryTableBody td {
  font-size: 13px !important;
  font-family: var(--font-sans, 'Inter', sans-serif);
}

#copyHistoryTableBody .error-message {
  color: var(--color-danger);
  font-size: 13px !important;
}

#historyTableBody td {
  font-size: 13px !important;
  font-family: var(--font-sans, 'Inter', sans-serif);
  /* Keep each trade on one row so the table can scroll sideways (like Copy
     Trading History) instead of wrapping long messages into tall cells. */
  white-space: nowrap;
}

#historyTableBody .error-message {
  color: var(--color-danger) !important;
  font-weight: var(--font-weight-semibold);
}

/* Technical detail toggle — the broker's raw retcode and the fix hint sit behind this,
   so the message column stays one plain sentence. Sized to the text baseline so it does
   not change the row height in either history table. */
.detail-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 6px;
  padding: 0;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.14));
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted, #8A94A6);
  font-family: var(--font-mono, monospace);
  font-size: 9.5px;
  font-weight: var(--font-weight-bold, 700);
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
  transition: color .12s ease, border-color .12s ease;
}

.detail-toggle:hover,
.detail-toggle:focus-visible {
  color: var(--color-info);
  border-color: var(--color-info);
}

.detail-toggle.is-open {
  color: var(--color-info);
  border-color: var(--color-info);
  background: rgba(110, 168, 255, 0.10);
}

/* Timing breakdown for one signal — opens with the same ⓘ as the technical detail,
   in BOTH history tables (Webhook + Copy Trading) from one renderer in app.js.

   The colour split is the whole point: green = the parts we own and can tune,
   blue/grey = the broker and the two network hops, which we cannot. Users who
   see a slow fill can tell in one glance whose delay it is.

   Deliberately NOT a column: the tables already carry 10, and this is something
   you look up about one row, not something you scan down. */
/* popup ลอยตัวเดียวใช้ร่วมทุกแถว — ผูกกับ <body> ไม่ใช่ในเซลล์
   เหตุผล: (1) แทรกในแถวทำให้แถวนั้นสูงขึ้นคนเดียว ตารางเสียความสมมาตร
           (2) .table-wrap เป็น overflow-x:auto ของที่ absolute อยู่ข้างในจะโดนตัดขอบ */
.detail-pop {
  position: fixed;
  z-index: 1200;
  max-width: 420px;
  padding: 10px 12px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.14));
  border-radius: var(--radius-md, 10px);
  background: var(--surface-2, #171C28);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-3px);
  transition: opacity .12s ease, transform .12s ease, visibility .12s;
  pointer-events: none;
}

.detail-pop.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;   /* ให้ลากคลุมก๊อป retcode ไปส่ง support ได้ */
}

.detail-pop-text {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text, #E4E8F1);
  word-break: break-word;
}

.detail-pop-text + .lat-strip { margin-top: 10px; }

.lat-strip {
  padding: 0;
  border: 0;
  background: none;
  max-width: 100%;
}

.lat-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.lat-title {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted, #8A94A6);
}

.lat-total {
  font-size: 12px;
  font-weight: 700;
  color: var(--text, #E4E8F1);
}

.lat-bar {
  display: flex;
  gap: 2px;
  height: 6px;
  margin-bottom: 7px;
}

.lat-seg {
  border-radius: var(--radius-pill, 999px);
  min-width: 3px;
}

.lat-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 11px;
  color: var(--text-muted, #8A94A6);
}

.lat-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.lat-item b {
  color: var(--text, #E4E8F1);
  font-weight: 600;
}

.lat-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}

/* ── ของเรา (ปรับได้) ── */
.lat-seg.lat-intake,
.lat-dot.lat-intake { background: var(--color-success); }

.lat-seg.lat-queue,
.lat-dot.lat-queue { background: var(--color-success); opacity: 0.45; }

/* ── ไม่ใช่ของเรา (ปรับไม่ได้) ── */
.lat-seg.lat-broker,
.lat-dot.lat-broker { background: var(--color-info); }

.lat-seg.lat-network,
.lat-dot.lat-network { background: var(--text-muted, #8A94A6); opacity: 0.55; }

.lat-gap { font-style: italic; opacity: 0.75; }

/* ── เวลาข้ามปี ────────────────────────────────────────────────────────────
   ตารางตัดปีออกเพราะทุกแถวมักเป็นปีเดียวกัน (ประหยัดความกว้าง ~40% ของ 2 คอลัมน์)
   แถวที่ "ไม่ใช่ปีปัจจุบัน" จะพิมพ์ปีกลับมาเองพร้อมคลาสนี้ เพื่อให้กวาดตาลงมาแล้ว
   สะดุดตาทันที ไม่ต้องเปิด tooltip ทีละแถวเพื่อเช็คว่าไม้ไหนข้ามปี
   ใช้ info token (ไม่ใช่ warning) — ไม้ปีเก่าไม่ใช่ "ความผิดพลาด" แค่ต้องสังเกตเห็น */
.ts-otheryear {
  color: var(--color-info);
  font-weight: 600;
  border-bottom: 1px dotted var(--color-info);
  cursor: help;
}

@media (max-width: 760px) {
  .detail-pop { max-width: calc(100vw - 24px); }
}

/* ── ขนาดแถวของ "ทุกตาราง" ในโปรเจกต์ — นิยามที่เดียว ────────────────────────
   ก่อนหน้านี้ table.t (Webhook / Copy Trading) กับ .tr-table (Trade Records) ตั้งค่า
   padding/font แยกกันคนละที่ พอแก้อันหนึ่งอีกอันไม่ตาม → หน้าเดียวกันแต่ช่องไฟไม่เท่ากัน
   (Trade Records แน่นกว่าอีก 2 ตารางอย่างเห็นได้ชัด)

   อยากเปลี่ยนทั้งโปรเจกต์เป็น compact เมื่อไหร่ → แก้ 3 บรรทัดนี้ที่เดียวจบ
   ห้ามฮาร์ดโค้ด padding ลงตารางใดตารางหนึ่งอีก มันจะกลับมาเพี้ยนแบบเดิม */
:root {
  --table-cell-pad-y: 13px;
  --table-cell-pad-x: 22px;
  --table-head-pad-y: 11px;
  --table-font-size: 13px;
}

/* =================== Prototype table.t + .table-wrap (used in all dashboard pages) =================== */

/* Wide rows (long Message/Time columns) must scroll sideways instead of being
   clipped — otherwise users miss data at the right edge.
   overflow-y is hidden (not clipped content vertically; the wrap grows with the
   table) so the card keeps clean rounded bottom corners without a stray v-scroll. */
.table-wrap { overflow-x: auto; overflow-y: hidden; }
.card > .table-wrap {
  border-radius: 0 0 var(--radius) var(--radius);
  overflow-x: auto;   /* was `overflow: hidden` — that killed horizontal scroll */
  overflow-y: hidden;
}

/* Thin, theme-aware horizontal scrollbar for data/history tables so the sideways
   scroll is clearly visible in both dark and light themes. */
.table-wrap,
.table-container {
  scrollbar-width: thin;
  scrollbar-color: var(--color-text-muted) transparent;
}
.table-wrap::-webkit-scrollbar,
.table-container::-webkit-scrollbar {
  height: 8px;
}
.table-wrap::-webkit-scrollbar-track,
.table-container::-webkit-scrollbar-track {
  background: transparent;
}
.table-wrap::-webkit-scrollbar-thumb,
.table-container::-webkit-scrollbar-thumb {
  background: var(--color-text-muted);
  border-radius: 99px;
}
.table-wrap::-webkit-scrollbar-thumb:hover,
.table-container::-webkit-scrollbar-thumb:hover {
  background: var(--text-dim);
}

table.t {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--table-font-size);
}
table.t th,
table.t td {
  text-align: left;
  padding: var(--table-cell-pad-y) var(--table-cell-pad-x);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
table.t thead th {
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-dim);
  font: 600 10px/1 var(--font-sans, 'Inter', sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  padding-top: var(--table-head-pad-y);
  padding-bottom: var(--table-head-pad-y);
}
table.t tbody tr { transition: background 120ms ease; }
table.t tbody tr:hover { background: rgba(255, 255, 255, 0.02); }
table.t tbody tr:last-child td { border-bottom: 0; }

/* =================== Generic Table =================== */

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

.table th,
.table td {
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.table th {
  background: rgba(255, 255, 255, 0.02);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  white-space: nowrap;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.10em;
}

.table tbody tr:hover {
  background-color: var(--table-row-hover);
}

/* Striped Table */
.table-striped tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.02);
}

/* Bordered Table */
.table-bordered th,
.table-bordered td {
  border: 1px solid rgba(255, 255, 255, 0.04);
}

/* Compact Table */
.table-sm th,
.table-sm td {
  padding: var(--spacing-xs) var(--spacing-sm);
}

/* Responsive Table Wrapper */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Value Indicators (for portfolio gains/losses) */
.positive,
.text-success,
.gain {
  color: var(--color-success);
}

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

/* Numeric Columns */
.table .text-right,
.table .numeric {
  text-align: right;
  font-family: var(--font-family-mono);
  font-feature-settings: 'tnum' on;
}

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

@media (max-width: 1200px) {
  .pair-table-cell {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .pair-table-arrow {
    transform: rotate(90deg);
  }
}

@media (max-width: 768px) {
  .table-actions {
    flex-direction: column;
    width: 100%;
  }

  .table-actions select {
    width: 100%;
  }

  .api-token-cell {
    max-width: 150px;
  }

  .api-token-cell code {
    font-size: 0.7rem;
  }
}

@media (max-width: 480px) {
  .accounts-table {
    font-size: var(--font-size-sm);
  }

  .accounts-table th,
  .accounts-table td {
    padding: 10px 8px;
  }
}

/* ── Webhook Management · signal activity cell ────────────────────────────────
   Replaces the old "Created" column, which restated a date already shown on
   Account Management and told the user nothing about the webhook itself. The
   count and its breakdown share one cell so the row keeps its single-line
   height: the number answers "is this endpoint carrying anything", the line
   under it answers "did it work", and only the failing half is coloured — a
   row where nothing is wrong should stay quiet. */
.wh-sig-cell { white-space: nowrap; }
.wh-sig-n {
  display: block;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}
.wh-sig-split {
  display: block;
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.wh-sig-err { color: var(--color-danger); font-weight: 600; }
.wh-sig-none { color: var(--text-muted); font-style: italic; font-size: 0.8rem; }