/* ──────────────────────────────────────────────────────────────────────────
   Thiên Đỉnh (Great Height) — cluster difficulty analytics.
   Scoped under #tab-greatheight. Reuses theme tokens + shared components
   (.panel, .stat-card, .chip, .modal, .alc-bar-*) from style.css.
   ────────────────────────────────────────────────────────────────────────── */

/* Difficulty heatmap palette (0 = easiest → 4 = hardest) */
#tab-greatheight,
.td-modal {
  --td-h0: #3dffa0; /* Rất dễ  */
  --td-h1: #a3e635; /* Dễ      */
  --td-h2: #f0b429; /* Trung bình */
  --td-h3: #ff9f1c; /* Khó     */
  --td-h4: #ff4455; /* Rất khó */
  --td-mine: var(--gold);
}
.td-h0 { --td-c: var(--td-h0); }
.td-h1 { --td-c: var(--td-h1); }
.td-h2 { --td-c: var(--td-h2); }
.td-h3 { --td-c: var(--td-h3); }
.td-h4 { --td-c: var(--td-h4); }

/* ── Header / season picker ── */
.td-head { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:14px; }
.td-head h2 { margin:0; font-size:1.3rem; color:var(--gold); letter-spacing:.5px; }
.td-head .td-sub { color:var(--text-dim); font-size:.85rem; width:100%; margin-top:-4px; }
.td-seasons { display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 18px; }

/* ── KPI grid (reuses .stat-card visual; sets accent per card) ── */
.td-kpis {
  display:grid; gap:12px; margin-bottom:18px;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
}
.td-kpis .stat-card { --accent: var(--kpi-c, var(--gold)); }
.td-kpis .stat-card::after { background: var(--kpi-c, var(--gold)); }

/* ── Toolbar ── */
.td-toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:16px; }
.td-toolbar .search-wrap { flex:1 1 280px; }
.td-toolbar .search-input { width:100% !important; }
.td-toolbar select { width:auto; min-width:150px; flex:0 0 auto; }
.td-result-count { color:var(--text-dim); font-size:.82rem; margin-left:auto; }

/* ── Smart ranking tables ── */
.td-rank-grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); margin-bottom:6px; }
.td-rank-card .panel-title { margin-bottom:10px; }
.td-rank-card table { width:100%; border-collapse:collapse; }
.td-rank-card td { padding:6px 8px; font-size:.84rem; border-bottom:1px solid rgba(42,48,80,.5); }
.td-rank-card tr:last-child td { border-bottom:none; }
.td-rank-card .td-rk-name { text-align:left; color:var(--text); cursor:pointer; }
.td-rank-card .td-rk-name:hover { color:var(--gold); }
.td-rank-card .td-rk-val { text-align:right; font-weight:700; color:var(--td-c, var(--gold)); white-space:nowrap; width:64px; }
.td-rank-card .td-rk-pos { text-align:center; color:var(--text-dim); width:26px; }

/* ── Cluster card grid ── */
.td-grid {
  display:grid; gap:14px; margin-top:6px;
  grid-template-columns:repeat(auto-fill, minmax(248px, 1fr));
}
.td-card {
  position:relative; background:var(--bg3); border:1px solid var(--border);
  border-left:4px solid var(--td-c, var(--gold)); border-radius:12px; padding:14px 15px 13px;
  cursor:pointer; transition:transform .15s, box-shadow .15s, border-color .15s;
  overflow:hidden;
}
.td-card::before {
  /* subtle heatmap wash */
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.06;
  background:radial-gradient(120% 90% at 0% 0%, var(--td-c, var(--gold)), transparent 60%);
}
.td-card:hover { transform:translateY(-3px); box-shadow:0 10px 26px var(--shadow-panel); border-color:var(--td-c, var(--gold)); }
.td-card.is-mine { border:1px solid var(--td-mine); border-left-width:4px; box-shadow:0 0 0 1px rgba(240,180,41,.35) inset, 0 6px 20px rgba(240,180,41,.12); }

