/* Tab laporan otomatis Warp-Studio di panel admin (laporan_admin.js).
   Token warna = milik admin.html (:root). Mockup: repo WS docs/mockup/laporan_admin.html. */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:18px;overflow-x:auto}
.tab{background:none;border:none;color:var(--dim);font-size:13.5px;font-weight:700;padding:10px 14px;
  border-bottom:2px solid transparent;white-space:nowrap}
.tab:hover{color:var(--text)}
.tab.on{color:var(--text);border-bottom-color:var(--magenta)}
.tab .cnt{font-size:10.5px;background:var(--danger);color:#fff;border-radius:999px;padding:1px 6px;margin-left:5px}
.lap .filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.lap .filters select{max-width:220px}
.lap .stat .d{font-size:11.5px;margin-top:3px;color:var(--dim)}
.lap .up{color:var(--ok)} .lap .down{color:var(--danger)}
.lap .g2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.lap table{min-width:0}
.lap .tablewrap table{min-width:820px}
.lap tr.klik{cursor:pointer}
.lap td.num,.lap th.num{text-align:right;font-variant-numeric:tabular-nums}
.lap .kosong{padding:28px;text-align:center;color:var(--dim)}
.badge.b-baru{background:rgba(251,91,107,.16);color:var(--danger)}
.badge.b-regresi{background:rgba(251,191,36,.18);color:var(--warn)}
.badge.b-diselidiki{background:rgba(59,130,246,.16);color:#93c5fd}
.badge.b-selesai{background:rgba(52,211,153,.14);color:var(--ok)}
.badge.b-abaikan{background:rgba(111,104,128,.2);color:var(--dim)}
.badge.b-jenis{background:rgba(139,92,246,.16);color:#c4b5fd}
.judulgalat{font-weight:700;word-break:break-word}
.judulgalat .lok{display:block;font-size:11.5px;color:var(--faint);font-weight:500;font-family:ui-monospace,Consolas,monospace}
.grafik{position:relative}
.grafik svg{display:block;width:100%;height:180px}
.grafik .tip{position:absolute;pointer-events:none;background:var(--card2);border:1px solid var(--border2);border-radius:8px;
  padding:6px 9px;font-size:12px;white-space:nowrap;display:none;transform:translate(-50%,-110%)}
#laci{position:fixed;top:0;right:0;bottom:0;width:min(580px,100%);background:var(--card);border-left:1px solid var(--border2);
  transform:translateX(100%);transition:transform .2s;z-index:60;overflow:auto;padding:20px;box-shadow:-24px 0 60px -20px rgba(0,0,0,.8)}
#laci.on{transform:none}
#laci h3{margin:10px 0 4px;font-size:15px;word-break:break-word}
#laci .kv{display:grid;grid-template-columns:150px 1fr;gap:6px 12px;font-size:12.5px;margin:12px 0}
#laci .kv>div:nth-child(odd){color:var(--dim)}
#laci .kv>div{word-break:break-word}
#laci pre{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:12px;font-size:11.5px;overflow:auto;margin:0;white-space:pre-wrap;word-break:break-all}
#laci .sub{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);font-weight:700;margin:16px 0 8px}
#laci .aksi{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;align-items:center}
#laci .aksi input{width:110px}
#laci .aksi select{width:auto}
#laci .btn:disabled{opacity:.4;cursor:default}
@media (max-width:900px){
  .lap .g2{grid-template-columns:1fr}
  #laci .kv{grid-template-columns:110px 1fr}
}
/* Langkah 4.2: batang bertumpuk (celah 2px antar segmen), batang tunggal, legenda. */
.lap .tumpuk{display:flex;gap:2px;width:180px;height:8px}
.lap .tumpuk i{display:block;height:100%;min-width:2px}
.lap .tumpuk i:first-child{border-radius:4px 0 0 4px} .lap .tumpuk i:last-child{border-radius:0 4px 4px 0}
.lap .bar{height:8px;border-radius:4px;background:var(--bg2);overflow:hidden}
.lap .bar i{display:block;height:100%;border-radius:4px}
.lap .legend{display:flex;gap:12px;flex-wrap:wrap;font-size:11.5px;color:var(--dim)}
.lap .legend span[style]::before{content:"";display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;background:var(--c)}
.lap .card table td{padding:7px 8px}
#p-perangkat > .card{margin-bottom:16px}
/* Langkah 4.3: linimasa pelanggan di laci. */
#laci table.lini td{padding:7px 6px;border-bottom:1px solid var(--border);vertical-align:top}
#laci table.lini tr.klik{cursor:pointer}
#laci table.lini tr.klik:hover td{background:rgba(255,255,255,.03)}
#laci .down{color:var(--danger)}
#laci table{min-width:0;width:100%;border-collapse:collapse}
.lap a.btn,#laci a.btn{text-decoration:none;white-space:nowrap;display:inline-flex}
.lap td.mono{white-space:nowrap}
/* Langkah 4.4: tiket & masukan. */
.lap tr.sel td{background:rgba(59,130,246,.10)}
.lap .pesan{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:8px 11px;margin-bottom:8px;font-size:13px;white-space:pre-wrap;max-width:88%}
.lap .pesan.tim{margin-left:auto;border-color:rgba(59,130,246,.35);background:rgba(59,130,246,.08)}
.lap .sub2{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);font-weight:700;margin:16px 0 8px}
.lap textarea{font-family:inherit;background:var(--bg2);color:var(--text);border:1px solid var(--border2);border-radius:9px;padding:9px 11px;font-size:13px}
#tRinci select,#p-masukan select{width:auto}
/* Langkah 4.5: rilis. */
.lap .rilis{display:flex;flex-direction:column;gap:12px}
.lap .rilis-kartu{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.lap .slider{display:flex;gap:6px;flex-wrap:wrap}
.lap .slider .btn.on{border-color:var(--magenta);color:#fff;background:rgba(255,46,151,.12)}
.lap .rl-form{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lap .rl-form textarea{grid-column:1/-1}
@media (max-width:900px){.lap .rilis-kartu,.lap .rl-form{grid-template-columns:1fr}.lap .rilis-kartu>div:last-child{justify-content:flex-start!important}}
/* Langkah 4.6 (HP): anak grid boleh menyusut; teks panjang tanpa spasi (kode galat) dipotong di mana saja. */
.lap .g2>*{min-width:0}
.lap .card td{overflow-wrap:anywhere}