/* ===== Client Portal — gaya NETRAL IP CORP (22 Okt 2026, Hanzel: "dibikin logo dan stylenya netral aja as a IP CORP") =====
   Lapisan PALING ATAS (dimuat sesudah portal.css & portal-raycast.css di member_page.php & ui_shell.php).
   Hitam-putih ala dokumen umum IP CORP (kotak hitam "IP", lihat docs/brand/ipcorp-contoh-surat-jalan.jpeg).
   Warna CUMA untuk ARTI: hijau = beres / lunas / terkirim, kuning = menunggu, merah = telat — hijau ImportPlus & lime
   T2 "Hutan & Lime" sebagai dekorasi dibuang. Mau balik ke gaya ImportPlus: hapus baris pemuat berkas ini. */

/* ---------- mode TERANG ---------- */
:root[data-theme="light"] .cpx{
  --bg:#f4f4f4;--surface:#ffffff;--surface-2:#f0f0f0;--text:#0a0a0a;--muted:#5c5c5c;
  --line:#e5e5e5;--line-mid:#d4d4d4;--line-strong:#a3a3a3;
  --accent:#0a0a0a;--accent-deep:#0a0a0a;--accent-mid:#262626;--accent-tint:#efefef;--accent-soft:#a3a3a3;--accent-softer:#e5e5e5;
  --on-accent:#ffffff;--grad-end:#fafafa;--idle-fg:#a3a3a3;--tag-done-bg:#ececec;--tag-done-fg:#3a3a3a;
  --seg-on-bg:#0a0a0a;--seg-on-fg:#ffffff;
  --mp-hero:#0a0a0a;--mp-lime:#ffffff;--mp-sh:0 1px 2px rgb(0 0 0 / .05),0 3px 10px rgb(0 0 0 / .06)
}
:root[data-theme="light"] .cpx:not(.cpx-luar):not(.kotak){background:#f4f4f4}
:root[data-theme="light"] body.cp-member{background:#f4f4f4;color:#0a0a0a}
/* kartu utama hitam: teks kecil & kicker abu terang, bukan hijau */
:root[data-theme="light"] .cpx .cp-home-halo,:root[data-theme="light"] .cpx .cp-posisi,:root[data-theme="light"] .cpx .cp-profil,
:root[data-theme="light"] .cpx .cp-peta,:root[data-theme="light"] .cpx .cp-cont,:root[data-theme="light"] .cpx .cp-inv{color:#ffffff;box-shadow:0 8px 20px rgb(0 0 0 / .18)}
:root[data-theme="light"] .cpx .cp-home-halo .cp-kicker,:root[data-theme="light"] .cpx .cp-posisi .cp-kicker,:root[data-theme="light"] .cpx .cp-profil .cp-kicker,
:root[data-theme="light"] .cpx .cp-peta .cp-kicker,:root[data-theme="light"] .cpx .cp-cont .cp-kicker,:root[data-theme="light"] .cpx .cp-inv .cp-kicker{color:#a3a3a3}
:root[data-theme="light"] .cpx .cp-home-halo .cp-kecil,:root[data-theme="light"] .cpx .cp-home-halo .cp-muted,:root[data-theme="light"] .cpx .cp-home-halo .angka span,
:root[data-theme="light"] .cpx .cp-posisi .tgl,:root[data-theme="light"] .cpx .cp-posisi .cp-kecil,:root[data-theme="light"] .cpx .cp-posisi .no-hp,:root[data-theme="light"] .cpx .cp-posisi .ujung,
:root[data-theme="light"] .cpx .cp-profil .ds,:root[data-theme="light"] .cpx .cp-profil .ds-hp,:root[data-theme="light"] .cpx .cp-profil .cp-stat,
:root[data-theme="light"] .cpx .cp-peta .cp-kecil,:root[data-theme="light"] .cpx .cp-peta .sub-hp,:root[data-theme="light"] .cpx .cp-peta .cp-muted,
:root[data-theme="light"] .cpx .cp-cont-hd .cp-kecil,:root[data-theme="light"] .cpx .cp-cont .cp-eta,
:root[data-theme="light"] .cpx .cp-inv .cp-kecil,:root[data-theme="light"] .cpx .cp-inv .cp-2kol .l{color:rgb(255 255 255 / .68)}
:root[data-theme="light"] .cpx .cp-peta h2,:root[data-theme="light"] .cpx .cp-cont-kode,:root[data-theme="light"] .cpx .cp-inv-hd .no,:root[data-theme="light"] .cpx .cp-inv .cp-2kol b{color:#ffffff}
:root[data-theme="light"] .cpx .cp-posisi .ikon,:root[data-theme="light"] .cpx .cp-profil .cp-ava{box-shadow:0 0 0 2px rgb(255 255 255 / .55)}
:root[data-theme="light"] .cpx .cp-posisi .cp-bar div{background:#ffffff}
:root[data-theme="light"] .cpx .cp-posisi .cp-noresi,:root[data-theme="light"] .cpx .cp-cont .cp-tag,:root[data-theme="light"] .cpx .cp-inv-pill{background:rgb(255 255 255 / .14);color:#ffffff}
:root[data-theme="light"] .cpx .cp-cont .cp-resi:hover{background:#f4f4f4}
:root[data-theme="light"] .cpx .cp-resi{background:#f7f7f7}
:root[data-theme="light"] .cpx .cp-resi:hover{background:#efefef}
:root[data-theme="light"] .cpx .cp-inv .cp-btn{background:#ffffff;color:#0a0a0a}
:root[data-theme="light"] .cpx .cp-inv .cp-btn:hover{background:#efefef}
:root[data-theme="light"] .cpx .cp-inv .cp-btn i{color:#0a0a0a}
/* ubin tahap: menunggu = kuning, berjalan = hitam, sampai = hijau (warna = arti) */
:root[data-theme="light"] .cpx .cp-fase:nth-child(2) .ik{background:#0a0a0a;color:#ffffff}
:root[data-theme="light"] .cpx .cp-banner{background:linear-gradient(135deg,#e5e5e5,#f4f4f4)}
:root[data-theme="light"] body.cp-member .cpx-luar .cp-tab{box-shadow:0 8px 26px rgb(0 0 0 / .14)}

/* ---------- Pratinjau 📱 Mobile di ERP (.cpx-hp) = sama dengan di HP (2 Nov 2026, Hanzel: "menunya ga ngambang ... klik
   shipment jadinya panjang banget ga seperti bentuk HP") ----------
   Bingkai dikunci setinggi layar HP & isinya digulir DI DALAM bingkai (dulu min-height 780px sehingga memanjang sepanjang
   daftar), dan tab bawah jadi kapsul mengambang seperti .cpx-luar di portal member — menempel di bawah bingkai (sticky). */
/* padding-inline 12px = pembungkus .cp-m-wrap di member area: lebar yang dibaca container query jadi 366px seperti di HP,
   jadi tepi kartu (24px) dan potongan barisnya sama. */
.cpx.cpx-hp{height:min(844px,calc(100vh - 150px));min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding:18px 12px 0}
.cpx.cpx-hp::-webkit-scrollbar{display:none}
.cpx.cpx-hp .cp-tab{position:sticky;bottom:14px;z-index:5;margin:0 16px;height:52px;padding:4px;gap:2px;border:0;border-radius:30px;align-items:center;
  background:color-mix(in srgb,var(--surface) 92%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 8px 26px rgb(0 0 0 / .14)}
:root[data-theme="dark"] .cpx.cpx-hp .cp-tab,:root:not([data-theme="light"]) .cpx.cpx-hp .cp-tab{background:color-mix(in srgb,#1e1f23 92%,transparent);box-shadow:0 10px 30px rgb(0 0 0 / .45)}
.cpx.cpx-hp .cp-tab button{height:42px;min-height:0;padding:0;gap:1px;font-size:10.5px;font-weight:500;border-radius:21px;justify-content:center}
.cpx.cpx-hp .cp-tab button i{font-size:18px}
:root[data-theme="light"] .cpx.cpx-hp .cp-tab button.on{background:#0a0a0a;color:#ffffff}
/* Header gelap: di member transparan tanpa blur (portal-raycast.css khusus body.cp-member) — samakan. */
:root[data-theme="dark"] .cpx.cpx-hp .cp-hd,:root:not([data-theme="light"]) .cpx.cpx-hp .cp-hd{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
/* Kotak cari di ERP kena gaya input global app.css (padding, placeholder abu kebiruan, cincin fokus hijau) — kembalikan ke gaya portal. */
:root .cpx .cp-cari{padding:0 2px;box-shadow:none;background:none;border:0;border-radius:0}
:root .cpx .cp-cari::placeholder{color:var(--idle-fg)}
/* Dokumen T&C: reset * {margin:0} app.css menghapus jarak paragraf; di member ada jarak bawaan browser. */
.cp-modal .cp-tnc .dok p{margin:1em 0}
/* Foto SJ diperbesar (lightbox) di pratinjau Mobile: di dalam bingkai HP, bukan menutup seluruh ERP. */
#cpPanggung:has(.cpx-hp),#cpBingkai:has(.cpx-hp){position:relative;max-width:390px;margin-inline:auto}
#cpBingkai:has(.cpx-hp) .cp-lightbox{position:absolute;border-radius:28px}
/* Popup S&K / info & promo di pratinjau Mobile: di dalam bingkai (cpWadahModal() di portal.js). */
#cpPanggung .cp-modal{position:absolute;inset:0;border-radius:28px;z-index:20}
#cpPanggung .cp-modal .kotak{max-height:calc(100% - 32px)}
#cpPanggung .cp-modal .kotak.cp-tnc{height:auto}
/* Tombol Keluar: reset * {padding:0} app.css membuang padding bawaan tombol (di member 1px 6px). */
.cpx .cp-hd .cp-link.keluar{padding:1px 6px}
/* Popup (S&K, info & promo) waktu pratinjau Mobile = selebar HP, bukan desktop: kotaknya .cpx (container query) jadi isinya ikut tampilan HP. */
body:has(.cpx-hp) .cp-modal .kotak{width:min(366px,100%)}
body:has(.cpx-hp) .cp-modal .kotak.cp-tnc{height:min(780px,92vh)}
:root[data-theme="light"] .cp-m-login{box-shadow:0 1px 2px rgb(0 0 0 / .05),0 12px 30px rgb(0 0 0 / .10)}
:root[data-theme="light"] .cp-m-login input{background:#f0f0f0}
:root[data-theme="light"] body.cp-member .mp-kotak,:root[data-theme="light"] .cpx .mp-kotak{--mp-sf:#f4f4f4;--mp-sf2:#e8e8e8;--mp-ac:#0a0a0a;--mp-tint:#efefef}

/* ---------- mode GELAP ---------- */
:root[data-theme="dark"] .cpx,:root:not([data-theme="light"]) .cpx{
  --accent:#f4f4f4;--accent-deep:#ffffff;--accent-mid:#e5e5e5;--accent-tint:#1f1f1f;--accent-soft:#525252;--accent-softer:#262626;
  --on-accent:#0a0a0a;--grad-end:#121212;--seg-on-bg:#f4f4f4;--seg-on-fg:#0a0a0a
}
:root[data-theme="dark"] body.cp-member .cpx:not(.cpx-luar):not(.kotak),:root:not([data-theme="light"]) body.cp-member .cpx:not(.cpx-luar):not(.kotak){background:transparent}
:root[data-theme="dark"] body.cp-member .mp-kotak,:root:not([data-theme="light"]) body.cp-member .mp-kotak,
:root[data-theme="dark"] .cpx .mp-kotak,:root:not([data-theme="light"]) .cpx .mp-kotak{--mp-ac:#f4f4f4;--mp-tint:#1f1f1f}
/* Tombol di mode gelap = PUTIH tulisan hitam (2 Nov 2026, Hanzel: "button-button pake warna putih juga / terang biar ga nyaru").
   Latar tombol lama (--accent-tint abu #26282d) hampir sama dengan kartu #1e1f23, jadi tombolnya tenggelam. */
:root[data-theme="dark"] .cpx .cp-btn,:root:not([data-theme="light"]) .cpx .cp-btn{background:#f2f2f3;color:#0a0a0a;border:0;font-weight:600}
:root[data-theme="dark"] .cpx .cp-btn:hover,:root:not([data-theme="light"]) .cpx .cp-btn:hover{background:#ffffff}
:root[data-theme="dark"] .cpx .cp-btn i,:root:not([data-theme="light"]) .cpx .cp-btn i{color:inherit}
/* Tab bawah Home / Shipments / Invoice / Account: yang DIPENCET (aktif) = kapsul putih tulisan hitam, yang lain tetap abu
   (2 Nov 2026, Hanzel: "bikin putih aja kalo dipencet, yang ga dipencet ga putih"). */
:root[data-theme="dark"] body.cp-member .cpx-luar .cp-tab button.on,:root:not([data-theme="light"]) body.cp-member .cpx-luar .cp-tab button.on,
:root[data-theme="dark"] .cpx .cp-tab button.on,:root:not([data-theme="light"]) .cpx .cp-tab button.on{background:#f2f2f3;color:#0a0a0a;border-radius:21px;font-weight:600}

/* ---------- mode GELAP = A "Graphite" (22 Okt 2026, pilihan Hanzel dari 3 contoh: "tampilan darknya item semua") ----------
   Abu arang bertingkat, bukan hitam pekat: latar #141518 → kartu #1e1f23 → isi kartu #26282d → kartu utama bergradasi
   #2c2e34. Tanpa warna baru — beda lapisan cukup dari terang-gelapnya. */
:root[data-theme="dark"] body.cp-member,:root:not([data-theme="light"]) body.cp-member{background:#141518}
:root[data-theme="dark"] .cpx,:root:not([data-theme="light"]) .cpx{--bg:#141518;--surface:#1e1f23;--surface-2:#26282d;--line:#2f3136;--line-mid:#2f3136;--line-strong:#3d4046;--text:#f2f2f3;--muted:#a1a1aa;--accent-tint:#26282d;--tag-done-bg:#26282d;--grad-end:#1e1f23}
:root[data-theme="dark"] .cpx:not(.cpx-luar):not(.kotak),:root:not([data-theme="light"]) .cpx:not(.cpx-luar):not(.kotak){background:#141518}
:root[data-theme="dark"] body.cp-member .cpx:not(.cpx-luar):not(.kotak),:root:not([data-theme="light"]) body.cp-member .cpx:not(.cpx-luar):not(.kotak){background:transparent}
:root[data-theme="dark"] .cpx .cp-kartu,:root[data-theme="dark"] .cpx .cp-cari-wrap,:root[data-theme="dark"] .cpx .cp-cepat,:root[data-theme="dark"] .cpx .cp-fase,:root[data-theme="dark"] .cpx .cp-chip-fase button,:root[data-theme="dark"] .cpx .cp-home-chip button,:root[data-theme="dark"] .cpx .cp-tema,:root:not([data-theme="light"]) .cpx .cp-kartu,:root:not([data-theme="light"]) .cpx .cp-cari-wrap,:root:not([data-theme="light"]) .cpx .cp-cepat,:root:not([data-theme="light"]) .cpx .cp-fase,:root:not([data-theme="light"]) .cpx .cp-chip-fase button,:root:not([data-theme="light"]) .cpx .cp-home-chip button,:root:not([data-theme="light"]) .cpx .cp-tema{background:#1e1f23}
:root[data-theme="dark"] .cpx .cp-chip-fase button.on,:root:not([data-theme="light"]) .cpx .cp-chip-fase button.on{background:#f2f2f3;color:#0a0a0a}
:root[data-theme="dark"] .cpx .cp-chip-fase button.on i,:root[data-theme="dark"] .cpx .cp-chip-fase button.on b,:root:not([data-theme="light"]) .cpx .cp-chip-fase button.on i,:root:not([data-theme="light"]) .cpx .cp-chip-fase button.on b{color:#0a0a0a}
:root[data-theme="dark"] .cpx .cp-hd,:root:not([data-theme="light"]) .cpx .cp-hd{background:color-mix(in srgb,#141518 80%,transparent)}
:root[data-theme="dark"] body.cp-member .cpx-luar .cp-tab,:root:not([data-theme="light"]) body.cp-member .cpx-luar .cp-tab{background:color-mix(in srgb,#1e1f23 92%,transparent);box-shadow:0 10px 30px rgb(0 0 0 / .45)}
:root[data-theme="dark"] .cpx .cp-resi,:root:not([data-theme="light"]) .cpx .cp-resi{background:#26282d}
:root[data-theme="dark"] .cpx .cp-home-halo,:root[data-theme="dark"] .cpx .cp-posisi,:root[data-theme="dark"] .cpx .cp-profil,:root[data-theme="dark"] .cpx .cp-peta,:root[data-theme="dark"] .cpx .cp-cont,:root[data-theme="dark"] .cpx .cp-inv,:root:not([data-theme="light"]) .cpx .cp-home-halo,:root:not([data-theme="light"]) .cpx .cp-posisi,:root:not([data-theme="light"]) .cpx .cp-profil,:root:not([data-theme="light"]) .cpx .cp-peta,:root:not([data-theme="light"]) .cpx .cp-cont,:root:not([data-theme="light"]) .cpx .cp-inv{background:linear-gradient(160deg,#2c2e34,#1e1f23);box-shadow:0 10px 26px rgb(0 0 0 / .35)}
:root[data-theme="dark"] .cp-modal .kotak.cpx,:root:not([data-theme="light"]) .cp-modal .kotak.cpx{background:#1e1f23}
:root[data-theme="dark"] .cp-m-login,:root:not([data-theme="light"]) .cp-m-login{background:#1e1f23;border-color:transparent}
:root[data-theme="dark"] .cp-m-login input,:root:not([data-theme="light"]) .cp-m-login input{background:#26282d;border-color:transparent}

/* ---------- tombol utama & login: hitam / putih ---------- */
.cp-m-login button,body.cp-member .mp-kotak .mp-pasang,.cpx .mp-kotak .mp-pasang{background:#0a0a0a;color:#ffffff}
.cp-m-login button:hover,body.cp-member .mp-kotak .mp-pasang:hover,.cpx .mp-kotak .mp-pasang:hover{background:#262626;color:#ffffff}
.cp-m-admin .tanda{background:#0a0a0a;color:#ffffff}
:root[data-theme="dark"] .cp-m-login button,:root:not([data-theme="light"]) .cp-m-login button,
:root[data-theme="dark"] body.cp-member .mp-kotak .mp-pasang,:root:not([data-theme="light"]) body.cp-member .mp-kotak .mp-pasang,
:root[data-theme="dark"] .cpx .mp-kotak .mp-pasang,:root:not([data-theme="light"]) .cpx .mp-kotak .mp-pasang,
:root[data-theme="dark"] .cp-m-admin .tanda,:root:not([data-theme="light"]) .cp-m-admin .tanda{background:#f4f4f4;color:#0a0a0a}
:root[data-theme="dark"] .cp-m-login button:hover,:root:not([data-theme="light"]) .cp-m-login button:hover,
:root[data-theme="dark"] body.cp-member .mp-kotak .mp-pasang:hover,:root:not([data-theme="light"]) body.cp-member .mp-kotak .mp-pasang:hover,
:root[data-theme="dark"] .cpx .mp-kotak .mp-pasang:hover,:root:not([data-theme="light"]) .cpx .mp-kotak .mp-pasang:hover{background:#d4d4d4;color:#0a0a0a}

/* ---------- logo "IP · Client Portal" (logo-cp.svg hitam): dibalik putih di mode gelap ---------- */
.cp-brand img[src*="logo-cp"]{height:24px;width:auto}
.cp-m-login img[src*="logo-cp"]{height:40px;width:auto}
:root[data-theme="dark"] img[src*="logo-cp"],:root:not([data-theme="light"]) img[src*="logo-cp"]{filter:invert(1)}
@container (max-width:767px){.cp-brand img[src*="logo-cp"]{height:20px}}

/* ---------- tombol "Saya mengerti & setuju" di popup T&C (22 Okt 2026): hitam/putih, bukan teks hijau ----------
   Aktif = warna utama (hitam di terang, putih di gelap); belum dicentang = abu dengan teks redup, bukan transparan. */
.cp-tnc .cp-btn.setuju{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.cp-tnc .cp-btn.setuju:disabled{opacity:1;background:var(--surface-2);color:var(--muted);border-color:var(--surface-2)}
.cp-tnc .kaki input{accent-color:var(--accent)}

/* Petunjuk cara login di halaman login Client Portal (2 Nov 2026, Hanzel). */
.cp-m-login .petunjuk{font-size:12px;line-height:1.45;color:#525252;margin:-2px 0 8px}
.cp-m-login .petunjuk b,.cp-m-login .sub b{color:inherit;font-weight:700}
:root[data-theme="dark"] .cp-m-login .petunjuk,:root:not([data-theme="light"]) .cp-m-login .petunjuk{color:#a1a1aa}
.cp-m-login input::placeholder{color:#a3a3a3}