.td-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:8px; }
.td-card-top > div:first-child { min-width:0; flex:1 1 auto; }   /* cho phép tên co lại, badge không bị đẩy ra ngoài */
.td-card-name { font-weight:700; font-size:1.02rem; color:var(--text); letter-spacing:.3px; overflow-wrap:anywhere; }
.td-card-servers { font-size:.72rem; color:var(--text-dim); margin-top:1px; word-break:break-word; }
.td-diff-badge {
  flex:0 0 auto; font-size:.72rem; font-weight:700; padding:3px 9px; border-radius:20px;
  color:#11131a; background:var(--td-c, var(--gold)); white-space:nowrap; max-width:46%;
}
.td-diff-score { font-size:.66rem; opacity:.85; font-weight:700; }

/* KPI cards có value là tên cụm → chữ nhỏ hơn để không vỡ dòng xấu */
.td-kpi-name { font-size:1rem; line-height:1.15; display:inline-block; }

/* cutline highlight block — the headline numbers */
.td-cuts { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0; }
.td-cut { background:var(--bg2); border:1px solid var(--border); border-radius:9px; padding:7px 9px; }
.td-cut.is-hero { border-color:var(--td-c, var(--gold)); }
.td-cut-label { font-size:.66rem; text-transform:uppercase; letter-spacing:.4px; color:var(--text-dim); }
.td-cut-val { font-size:1.12rem; font-weight:700; color:var(--text); margin-top:1px; }
.td-cut.is-hero .td-cut-val { color:var(--td-c, var(--gold)); }

.td-meta-row { display:flex; justify-content:space-between; font-size:.76rem; color:var(--text-dim); margin-top:6px; }
.td-meta-row b { color:var(--text); font-weight:700; }

/* competition progress bar (reuse alc-bar look) */
.td-comp { margin-top:9px; }
.td-comp-head { display:flex; justify-content:space-between; font-size:.72rem; color:var(--text-dim); margin-bottom:4px; }
.td-comp-head b { color:var(--blue); }
.td-bar-track { background:rgba(255,255,255,.06); border-radius:4px; height:8px; overflow:hidden; }
.td-bar-fill { height:100%; border-radius:4px; transition:width .35s ease; }

