/* 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-uqty span:first-child{ margin-top:0; margin-bottom:2px; }  /* label di ATAS angka (box ranking kartu Laris) */
.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); }
/* aturan lampu insight: merah = minus, hijau = naik, ungu = flat */
.trl-iline b.trl-up{ color:var(--ada,#10B981); }
.trl-iline b.trl-down{ color:var(--habis,#E05050); }
.trl-iline b.trl-flat{ color:var(--accent); }
/* hero KONDISI PASAR di kanan insight (di HP pindah ke atas) */
.trl-irow{ display:flex; gap:18px; align-items:stretch; }
.trl-irow .trl-insight{ flex:1; min-width:0; }
.trl-ihero{ flex:0 0 auto; display:flex; gap:12px; align-items:stretch; }  /* wadah transparan — tiap statistik KOTAK sendiri */
.ih-item{ flex:1; min-width:148px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  background:var(--input); border-radius:14px; padding:16px 12px; text-align:center;
  box-shadow:var(--clay-in, inset 0 1px 3px rgba(0,0,0,.12)); }
.ih-item .ih-lbl{ font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.ih-row{ display:flex; align-items:center; justify-content:center; gap:8px; }  /* panah di KIRI angka */
.ih-item .ih-arr{ font-size:24px; line-height:1; font-weight:800; }
.ih-item .ih-pct{ font-size:28px; font-weight:800; line-height:1.15; }
.ih-item .ih-cap{ font-size:10px; color:var(--muted); margin-top:8px; line-height:1.45; text-align:center; }
.ih-item.up .ih-arr, .ih-item.up .ih-pct{ color:var(--ada,#10B981); }
.ih-item.down .ih-arr, .ih-item.down .ih-pct{ color:var(--habis,#E05050); }
.ih-item.flat .ih-arr, .ih-item.flat .ih-pct{ color:var(--accent); }
@media (max-width:640px){
  .trl-irow{ flex-direction:column-reverse; }
  .trl-ihero{ width:100%; }
  .ih-item{ min-width:0; }
}
.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); }
/* baris angka besar (Benchmark / Ritme Belanja) */
.trl-bigrow{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.trl-bignum{ font-size:28px; font-weight:800; color:var(--accent); line-height:1; }
.trl-bignum.down{ color:var(--habis,#E05050); }   /* growth turun: panah + angka merah */
.trl-neg{ color:var(--habis,#E05050); }           /* nilai minus (mis. median partner) merah */
.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); }
/* angka total di atas batang chart besar — selalu tampil (tanpa hover) */
.tc-vlbl{ font-size:10px; font-weight:800; fill:var(--text2); }
@media(max-width:520px){ .tc-vlbl{ font-size:9px; } }
.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); }

/* ---- batch3 Produk Terlaris (25 Jul): badge peringkat, Tren Produk #1, Sweet Spot Harga ---- */
.trl-tbdg{ display:inline-block; font-size:9px; font-weight:800; letter-spacing:.04em; border-radius:999px; padding:2px 7px; margin-left:6px; vertical-align:1px; white-space:nowrap; }
.trl-tbdg.hot{ background:linear-gradient(135deg,#7B3FE4,#5535C0); color:#fff; }
.trl-tbdg.new{ background:color-mix(in srgb,var(--accent) 14%,transparent); color:var(--accent); }
.trl-tbdg.up{ background:color-mix(in srgb,var(--ada,#10B981) 14%,transparent); color:var(--ada,#10B981); }
.trl-tbdg.dn{ background:var(--input); color:var(--muted); }
.trl-t1name{ font-size:12px; font-weight:800; margin:2px 0 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Chart Tren Produk #1 — bar per bulan (tahun ini vs tahun lalu). Garis putus-putus
   versi lama DIHAPUS: dashing terbaca sebagai proyeksi, padahal itu data tahun lalu. */
.t1w{ position:relative; margin-top:8px; }
.t1svg{ width:100%; height:118px; display:block; overflow:visible; }
.t1-grid{ stroke:var(--border); stroke-width:1; }          /* hairline SOLID, bukan dashed */
.t1-future{ fill:var(--muted); opacity:.09; }
.t1-ylbl{ font-size:7.5px; fill:var(--muted); }
.t1-xlbl{ font-size:8px; fill:var(--muted); }
.t1-cur{ fill:#7B3FE4; }
.t1-prev{ fill:var(--muted); opacity:.45; }
.t1-end{ font-size:8.5px; font-weight:800; fill:var(--accent); }
.t1-head{ font-size:11.5px; font-weight:700; color:var(--text2); margin:2px 0 2px; }
.t1-head b{ color:var(--accent); font-size:13px; }
.t1-head .trl-up{ color:var(--ada,#10B981); } .t1-head .trl-down{ color:var(--habis,#E05050); } .t1-head .trl-flat{ color:var(--accent); }
.t1-hsub{ color:var(--muted); font-weight:600; font-size:10px; }
.t1tip{ position:absolute; pointer-events:none; background:var(--card); border:1px solid var(--tray-border); border-radius:10px; padding:7px 10px; box-shadow:var(--clay,0 6px 20px rgba(0,0,0,.3)); font-size:11px; line-height:1.55; opacity:0; transform:translate(-50%,-108%); transition:opacity .12s; white-space:nowrap; z-index:5; }
.t1tip b{ color:var(--accent); }
.trl-lgbar{ width:10px; height:10px; border-radius:3px; display:inline-block; }
.trl-lgbar.cur{ background:#7B3FE4; }
.trl-lgbar.prev{ background:var(--muted); opacity:.45; }
.trl-lgbar.fut{ background:var(--muted); opacity:.14; }
.trl-t1legend small{ color:var(--muted); font-weight:600; }
.trl-t1legend{ margin-top:10px; margin-bottom:0; }
.trl-pbrow{ display:flex; align-items:center; gap:8px; padding:5px 0; }
.trl-pbband{ flex:0 0 66px; font-size:11.5px; font-weight:700; color:var(--text2); }
.trl-pbrow.top .trl-pbband{ color:var(--accent); font-weight:800; }
.trl-pbrow .trl-track{ flex:1; }
.trl-pbpct{ flex:0 0 44px; text-align:right; font-size:12px; font-weight:800; }
.trl-pbrow.top .trl-pbpct{ color:var(--accent); }
.trl-fill.dim{ opacity:.45; }

/* ---- Mix Kategori & Kelas: pemisah Tokomu vs Pasar (25 Jul) ---- */
.trl-mixhdr{ font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin:0 0 10px; }
.trl-mixhdr small{ font-weight:600; text-transform:none; letter-spacing:0; color:var(--muted); }
.trl-mixsec.pasar{ border-top:1px dashed var(--border); margin-top:16px; padding-top:14px; }

/* ================= MODUL SALES (portal-sales-analisa.js) — kelas .strl-* =================
   Versi sales boleh menampilkan unit absolut: tiap elemen relatif diberi penyebut. */
.strl-den{ float:right; font-size:10px; font-weight:600; color:var(--muted); letter-spacing:0; }
.strl-den b{ color:var(--text2); font-weight:800; }
.strl-den.blk{ float:none; display:block; font-size:10px; margin:-2px 0 6px; }
.strl-barrow{ display:flex; align-items:center; gap:8px; }
.strl-barrow .trl-track{ flex:1; }
.strl-pct{ flex:0 0 54px; text-align:right; font-size:12px; font-weight:800; color:var(--accent); white-space:nowrap; line-height:1.15; }
.strl-pct small{ display:block; font-size:9px; font-weight:700; color:var(--muted); letter-spacing:.02em; margin-top:1px; }
.strl-pbu{ flex:0 0 46px; text-align:right; font-size:10.5px; font-weight:700; color:var(--muted); }
.trl-uqty.alt{ background:transparent; box-shadow:none; border:1px dashed var(--border); min-width:70px; }
.trl-uqty.alt b{ color:var(--text2); font-size:15px; }
@media (max-width:640px){ .strl-den{ float:none; display:block; margin-top:3px; } .strl-pbu{ display:none; } }

/* ---- Panel Analisa Penjualan versi SALES (Fase 2) — kelas .sa-* ---- */
.sa-brow{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); }
.sa-brow:last-child{ border-bottom:none; }
.sa-brow.me{ background:color-mix(in srgb,var(--accent) 8%,transparent); border-radius:10px; padding-left:8px; padding-right:8px; }
.sa-brank{ flex:0 0 20px; height:20px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:800; color:var(--muted); background:var(--input); }
.sa-brow.me .sa-brank{ background:linear-gradient(135deg,#7B3FE4,#5535C0); color:#fff; }
.sa-bname{ flex:1; min-width:0; font-size:13px; font-weight:800; }
.sa-bname small{ font-size:9.5px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.05em; }
.sa-bpct{ flex:0 0 auto; font-size:14px; font-weight:800; }
.sa-bpct.up{ color:var(--ada,#10B981); } .sa-bpct.down{ color:var(--habis,#E05050); } .sa-bpct.flat{ color:var(--accent); }
.sa-bval{ flex:0 0 116px; text-align:right; font-size:11.5px; font-weight:700; color:var(--text2); line-height:1.25; }
.sa-bval small{ display:block; font-size:9.5px; font-weight:600; color:var(--muted); }
.sa-trow{ display:flex; align-items:flex-start; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); }
.sa-trow:last-child{ border-bottom:none; }
.sa-tmain{ flex:1; min-width:0; }
.sa-tname{ display:block; font-size:12.5px; font-weight:800; }
.sa-tmeta{ display:block; font-size:10.5px; color:var(--muted); margin-top:3px; line-height:1.5; }
.sa-tmeta b{ color:var(--text2); font-weight:800; }
.sa-tside{ flex:0 0 auto; text-align:right; }
.sa-tsub{ display:block; font-size:9.5px; color:var(--muted); margin-top:4px; }
.trl-cdelta.down-chip{ background:color-mix(in srgb,var(--habis,#E05050) 14%,transparent); color:var(--habis,#E05050); }
.sa-pgrp{ font-size:11px; font-weight:800; letter-spacing:.04em; color:var(--accent); margin:14px 0 6px; }
.sa-pgrp:first-child{ margin-top:0; }
.sa-pgrp small{ font-weight:600; letter-spacing:0; color:var(--muted); }
.sa-insight .trl-iline b.trl-up{ color:var(--ada,#10B981); }
.sa-insight .trl-iline b.trl-down{ color:var(--habis,#E05050); }
.sa-insight .trl-iline b.trl-flat{ color:var(--accent); }

/* ---- FIX lebar mobile kartu Mix (donut) — sebelumnya meluber 27px di 390px:
   min-width .trl-dkey/.trl-dpct + donut 104px + padding melampaui lebar layar.
   Berlaku utk modul partner & sales (kelas dipakai bersama). Standar: no scroll-X. ---- */
@media(max-width:520px){
  .trl-dbody{ gap:12px; }
  .trl-donut{ width:84px; height:84px; }
  .trl-drows{ flex:1 1 auto; min-width:0; }
  .trl-drow{ gap:6px; }
  .trl-dkey{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .trl-dpct{ min-width:0; }
  .trl-ddel{ padding:2px 6px; font-size:9px; }
}
@media(max-width:360px){
  .trl-dbody{ flex-wrap:wrap; gap:10px; }          /* 320px: donut turun ke baris sendiri */
  .trl-donut{ width:72px; height:72px; }
  .trl-drows{ flex:1 1 100%; }
  .trl-seg.trl-mseg{ flex-wrap:wrap; }             /* pill filter Tren Pasar ikut membungkus */
  .trl-seg.trl-mseg .trl-per{ padding:6px 10px; font-size:11px; }
}

/* ---- Tabel daftar aksi sales (standar tabel portal: scroll-tray + zebra + hover + search) ---- */
.sa-tools{ display:flex; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.sa-search{ flex:1; min-width:180px; background-color:var(--input); border:none; border-radius:11px; padding:9px 13px; font-size:12.5px; font-family:inherit; color:var(--text); box-shadow:var(--clay-in, inset 0 1px 3px rgba(0,0,0,.12)); }
.sa-search::placeholder{ color:var(--muted); }
.sa-count{ margin-left:auto; font-size:11px; font-weight:700; color:var(--muted); background:var(--soft); border-radius:20px; padding:6px 13px; box-shadow:var(--clay-in, inset 0 1px 3px rgba(0,0,0,.1)); white-space:nowrap; }
.sa-tray{ overflow:auto; max-height:340px; scrollbar-width:thin; scrollbar-color:var(--accent) transparent; border-radius:12px; }
.sa-tray::-webkit-scrollbar{ width:11px; height:11px; }
.sa-tray::-webkit-scrollbar-track{ background:var(--input); border-radius:10px; box-shadow:var(--clay-in, inset 0 1px 3px rgba(0,0,0,.1)); }
.sa-tray::-webkit-scrollbar-thumb{ background:var(--accent-grad,linear-gradient(135deg,#7B3FE4,#5535C0)); border-radius:10px; border:3px solid transparent; background-clip:padding-box; }
.sa-tbl{ width:100%; border-collapse:collapse; min-width:640px; }
.sa-tbl thead th{ position:sticky; top:0; background:var(--card); z-index:2; text-align:left; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--text2); padding:9px 11px; border-bottom:1.5px solid var(--border); white-space:nowrap; }
.sa-tbl th.r, .sa-tbl td.r{ text-align:right; }
.sa-tbl td{ padding:9px 11px; border-bottom:1px solid var(--border); font-size:12.5px; vertical-align:middle; }
.sa-tbl tbody tr:nth-child(odd){ background:color-mix(in srgb, var(--accent) 6%, transparent); }
.sa-tbl tbody tr:hover td{ background:var(--soft); }
.sa-tbl tr.sa-gsep td{ border-top:1px solid var(--border); }
/* keterangan satuan kartu Tren Produk #1 (partner): angka = poin indeks, bukan unit */
.trl-t1note{ margin:-2px 0 12px; line-height:1.55; }
.trl-t1note b{ color:var(--text2); font-weight:800; }
/* kartu Penjualan per Type & Spek: baris total menempel di bawah tray */
.sa-tbl tfoot td{ position:sticky; bottom:0; background:var(--card); box-shadow:0 -1px 0 var(--border); padding:10px 11px; font-size:12.5px; z-index:2; }
.sa-tbl tfoot .sa-cname{ font-weight:800; }
.sa-cmtm{ min-width:200px; max-width:380px; }  /* full MTM tampil, tak dipotong (permintaan Ayok 3 Agu 2026) */
.sa-cmtm b{ color:var(--accent); font-weight:800; }
.sa-cname{ font-weight:800; }
.sa-cname small{ display:block; font-size:9.5px; font-weight:600; color:var(--muted); margin-top:2px; }
.sa-cmuted{ color:var(--muted); font-size:11.5px; }
.sa-cmtm{ font-size:10.5px; font-weight:700; color:var(--text2); white-space:normal; line-height:1.5; }  /* wrap multi-baris; kode MTM tetap utuh (pisah di koma/spasi) */
@media(max-width:640px){ .sa-cmtm{ min-width:170px; max-width:260px; font-size:10px; } }  /* HP: kolom MTM lebih ringkas, tetap full & wrap */
.trl-head .sa-sseg{ margin-left:auto; }
.trl-head .sa-pseg{ margin-left:0; }  /* seg cakupan (Saya/Semua HJN) + seg periode berdampingan di kanan */
.sa-cnum{ font-variant-numeric:tabular-nums; font-weight:800; }
.sa-cdown{ font-variant-numeric:tabular-nums; font-weight:800; color:var(--habis,#E05050); }
.sa-empty{ text-align:center; color:var(--muted); padding:20px; font-size:12.5px; }
/* Growth YoY sebagai sub-seksi di dalam kartu Insight */
.sa-boardsec{ border-top:1px dashed var(--border); margin-top:16px; padding-top:14px; }
.sa-bhead{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
.sa-bhead small{ font-weight:400; text-transform:none; letter-spacing:0; color:var(--muted); }
.sa-bhead .trl-seg{ margin-left:auto; }