/* portal-terlaris.css — Modul PARTNER "Terlaris & Analisa" (portal-terlaris.js).
   Kelas ter-scope .trl-* (layout/list) + .tc-* (chart). Pakai token tema yang sudah ada
   (--accent/--card/--input/--border/--text/--text2/--muted/--tray-border/--clay*).
   Responsive sesuai standar: grid 3 kolom → 1 kolom di ≤880px, tanpa scroll-X. */

.trl-sec{ margin:18px 0 32px; display:flex; flex-direction:column; gap:18px; }
.trl-sec.hidden{ display:none; }
.trl-card{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:18px 20px; box-shadow:var(--clay,0 6px 24px rgba(0,0,0,.07)); }
.trl-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text2); margin:0 0 14px; }
.trl-head small{ font-weight:400; text-transform:none; letter-spacing:0; color:var(--muted); }
.trl-head .trl-seg, .trl-head .trl-metric{ margin-left:auto; }

/* ---- segmented toggle Bulan Ini / Tahun Ini ---- */
.trl-seg{ display:inline-flex; background:var(--input); border-radius:11px; padding:3px; box-shadow:var(--clay-in, inset 0 1px 3px rgba(0,0,0,.12)); }
.trl-per{ border:none; background:transparent; color:var(--muted); font-family:inherit; font-size:12px; font-weight:700; padding:7px 14px; border-radius:9px; cursor:pointer; transition:color .15s, background .15s; letter-spacing:0; text-transform:none; }
.trl-per.active{ background:linear-gradient(135deg,#7B3FE4,#5535C0); color:#fff; }

/* ---- grid 3 kategori ---- */
.trl-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media(max-width:880px){ .trl-grid{ grid-template-columns:1fr; } }
.trl-cat{ font-size:12px; font-weight:800; color:var(--text); margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.trl-list{ display:flex; flex-direction:column; gap:10px; }
.trl-note{ font-size:12.5px; color:var(--muted); padding:6px 0; }
.trl-row{ display:flex; align-items:flex-start; gap:10px; min-width:0; }
.trl-rank{ flex:0 0 auto; width:22px; height:22px; border-radius:7px; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:var(--muted); background:var(--input); box-shadow:var(--clay-in, inset 0 1px 3px rgba(0,0,0,.12)); margin-top:1px; }
.trl-rank.one{ background:linear-gradient(135deg,#7B3FE4,#5535C0); color:#fff; box-shadow:none; }
.trl-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.trl-name{ font-size:12.5px; font-weight:600; color:var(--text); line-height:1.35; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.trl-track{ display:block; height:7px; border-radius:999px; background:var(--input); box-shadow:var(--clay-in, inset 0 1px 3px rgba(0,0,0,.12)); overflow:hidden; }
.trl-fill{ display:block; height:100%; border-radius:999px; background:linear-gradient(135deg,#7B3FE4,#5535C0); }
.trl-foot{ font-size:11px; color:var(--muted); margin-top:14px; line-height:1.5; }
/* box qty unit terjual (kartu Laris di Pasar — keputusan Ayok 25 Jul) */
.trl-uqty{ flex:0 0 auto; align-self:center; text-align:center; min-width:64px; padding:6px 10px; border-radius:10px;
  background:color-mix(in srgb,#7B3FE4 10%, var(--input)); border:1px solid color-mix(in srgb,#7B3FE4 35%, transparent); }
.trl-uqty b{ display:block; font-size:16px; font-weight:800; color:var(--accent); line-height:1.1; }
.trl-uqty span{ display:block; font-size:8.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-top:2px; }
.trl-umtm{ display:block; font-size:10px; font-weight:600; color:var(--muted); margin-top:3px; letter-spacing:.03em; }
.trl-umtm b{ color:var(--text2); font-weight:800; }

/* ---- metric select (gaya hf-metric portal-history) ---- */
.trl-metric{ appearance:none; -webkit-appearance:none; padding:8px 30px 8px 13px; border-radius:11px; border:1px solid var(--border); background:var(--card) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237B3FE4' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 11px center; color:var(--text); font-size:12px; font-weight:700; font-family:inherit; cursor:pointer; transition:border-color .2s; letter-spacing:0; text-transform:none; }
.trl-metric:hover{ border-color:var(--accent); }

/* ---- panel Analisa: duo grid + insight + pace + gap peluang ---- */
.trl-duo{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:880px){ .trl-duo{ grid-template-columns:1fr; } }
.trl-duo > .trl-card{ margin-top:0; }
.trl-iline{ font-size:13px; color:var(--text2); line-height:1.6; padding:4px 0 4px 16px; position:relative; }
.trl-iline::before{ content:''; position:absolute; left:2px; top:12px; width:6px; height:6px; border-radius:50%; background:linear-gradient(135deg,#7B3FE4,#5535C0); }
.trl-iline b{ color:var(--accent); }
.trl-alabel{ font-weight:400; text-transform:none; letter-spacing:0; color:var(--muted); }
.trl-pname{ color:var(--accent); font-weight:800; }
.trl-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:14px; }
@media(max-width:640px){ .trl-stats{ grid-template-columns:1fr; } }
.trl-stat{ background:var(--input); border-radius:12px; padding:12px 14px; box-shadow:var(--clay-in, inset 0 1px 3px rgba(0,0,0,.12)); }
.trl-stat-v{ font-size:22px; font-weight:800; color:var(--accent); line-height:1.15; }
.trl-stat-l{ font-size:11px; color:var(--muted); margin-top:4px; line-height:1.4; }
.trl-progress{ height:9px; border-radius:999px; background:var(--input); box-shadow:var(--clay-in, inset 0 1px 3px rgba(0,0,0,.12)); overflow:hidden; margin-bottom:10px; }
.trl-progress span{ display:block; height:100%; border-radius:999px; background:linear-gradient(135deg,#7B3FE4,#5535C0); }
.trl-pnote{ font-size:12.5px; color:var(--text2); line-height:1.55; }
.trl-pnote b{ color:var(--accent); }
.trl-gapgrp{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:16px 0 10px; }
.trl-gapgrp:first-child{ margin-top:0; }
/* Gap Peluang — Kartu Angka Besar (Opsi C, pilihan Ayok 25 Jul) */
.trl-cgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; }
.trl-ccell{ background:var(--input); border-radius:14px; padding:14px 12px; text-align:center; }
.trl-ccell.opp{ outline:2px solid #7B3FE4; background:color-mix(in srgb,#7B3FE4 7%, var(--input)); }
.trl-cname{ font-size:12px; font-weight:800; color:var(--text); margin-bottom:8px; }
.trl-cyou{ font-size:24px; font-weight:800; color:var(--accent); line-height:1; }
.trl-cyou small{ display:block; font-size:10px; font-weight:700; color:var(--muted); margin-top:3px; }
.trl-cvs{ font-size:11px; color:var(--muted); margin-top:8px; }
.trl-cdelta{ display:inline-block; font-size:10.5px; font-weight:800; border-radius:999px; padding:3px 9px; margin-top:8px; white-space:nowrap; }
.trl-cdelta.opp{ background:linear-gradient(135deg,#7B3FE4,#5535C0); color:#fff; }
.trl-cdelta.ok{ background:var(--border); color:var(--muted); }
.trl-cdelta.up{ background:color-mix(in srgb,var(--ada,#10B981) 13%,transparent); color:var(--ada,#10B981); }

/* ---- Pola Musiman: mini bar 12 bulan ---- */
.trl-mbars{ display:flex; align-items:flex-end; gap:6px; height:150px; margin-bottom:12px; }
.trl-mcol{ flex:1; min-width:0; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; }
.trl-mval{ font-size:10px; font-weight:800; color:var(--accent); line-height:1; height:12px; margin-bottom:3px; white-space:nowrap; }
.trl-mbar{ width:100%; max-width:26px; border-radius:5px 5px 2px 2px; background:var(--border); }
.trl-mbar.hot{ background:linear-gradient(180deg,#7B3FE4,#5535C0); }
.trl-mlbl{ font-size:9.5px; font-weight:700; color:var(--muted); margin-top:5px; }

/* ---- Radar Restock ---- */
.trl-rrow{ display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:10px; }
.trl-rrow:nth-child(odd){ background:color-mix(in srgb,var(--input) 55%, transparent); }
.trl-rmain{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.trl-rmeta{ font-size:11px; color:var(--muted); }
.trl-rbadges{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.trl-st,.trl-hs{ font-size:10.5px; font-weight:800; border-radius:999px; padding:3px 10px; white-space:nowrap; }
.trl-st.ada{ background:color-mix(in srgb,var(--ada,#10B981) 14%,transparent); color:var(--ada,#10B981); }
.trl-st.sisa{ background:color-mix(in srgb,var(--sisa,#E8A020) 14%,transparent); color:var(--sisa,#E8A020); }
.trl-st.habis{ background:color-mix(in srgb,var(--habis,#E05050) 13%,transparent); color:var(--habis,#E05050); }
.trl-st.off{ background:var(--input); color:var(--muted); }
.trl-hs.turun{ background:color-mix(in srgb,var(--ada,#10B981) 14%,transparent); color:var(--ada,#10B981); }
.trl-hs.naik{ background:color-mix(in srgb,var(--sisa,#E8A020) 14%,transparent); color:var(--sisa,#E8A020); }
.trl-hs.new{ background:linear-gradient(135deg,#7B3FE4,#5535C0); color:#fff; }
.trl-newtag{ display:inline-block; font-size:9.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:linear-gradient(135deg,#7B3FE4,#5535C0); border-radius:999px; padding:2px 8px; margin-left:6px; vertical-align:middle; }

/* ---- Mix Kategori & Kelas: donut + delta (pengganti Radar Restock) ---- */
.trl-dgrid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media(max-width:880px){ .trl-dgrid{ grid-template-columns:1fr; } }
.trl-dtitle{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.trl-dbody{ display:flex; align-items:center; gap:20px; }
.trl-donut{ width:104px; height:104px; flex:0 0 auto; }
.trl-dctr{ font-size:13px; font-weight:800; fill:var(--text); }
.trl-dctrs{ font-size:8px; font-weight:700; fill:var(--muted); letter-spacing:.05em; }
.trl-drows{ flex:0 1 auto; min-width:0; display:flex; flex-direction:column; gap:8px; }
.trl-drow{ display:flex; align-items:center; gap:10px; font-size:12.5px; }
.trl-ddot{ flex:0 0 auto; width:9px; height:9px; border-radius:3px; }
.trl-dkey{ flex:0 0 auto; min-width:92px; font-weight:700; color:var(--text); }
.trl-dpct{ flex:0 0 auto; min-width:52px; text-align:right; font-weight:800; color:var(--accent); }
.trl-ddel{ font-size:10px; font-weight:800; border-radius:999px; padding:2px 8px; white-space:nowrap; }
.trl-ddel.up{ background:color-mix(in srgb,var(--accent) 12%,transparent); color:var(--accent); }
.trl-ddel.down,.trl-ddel.flat{ background:var(--input); color:var(--muted); }

/* ---- legend chart kategori + garis tahun lalu ---- */
.trl-legend{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:10px; }
.trl-lg{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--text2); }
.trl-lgdot{ width:9px; height:9px; border-radius:3px; display:inline-block; }
.trl-lgline{ width:18px; height:0; border-top:2px dashed var(--muted); display:inline-block; }
.trl-lgline.solid{ border-top:2.5px solid var(--accent); }
.tc-prev{ fill:none; stroke:var(--muted); stroke-width:2; stroke-dasharray:5 4; stroke-linejoin:round; opacity:.85; }
.tc-prevdot{ fill:var(--muted); opacity:.85; }
.tc-mkt{ fill:none; stroke:var(--accent); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; filter:drop-shadow(0 4px 8px rgba(123,63,228,.35)); }
.tc-mktdot{ fill:var(--card); stroke:var(--accent); stroke-width:2.2; }
.trl-chart-wrap.mkt{ height:240px; }
@media(max-width:640px){ .trl-chart-wrap.mkt{ height:210px; } }

/* ---- summary + chart (adaptasi .hc-* portal-history, self-contained) ---- */
.trl-summary{ font-size:13px; color:var(--muted); margin-bottom:10px; }
.trl-summary b{ color:var(--accent); font-size:15px; }
.trl-chart-wrap{ position:relative; height:300px; }
@media(max-width:640px){ .trl-chart-wrap{ height:250px; } }
.trl-chart-wrap svg{ width:100%; height:100%; display:block; overflow:visible; }
.tc-grid{ stroke:var(--border); stroke-width:1; }
.tc-ylbl{ font-size:10px; fill:var(--muted); }
.tc-xlbl{ font-size:10px; font-weight:700; fill:var(--muted); }
.tc-line{ fill:none; stroke:var(--accent); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; filter:drop-shadow(0 4px 8px rgba(123,63,228,.35)); }
.tc-dot{ fill:var(--card); stroke:var(--accent); stroke-width:2.5; }
.tc-hover{ fill:var(--accent); }
.tc-tip{ position:absolute; pointer-events:none; background:var(--card); border:1px solid var(--tray-border); border-radius:11px; padding:8px 12px; box-shadow:var(--clay); font-size:11.5px; opacity:0; transform:translate(-50%,-130%); transition:opacity .12s; white-space:nowrap; z-index:5; }
.tc-tip b{ color:var(--accent); }