/* badges row */
.td-badges { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.td-badge { font-size:.7rem; font-weight:700; padding:3px 9px; border-radius:20px; border:1px solid var(--border); background:var(--bg2); color:var(--text-dim); }
.td-badge.whale { color:var(--blue); border-color:rgba(79,168,255,.4); background:rgba(79,168,255,.1); }
.td-badge.beginner { color:var(--green); border-color:rgba(61,255,160,.4); background:rgba(61,255,160,.1); }
.td-badge.mine { color:var(--gold); border-color:var(--border-gold); background:rgba(240,180,41,.12); }

/* ── Detail modal extras (reuses .modal / .modal-overlay) ── */
/* Header cố định, chỉ body cuộn → nút đóng ✕ luôn nhìn thấy dù bảng dài */
.td-modal .modal { max-width:680px; position:relative; display:flex; flex-direction:column; overflow:hidden; max-height:88vh; }
.td-modal .modal-header { flex:0 0 auto; }
.td-modal .modal-body { flex:1 1 auto; min-height:0; overflow-y:auto; }
.td-modal-close {
  flex:0 0 auto; width:34px; height:34px; border-radius:50%; border:1px solid var(--border);
  background:var(--bg3); color:var(--text); cursor:pointer; font-size:1rem; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:background .15s, color .15s, border-color .15s;
}
.td-modal-close:hover { background:var(--red); color:#fff; border-color:transparent; }
.td-modal-servers { display:flex; flex-wrap:wrap; gap:5px; margin:4px 0 14px; }
.td-modal-servers span { font-size:.74rem; padding:2px 8px; border-radius:6px; background:var(--bg3); border:1px solid var(--border); color:var(--text-dim); }
.td-modal table.td-rank-table { width:100%; border-collapse:separate; border-spacing:0; margin-top:6px; table-layout:fixed; }
.td-modal table.td-rank-table th,
.td-modal table.td-rank-table td { padding:9px 12px; vertical-align:middle; }
.td-modal table.td-rank-table thead th { font-size:.7rem; text-transform:uppercase; letter-spacing:.5px; color:var(--text-dim); font-weight:700; border-bottom:1px solid var(--border); }
.td-modal table.td-rank-table tbody td { font-size:.88rem; color:var(--text); border-bottom:1px solid rgba(42,48,80,.32); }
.td-modal table.td-rank-table tbody tr:last-child td { border-bottom:none; }
.td-modal table.td-rank-table tbody tr { transition:background .14s; }
.td-modal table.td-rank-table tbody tr:hover td { background:rgba(255,255,255,.035); }
/* Căn lề rõ ràng từng cột — header và ô khớp nhau */
.td-modal table.td-rank-table .c-rk  { width:50px;  text-align:center; white-space:nowrap; }
.td-modal table.td-rank-table .c-pl  { text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.td-modal table.td-rank-table .c-num { width:96px;  text-align:right; font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; }
/* width + căn phải áp cho CẢ header lẫn ô (header phải khớp giá trị) */
.td-modal table.td-rank-table .c-gap { width:96px; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.td-modal table.td-rank-table td.c-gap { font-size:.76rem; color:var(--text-dim); }   /* chỉ ô dữ liệu mới dịu màu; header giữ màu thead */

/* Rank badge + medal top-3 */
.td-rkb { display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:22px; padding:0 6px; border-radius:6px; font-size:.78rem; font-weight:700; background:var(--bg4); color:var(--text-dim); }
.td-rank-table tr.r1 .td-rkb { background:linear-gradient(135deg,#ffd97d,#e0a528); color:#3a2a00; }
.td-rank-table tr.r2 .td-rkb { background:linear-gradient(135deg,#e6ecf5,#aeb8cc); color:#1e2433; }
.td-rank-table tr.r3 .td-rkb { background:linear-gradient(135deg,#f0b487,#cd7f45); color:#3a1d00; }
.td-rank-table tr.r1 td { background:rgba(240,180,41,.05); }
.td-rank-table tr.r1 td.c-num { color:var(--gold-light, var(--gold)); }

/* Score distribution — HTML bars (no SVG → không méo chữ) */
.td-dist { margin-top:4px; }
.td-dist-row { display:grid; grid-template-columns:36px 1fr 72px; align-items:center; gap:9px; margin-bottom:7px; }
.td-dist-rank { font-size:.78rem; color:var(--text-dim); font-weight:700; }
.td-dist-track { height:20px; background:rgba(255,255,255,.05); border-radius:5px; overflow:hidden; }
.td-dist-bar { height:100%; border-radius:5px; background:var(--td-c, var(--gold)); transition:width .4s ease; }
.td-dist-val { font-size:.8rem; font-weight:700; color:var(--text); text-align:right; white-space:nowrap; }

/* ── Skeleton loading ── */
.td-skel { border-radius:12px; background:linear-gradient(100deg, var(--bg3) 30%, var(--bg4) 50%, var(--bg3) 70%); background-size:200% 100%; animation:tdShimmer 1.2s infinite linear; }
.td-skel-kpi { height:76px; }
.td-skel-card { height:210px; }
@keyframes tdShimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
@media (prefers-reduced-motion: reduce) { .td-skel { animation:none; } }

/* ── Responsive ── */
@media (max-width: 640px) {
  .td-grid { grid-template-columns:1fr; }
  .td-rank-grid { grid-template-columns:1fr; }
  .td-result-count { width:100%; margin-left:0; }
  .td-head h2 { font-size:1.15rem; }
}