/* portal-resisn.css — Modul PARTNER "Resi & SN" (portal-resisn.js). Kelas ter-scope `.rsn-*`.
   Lebar panel = SAMA dengan Cek Stok (min(95vw,1480px), breakout tengah via margin — bukan transform).
   Standar tabel portal: scroll-tray tinggi tetap + thead sticky + scrollbar accent-grad + zebra + hover.
   Token tema: --card --soft --input --border --accent --accent-grad --accent-dim --text --text2 --muted
   --clay --clay-in --clay-sm --tray-border --ada --sisa --habis. */

.rsn-sec{ width:min(95vw,1480px); margin-left:calc(50% - min(47.5vw,740px)); margin-top:4px; margin-bottom:32px; }
.rsn-sec.hidden{ display:none; }
@media(max-width:780px){ .rsn-sec{ width:100%; margin-left:0; } }

.rsn-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text2); margin:0 0 12px; }
.rsn-head small{ font-weight:400; text-transform:none; letter-spacing:0; color:var(--muted); font-size:11.5px; }
.rsn-card{ background:var(--card); border:1px solid var(--tray-border,var(--border)); border-radius:16px; padding:18px 20px; box-shadow:var(--clay,0 6px 24px rgba(0,0,0,.07)); }

.rsn-tool{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.rsn-q{ flex:1; min-width:220px; background-color:var(--input); border:none; border-radius:11px; padding:10px 14px; font-size:13px; font-family:inherit; color:var(--text); box-shadow:var(--clay-in, inset 0 1px 3px rgba(0,0,0,.12)); }
.rsn-q::placeholder{ color:var(--muted); }
.rsn-q:focus{ outline:none; box-shadow:var(--clay-in, inset 0 1px 3px rgba(0,0,0,.12)), 0 0 0 2px var(--accent-dim); }

/* dropdown centang (Bulan / Invoice) */
.rsn-dd{ position:relative; }
.rsn-ddb{ display:inline-flex; align-items:center; gap:8px; padding:10px 13px; border-radius:11px; border:none; background:var(--input); color:var(--text); font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer; box-shadow:var(--clay-in, inset 0 1px 3px rgba(0,0,0,.12)); white-space:nowrap; }
.rsn-ddb:hover{ color:var(--accent); }
.rsn-ddb svg{ width:12px; height:12px; flex:0 0 auto; }
.rsn-ddc{ font-size:10.5px; font-weight:800; padding:2px 8px; border-radius:10px; background:var(--accent-dim); color:var(--accent); }
.rsn-ddp{ position:absolute; top:calc(100% + 6px); left:0; z-index:40; width:280px; background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:0 18px 46px -14px rgba(0,0,0,.45); padding:8px; display:none; }
.rsn-dd.open .rsn-ddp{ display:block; }
.rsn-ddf{ width:100%; box-sizing:border-box; background:var(--input); border:none; border-radius:9px; padding:8px 11px; font-size:12px; font-family:inherit; color:var(--text); margin:0 0 6px; box-shadow:var(--clay-in, none); }
.rsn-ddl{ max-height:300px; overflow:auto; scrollbar-width:thin; scrollbar-color:var(--accent) transparent; }
.rsn-opt{ display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:8px; font-size:12.5px; cursor:pointer; white-space:nowrap; user-select:none; color:var(--text); }
.rsn-opt:hover{ background:var(--accent-dim); }
.rsn-opt input{ accent-color:#7B3FE4; width:15px; height:15px; margin:0; flex:0 0 auto; }
.rsn-opt small{ margin-left:auto; color:var(--muted); font-size:11px; }
.rsn-opt.all{ border-bottom:1px solid var(--border); border-radius:8px 8px 0 0; margin-bottom:4px; font-weight:700; }
.rsn-opt.hide{ display:none; }

.rsn-cnt{ margin-left:auto; font-size:11.5px; font-weight:700; color:var(--muted); background:var(--soft); border-radius:20px; padding:7px 14px; box-shadow:var(--clay-in, inset 0 1px 3px rgba(0,0,0,.1)); white-space:nowrap; }
.rsn-dl{ display:inline-flex; align-items:center; gap:8px; background:var(--accent-grad); color:#fff; border:none; border-radius:11px; padding:10px 16px; font-size:12.5px; font-weight:700; font-family:inherit; cursor:pointer; white-space:nowrap; transition:transform .14s, filter .14s; }
.rsn-dl svg{ width:14px; height:14px; }
.rsn-dl:hover{ filter:brightness(1.07); transform:translateY(-1px); }
.rsn-dl:disabled{ opacity:.55; cursor:default; transform:none; }

/* tabel: scroll-tray + zebra + hover */
.rsn-scroll{ overflow:auto; max-height:62vh; scrollbar-width:thin; scrollbar-color:var(--accent) transparent; }
.rsn-scroll::-webkit-scrollbar{ width:11px; height:11px; }
.rsn-scroll::-webkit-scrollbar-track{ background:var(--input); border-radius:10px; box-shadow:var(--clay-in, inset 0 1px 3px rgba(0,0,0,.1)); }
.rsn-scroll::-webkit-scrollbar-thumb{ background:var(--accent-grad); border-radius:10px; border:3px solid transparent; background-clip:padding-box; }
.rsn-tbl{ width:100%; border-collapse:collapse; min-width:980px; }
.rsn-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:10px 12px; border-bottom:1.5px solid var(--border); white-space:nowrap; }
.rsn-tbl td{ padding:10px 12px; border-bottom:1px solid var(--border); font-size:12.5px; vertical-align:middle; }
.rsn-tbl tbody tr:nth-child(odd) td{ background:color-mix(in srgb, var(--accent) 6%, transparent); }
.rsn-tbl tbody tr:hover td{ background:var(--soft); }
.rsn-tgl{ white-space:nowrap; color:var(--text2); }
.rsn-inv{ font-family:'Montserrat',monospace; font-weight:700; font-size:12px; white-space:nowrap; }
.rsn-mtm{ font-family:'Montserrat',monospace; font-weight:700; font-size:12px; white-space:nowrap; }
.rsn-mtm small{ display:block; font-family:inherit; font-weight:400; font-size:11px; color:var(--muted); white-space:normal; max-width:280px; margin-top:2px; }
.rsn-sn{ font-family:ui-monospace,Menlo,Consolas,monospace; font-weight:800; font-size:12.5px; letter-spacing:.02em; white-space:nowrap; }
.rsn-nil{ color:var(--muted); font-size:11.5px; }
/* kolom Bundling: komponen bundling di kanan unit induknya (MTM · SN), bertumpuk ke bawah (19 Okt 2026) */
.rsn-bnd{ min-width:250px; }
.rsn-bl{ display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; padding:2px 0; line-height:1.35; }
.rsn-bl + .rsn-bl{ border-top:1px dashed var(--border); margin-top:3px; padding-top:4px; }
.rsn-bl .m{ font-size:10.5px; font-weight:700; color:var(--text2); text-transform:uppercase; letter-spacing:.02em; }
.rsn-bl .s{ font-family:ui-monospace,Menlo,Consolas,monospace; font-weight:800; font-size:12px; letter-spacing:.02em; white-space:nowrap; }
.rsn-tag{ display:inline-block; font-size:9.5px; font-weight:800; letter-spacing:.04em; padding:2px 7px; border-radius:6px; margin-left:6px; vertical-align:1px; }
.rsn-tag.ret{ color:var(--sisa); background:color-mix(in srgb,var(--sisa) 15%,transparent); }
.rsn-tag.bnd{ color:var(--text2); background:var(--soft); }
.rsn-rl{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--accent); text-decoration:none; background:var(--accent-dim); border-radius:20px; padding:5px 11px; margin:2px 6px 2px 0; white-space:nowrap; }
.rsn-rl svg{ width:12px; height:12px; flex:0 0 auto; }
.rsn-rl:hover{ filter:brightness(1.1); text-decoration:underline; }
.rsn-rt{ display:inline-block; font-size:11.5px; color:var(--text2); margin:2px 6px 2px 0; white-space:nowrap; }
.rsn-empty{ text-align:center; color:var(--muted); padding:26px; font-size:13px; }
.rsn-foot{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:10px; font-size:11.5px; color:var(--muted); line-height:1.5; }
.rsn-foot .sp{ flex:1; }
.rsn-more{ font-family:inherit; font-size:12px; font-weight:700; padding:7px 13px; border-radius:10px; border:1px solid var(--border); background:var(--card); color:var(--text); cursor:pointer; }
.rsn-more:hover{ border-color:var(--accent); color:var(--accent); }

@media(max-width:640px){
  .rsn-card{ padding:14px; }
  .rsn-q{ min-width:100%; }
  .rsn-cnt{ margin-left:0; }
  .rsn-ddp{ width:min(280px, calc(100vw - 48px)); }
  .rsn-dd:last-of-type .rsn-ddp{ left:auto; right:0; }
}
@media (prefers-reduced-motion:reduce){ .rsn-dl{ transition:none; } }