/* =====================================================================================================================
   PANEL BERFOTO — Panel Admin, Panel Mitra, Panel Klien senada dengan situs berfoto (CARA-BAKU 103). PRATINJAU 21 Okt 2026.
   Dimuat SESUDAH admin.css (admin/includes/header.php, sales/includes/sales-header.php) dan SESUDAH portal.css
   (public/klien/_header.php). Hanya tampilan — tidak menyentuh angka, uang, status, izin, atau skrip.
   - Bawaan TERANG gading (#F7F4EE) · tinta #0B1730 · emas #C9A227 · emas-tua #7A5E0B (teks emas) · huruf Figtree + Inter.
   - Bingkai navy (sidebar admin/mitra, kepala Panel Klien) = kaki situs berfoto; isi = kartu putih lega berbayang lembut.
   - Sapaan dasbor berfoto (foto suasana assets/images/suasana), angka utama dalam kartu navy, tombol bulat "timbul".
   - Tema gelap tetap ada (tombol bulan) — navy tinta, bukan abu-biru.
   Kontras dihitung dengan hitung_kontras.py (teks ≥ 4,5 : 1). Kunci tema panel: localStorage "situneo_panel_tema".
   ===================================================================================================================== */

/* ---------- 1. TOKEN ---------- */
:root {
    --pb-gading: #F7F4EE; --pb-gading2: #EFEADF; --pb-putih: #FFFFFF; --pb-tinta: #0B1730; --pb-tinta2: #22304D;
    --pb-redup: #545D72; --pb-garis: #E3DDD0; --pb-emas: #C9A227; --pb-emas-tua: #7A5E0B; --pb-emas-lembut: #F5ECD2;
    --pb-kurva: cubic-bezier(.2, .8, .2, 1);
    --pb-bayang: 0 1px 0 rgba(11, 23, 48, .04), 0 18px 40px -30px rgba(11, 23, 48, .35);
    --pb-bayang-naik: 0 1px 0 rgba(11, 23, 48, .05), 0 26px 50px -30px rgba(11, 23, 48, .45);
    --pb-radius: 16px;
    /* bingkai navy (sidebar & kepala Panel Klien) — sama di dua tema */
    --pb-sb: #0B1730; --pb-sb-teks: #C3CAD9; --pb-sb-redup: #9AA5BD; --pb-sb-garis: rgba(255, 255, 255, .09);
    --pb-sb-aktif: rgba(201, 162, 39, .16); --pb-sb-emas: #F2D477;
}
/* tema terang (bawaan) — nama token admin.css (admin & mitra) */
:root[data-theme="light"] {
    --primary: #C9A227; --primary-light: #7A5E0B; --secondary: #EFEADF;
    --accent: #C9A227; --accent-hover: #D6B03A; --accent-text: #7A5E0B; --on-accent: #0B1730;
    --accent-bg: #F5ECD2; --accent-bd: rgba(122, 94, 11, .32);
    --bg-dark: #F7F4EE; --bg-darker: #FFFFFF; --bg-card: #FFFFFF; --bg-card-hover: #FBF8F2; --bg-glass: #FFFFFF; --bg-input: #FFFFFF;
    --text-primary: #0B1730; --text-secondary: #22304D; --text-muted: #545D72;
    --border: #E9E3D6; --border-light: #D9D1C1; --hover: rgba(122, 94, 11, .06);
    --success: #15733A; --warning: #8A4B06; --danger: #B42318; --info: #22304D;
    --success-bg: #E7F3EB; --warning-bg: #FBF0DF; --danger-bg: #FCE9E6;
    --success-bd: rgba(21, 115, 58, .28); --warning-bd: rgba(138, 75, 6, .3); --danger-bd: rgba(180, 35, 24, .3);
    --success-latar: #15733A; --warning-latar: #8A4B06; --danger-latar: #B42318;
    --shadow-btn: rgba(11, 23, 48, .18);
    --radius: 16px; --radius-sm: 10px; --radius-lg: 20px;
}
/* tema gelap — navy tinta (dulu abu-biru #0F172A/#1E293B) */
:root:not([data-theme="light"]) {
    --primary: #D4AF37; --accent: #D4AF37; --accent-hover: #E0BE4E; --accent-text: #E3C35A; --on-accent: #0B1730;
    --accent-bg: rgba(212, 175, 55, .13); --accent-bd: rgba(227, 195, 90, .38);
    --bg-dark: #0A1428; --bg-darker: #12203A; --bg-card: #12203A; --bg-card-hover: #172848; --bg-glass: #12203A; --bg-input: #0E1A31;
    --text-primary: #E9EDF5; --text-secondary: #B4BDCF; --text-muted: #97A3BA;
    --border: rgba(255, 255, 255, .08); --border-light: rgba(255, 255, 255, .16);
    --pb-sb: #070F1F; --pb-gading: #0A1428; --pb-gading2: #0E1A31; --pb-putih: #12203A; --pb-garis: rgba(255, 255, 255, .08);
    --pb-tinta: #E9EDF5; --pb-tinta2: #B4BDCF; --pb-redup: #97A3BA; --pb-emas-tua: #E3C35A; --pb-emas-lembut: rgba(212, 175, 55, .13);
    --pb-bayang: 0 1px 0 rgba(0, 0, 0, .25), 0 18px 40px -28px rgba(0, 0, 0, .7);
    --pb-bayang-naik: 0 1px 0 rgba(0, 0, 0, .3), 0 26px 50px -28px rgba(0, 0, 0, .8);
    --radius: 16px; --radius-sm: 10px; --radius-lg: 20px;
}
/* nama token portal.css (Panel Klien) */
:root[data-theme="light"] {
    --p-bg: #F7F4EE; --p-bg-soft: #FFFFFF; --p-card: #FFFFFF; --p-card-hover: #FBF8F2; --p-input: #FFFFFF;
    --p-border: #E9E3D6; --p-border-soft: #D9D1C1; --p-hover: rgba(122, 94, 11, .06);
    --p-text: #0B1730; --p-text-soft: #22304D; --p-text-dim: #545D72;
    --p-accent: #C9A227; --p-accent-text: #7A5E0B; --p-on-accent: #0B1730; --p-primary: #C9A227; --p-primary-lt: #7A5E0B;
    --p-success: #15733A; --p-warning: #8A4B06; --p-danger: #B42318; --p-info: #22304D;
    --p-success-bg: #E7F3EB; --p-warning-bg: #FBF0DF; --p-danger-bg: #FCE9E6;
    --p-success-bd: rgba(21, 115, 58, .28); --p-warning-bd: rgba(138, 75, 6, .3); --p-danger-bd: rgba(180, 35, 24, .3);
    --p-shadow-btn: rgba(11, 23, 48, .18); --p-radius: 16px; --p-radius-sm: 10px;
}
:root:not([data-theme="light"]) {
    --p-bg: #0A1428; --p-bg-soft: #0E1A31; --p-card: #12203A; --p-card-hover: #172848; --p-input: #0E1A31;
    --p-border: rgba(255, 255, 255, .08); --p-border-soft: rgba(255, 255, 255, .16);
    --p-text: #E9EDF5; --p-text-soft: #B4BDCF; --p-text-dim: #97A3BA;
    --p-accent: #D4AF37; --p-accent-text: #E3C35A; --p-on-accent: #0B1730; --p-primary: #D4AF37; --p-primary-lt: #E3C35A;
    --p-radius: 16px; --p-radius-sm: 10px;
}

/* ---------- 2. DASAR ---------- */
body.admin-body, body.portal-body { background: var(--pb-gading); }
body.admin-body h1, body.admin-body h2, body.admin-body h3, body.admin-body h4 { letter-spacing: -.012em; }
body.admin-body .card h2, body.admin-body .card h3, body.admin-body .kepala-bagian h2, body.admin-body .kepala-bagian h3 { font-weight: 800; }
body.portal-body h1, body.portal-body h2, body.portal-body h3 { letter-spacing: -.012em; }
::selection { background: var(--pb-emas-lembut); color: var(--pb-tinta); }

/* ---------- 3. SIDEBAR NAVY (admin & mitra) ---------- */
.sidebar { background: var(--pb-sb); border-right: 0; box-shadow: 1px 0 0 rgba(11, 23, 48, .06); }
.sidebar-brand { border-bottom-color: var(--pb-sb-garis); padding: 1.35rem 1.5rem 1.1rem; }
.sidebar-brand small { color: var(--pb-sb-emas); font-weight: 600; letter-spacing: .14em; font-size: .75rem; display: flex; margin-top: .35rem; align-items: center; gap: .5rem; }
.sidebar-brand small::before { content: ""; width: 18px; height: 2px; background: var(--pb-emas); }
.sidebar .nav-item { color: var(--pb-sb-teks); border-left: 0; margin: 0 .75rem 1px; padding: .55rem .9rem; border-radius: 10px; }
.sidebar .nav-item i { color: var(--pb-sb-redup); opacity: 1; }
.sidebar .nav-item:hover { color: #FFFFFF; background: rgba(255, 255, 255, .06); }
.sidebar .nav-item:hover i { color: #FFFFFF; }
.sidebar .nav-item.active { color: #FFFFFF; background: var(--pb-sb-aktif); font-weight: 600; box-shadow: inset 3px 0 0 var(--pb-emas); }
.sidebar .nav-item.active i { color: var(--pb-sb-emas); }
.sidebar .nav-item:focus-visible { outline: 2px solid var(--pb-sb-emas); outline-offset: -2px; }
.sidebar .nav-divider { background: var(--pb-sb-garis); margin: .6rem 1.5rem; }
.sidebar-footer { border-top-color: var(--pb-sb-garis); }
.sidebar-nav { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
/* label kelompok di sidebar mitra (bila ada) */
.sidebar .nav-label, .sidebar .nav-section { color: var(--pb-sb-redup); }

/* ---------- 4. TOPBAR ---------- */
/* latar padat (bukan tembus): axe & mata membaca kontras teks yang tergulir di bawahnya dengan benar */
.topbar { background: var(--pb-gading); border-bottom: 1px solid var(--pb-garis); box-shadow: 0 10px 24px -24px rgba(11, 23, 48, .5); }
.topbar-title { font-weight: 800; letter-spacing: -.01em; }
.topbar-btn { border-radius: 999px; }
.avatar { background: var(--pb-tinta); border: 0; color: var(--pb-sb-emas); }
:root:not([data-theme="light"]) .avatar { background: #1A2A4F; }
.notif-kotak, .profile-dropdown { border-radius: 14px; border-color: var(--pb-garis); box-shadow: 0 24px 48px -20px rgba(11, 23, 48, .35); }
.sidebar-toggle { border-radius: 12px; border-color: var(--border-light); }

/* ---------- 5. KARTU ---------- */
.main-content { padding: 2rem 2rem 3.5rem; }
.card, .portal-card {
    background: var(--pb-putih); border: 1px solid var(--border, var(--p-border)); border-radius: var(--pb-radius);
    box-shadow: var(--pb-bayang);
}
body.portal-body .portal-card { border-color: var(--p-border); }
.card { padding: 1.6rem 1.75rem; }
.kepala-bagian { margin-bottom: 1.15rem; }
.kepala-bagian h2, .kepala-bagian h3, .portal-card-title, .pt-card-kepala h2 { font-size: 1.1875rem; }
/* kartu di dalam kartu (mis. Komisi Tertahan per Klien di HP) tidak berbayang ganda */
.card .card, .portal-card .portal-card { box-shadow: none; background: transparent; }

/* ---------- 6. SAPAAN BERFOTO (dasbor admin, mitra, klien) ---------- */
.dsb-kepala, .dsb-mitra-hero, .pt-hero {
    position: relative; isolation: isolate; overflow: hidden;
    border: 1px solid var(--pb-garis); border-radius: 20px; padding: 2.25rem 2.5rem; margin-bottom: 1.5rem; min-height: 230px;
    background-color: var(--pb-gading2); background-repeat: no-repeat; background-size: 100% 100%, cover;
    box-shadow: var(--pb-bayang);
}
.dsb-kepala {
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.1rem;
    background-image: linear-gradient(90deg, var(--pb-gading) 0%, var(--pb-gading) 36%, color-mix(in srgb, var(--pb-gading) 80%, transparent) 52%, color-mix(in srgb, var(--pb-gading) 0%, transparent) 74%),
                      image-set(url("../images/suasana/tentang-hero-900.webp") type("image/webp"), url("../images/suasana/tentang-hero-900.jpg") type("image/jpeg"));
    background-position: 0 0, right 40%;
}
.dsb-mitra-hero {
    grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-bottom: 1px solid var(--pb-garis);
    background-image: linear-gradient(90deg, var(--pb-gading) 0%, var(--pb-gading) 38%, color-mix(in srgb, var(--pb-gading) 78%, transparent) 54%, color-mix(in srgb, var(--pb-gading) 10%, transparent) 78%),
                      image-set(url("../images/suasana/karir-hero-800.webp") type("image/webp"), url("../images/suasana/karir-hero-800.jpg") type("image/jpeg"));
    background-position: 0 0, right 30%;
}
.pt-hero {
    background-image: linear-gradient(90deg, var(--pb-gading) 0%, var(--pb-gading) 40%, color-mix(in srgb, var(--pb-gading) 78%, transparent) 56%, color-mix(in srgb, var(--pb-gading) 0%, transparent) 78%),
                      image-set(url("../images/suasana/layanan-hero-900.webp") type("image/webp"), url("../images/suasana/layanan-hero-900.jpg") type("image/jpeg"));
    background-position: 0 0, right 35%;
}
.dsb-kepala > div:first-child, .dsb-mitra-hero > div:first-child, .pt-hero > * { max-width: 34rem; position: relative; }
.dsb-kepala h2, .dsb-mitra-hero h2, .pt-hero h1 { font: 800 clamp(1.75rem, 2.6vw, 2.375rem)/1.12 var(--font-judul, 'Figtree', sans-serif); letter-spacing: -.025em; margin: 0 0 .5rem; color: var(--pb-tinta); }
.dsb-kepala .dsb-tanggal, .dsb-mitra-sub, .pt-hero p { color: var(--pb-tinta2); font-size: 1.0625rem; line-height: 1.65; }
.pt-hero-usaha { font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--pb-emas-tua); display: inline-flex; align-items: center; gap: .625rem; margin-bottom: .6rem; }
.pt-hero-usaha::before { content: ""; width: 24px; height: 2px; background: var(--pb-emas); flex: none; }
/* label kecil di atas sapaan admin & mitra: garis emas */
.dsb-kepala h2::before, .dsb-mitra-hero h2::before { content: ""; display: block; width: 32px; height: 3px; border-radius: 2px; background: var(--pb-emas); margin-bottom: .9rem; }
/* kode referral mitra = kartu putih di atas foto */
.dsb-mitra-kode { background: var(--pb-putih); border-radius: 16px; padding: 1.1rem 1.25rem 1.2rem; box-shadow: var(--pb-bayang-naik); text-align: left; min-width: 0; max-width: 24rem; }
.dsb-mitra-kode .k { color: var(--pb-redup); font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.dsb-mitra-kode .v { color: var(--pb-tinta); font-size: 1.875rem; }
.dsb-mitra-aksi { justify-content: flex-start; }
.dsb-tier { color: var(--pb-emas-tua); }
:root:not([data-theme="light"]) .dsb-mitra-kode { background: rgba(10, 20, 40, .82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .1); }

/* ---------- 7. TOMBOL BULAT TIMBUL ---------- */
.btn, .portal-btn {
    border-radius: 999px; font-family: var(--font-judul, 'Figtree', sans-serif); font-weight: 700; letter-spacing: .005em;
    box-shadow: none; transition: transform .2s var(--pb-kurva), box-shadow .2s, background .2s, color .2s, border-color .2s;
}
.btn-primary, .btn-accent, .portal-btn-primary, .portal-btn-accent { background: var(--pb-emas); color: #0B1730; box-shadow: 0 8px 18px -10px rgba(201, 162, 39, .85); }
.btn-primary:hover, .btn-accent:hover, .portal-btn-primary:hover, .portal-btn-accent:hover,
:root[data-theme="light"] .portal-btn-primary:hover, :root[data-theme="light"] .portal-btn-accent:hover { background: #D6B03A; color: #0B1730; transform: translateY(-2px); box-shadow: 0 14px 26px -12px rgba(201, 162, 39, .9); }
.btn-outline, .portal-btn-outline { background: transparent; color: var(--pb-tinta); border: 1.5px solid color-mix(in srgb, var(--pb-tinta) 70%, transparent); box-shadow: none; }
.btn-outline:hover, .portal-btn-outline:hover { background: var(--pb-tinta); color: var(--pb-gading); border-color: var(--pb-tinta); transform: translateY(-2px); box-shadow: 0 12px 22px -14px rgba(11, 23, 48, .6); }
.btn-ghost { color: var(--pb-tinta2); }
.btn-ghost:hover { background: var(--pb-emas-lembut); color: var(--pb-tinta); }
.btn-success:hover, .btn-danger:hover { transform: translateY(-2px); }
.btn:active, .portal-btn:active { transform: translateY(1px); box-shadow: none; }
.btn-sm, .portal-btn-sm { padding: .45rem 1rem; }
.btn-icon { border-radius: 999px; }
.btn:focus-visible, .portal-btn:focus-visible { outline: 2px solid var(--pb-emas); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
    .btn, .portal-btn { transition: none; }
    .btn:hover, .btn:active, .portal-btn:hover, .portal-btn:active { transform: none; }
}
/* tombol di atas kepala navy Panel Klien */
.portal-topbar .portal-btn-outline { color: #FFFFFF; border-color: rgba(255, 255, 255, .45); }
.portal-topbar .portal-btn-outline:hover { background: #FFFFFF; color: #0B1730; border-color: #FFFFFF; }

/* ---------- 8. ANGKA RINGKASAN: kartu terpisah, angka besar, satu kartu utama navy ---------- */
.dsb-uang, .dsb-angka, .pt-ringkas, .stat-grid, .portal-stats {
    gap: .875rem; background: transparent; border: 0; border-radius: 0; overflow: visible;
}
.dsb-uang > .dsb-kartu, .dsb-angka > .dsb-kartu, .pt-ringkas > div, .stat-grid > .stat-card, .portal-stat {
    background: var(--pb-putih); border: 1px solid var(--border, var(--p-border)); border-radius: var(--pb-radius); margin: 0;
    padding: 1.25rem 1.4rem 1.3rem; box-shadow: var(--pb-bayang);
}
body.portal-body .pt-ringkas > div, body.portal-body .portal-stat { border: 1px solid var(--p-border); }
.dsb-kartu .lbl, .pt-ringkas .k, .stat-label, .portal-stat-label {
    font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--pb-redup);
}
.dsb-kartu .nilai, .pt-ringkas .v, .stat-value, .portal-stat-value {
    font-family: var(--font-judul, 'Figtree', sans-serif); font-weight: 800; font-size: 1.875rem; letter-spacing: -.02em; color: var(--pb-tinta); margin-top: .4rem;
    white-space: nowrap; overflow-wrap: normal;   /* "Rp 1.100.000" tidak patah dua baris */
}
.dsb-angka .dsb-kartu .nilai { font-size: 1.75rem; }
.dsb-kartu .ket, .pt-ringkas .s, .stat-sub, .portal-stat-sub { color: var(--pb-redup); }
.dsb-kartu .ket b { color: var(--pb-tinta2); }
/* kartu utama (Pendapatan bersih SITUNEO / angka pertama mitra) = navy */
.dsb-kartu.utama, .dsb-uang > .dsb-kartu.utama {
    background: #0B1730; border-color: #0B1730; color: #FFFFFF; box-shadow: inset 0 3px 0 #C9A227, var(--pb-bayang);
}
.dsb-kartu.utama .lbl { color: #F2D477; }
.dsb-kartu.utama .nilai { color: #FFFFFF; }
.dsb-kartu.utama .ket, .dsb-kartu.utama .ket b { color: #C3CAD9; }
.dsb-kartu.utama .ket a:not(.btn) { color: #F2D477; }
.dsb-kartu.utama .dsb-delta.turun { color: #FFB4AB; }
.dsb-kartu.utama .dsb-delta.naik { color: #8EE0A9; }
.dsb-kartu.utama .dsb-porsi { background: rgba(255, 255, 255, .14); }
.dsb-kartu.utama .dsb-porsi span + span { background: rgba(255, 255, 255, .45) !important; opacity: 1; }
.dsb-kartu.utama .btn-accent, .dsb-kartu.utama .btn-primary { box-shadow: none; }
.dsb-delta { font-size: .8125rem; padding: .1rem .5rem; border-radius: 999px; }
.dsb-delta.naik { background: var(--success-bg); }
.dsb-delta.turun { background: var(--danger-bg); }
.dsb-kartu.utama .dsb-delta { background: #22304D; }   /* padat: kontras terbaca benar walau kartu tergulir di bawah topbar */
.dsb-porsi { height: 8px; border-radius: 999px; }
.dsb-porsi span:first-child { border-radius: 999px 0 0 999px; }
/* Program Sales di dasbor admin: baris mengisi penuh (flex), nominal tidak patah, tanpa kotak yatim */
.dsb-sales { display: flex; flex-wrap: wrap; border-radius: 14px; border-color: var(--border); background: var(--bg-dark); }
.dsb-sales a { flex: 1 1 172px; padding: 1rem 1.1rem; }
.dsb-sales .v { white-space: nowrap; overflow-wrap: normal; font-size: 1.125rem; }
.dsb-sales a:hover { background: var(--pb-putih); }
.dsb-sales .k { font-size: .8125rem; color: var(--pb-redup); font-weight: 600; }

/* ---------- 9. PERIODE & STATUS SISTEM ---------- */
.dsb-periode { border-radius: var(--pb-radius); box-shadow: var(--pb-bayang); border-color: var(--border); padding: 1rem 1.25rem .85rem; }
.dsb-chip { border-radius: 999px; padding: .35rem .95rem; background: transparent; }
.dsb-chip:hover { border-color: var(--pb-tinta); color: var(--pb-tinta); }
.dsb-chip.aktif { background: var(--pb-tinta); border-color: var(--pb-tinta); color: #FFFFFF; }
:root:not([data-theme="light"]) .dsb-chip.aktif { background: #D4AF37; border-color: #D4AF37; color: #0B1730; }
.dsb-bebas input[type=date] { border-radius: 10px; }
.dsb-sehat { background: transparent; border: 0; padding: 0; margin: -.25rem 0 1.25rem; font-size: .8125rem; gap: .4rem; }
.dsb-sehat > span:not(.judul) { background: var(--pb-putih); border: 1px solid var(--border); border-radius: 999px; padding: .2rem .75rem; line-height: 1.5; }
.dsb-sehat .judul { font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--pb-redup); margin-right: .2rem; }

/* ---------- 10. TABEL LEGA ---------- */
.table-wrapper, .portal-table-wrap { border-radius: 14px; border-color: var(--border); background: var(--pb-putih); }
.admin-table th, .portal-table th {
    background: var(--pb-gading2); color: var(--pb-redup); font-size: .8125rem; font-weight: 700; letter-spacing: .02em;
    padding: .8rem 1rem; border-bottom: 1px solid var(--border, var(--p-border));
}
body.portal-body .portal-table th { border-bottom-color: var(--p-border); }
.admin-table td { padding: .95rem .7rem; }
.admin-table th { padding-inline: .7rem; }
.card:has(> .table-wrapper) { padding-inline: 1.1rem; }
.admin-table tbody tr:hover td, .portal-table tr:hover td { background: var(--bg-card-hover, var(--p-card-hover)); }
body.portal-body .portal-table tr:hover td { background: var(--p-card-hover); }
.portal-card > .portal-table-wrap, .portal-card > .table-wrapper { background: transparent; }
/* kode order & tautan detail tidak patah; email klien satu baris (dipotong rapi, lengkap di detail) */
.admin-table td > a[href*="detail.php"]:not(.btn) { white-space: nowrap; }
.admin-table td > div[style*="--text-muted"] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 15ch; }
.admin-table .form-select { border-radius: 999px; padding-left: .8rem !important; }

/* ---------- 11. LENCANA STATUS: pil lembut, tanpa garis ---------- */
.badge, .portal-badge { border-color: transparent; padding: .22rem .7rem; font-weight: 700; letter-spacing: .01em; }
.badge-new, .badge-confirmed, .badge-review, .badge-expired, .badge-inactive, .badge-secondary, .badge-prospect, .badge-info,
.badge-draft, .badge-transferred, .pb-info, .pb-muted { background: var(--pb-gading2); color: var(--pb-tinta2); border-color: transparent; }
.badge-accent { background: var(--pb-emas-lembut); color: var(--pb-emas-tua); border-color: transparent; }
.pb-success, .pb-warning, .pb-danger { border-color: transparent; }

/* ---------- 12. FORMULIR ---------- */
.form-input, .form-select, .form-textarea, .form-control, .portal-input { border-radius: 10px; border-color: var(--border-light, var(--p-border-soft)); }
.form-input:focus, .form-select:focus, .form-textarea:focus, .form-control:focus, .portal-input:focus {
    border-color: var(--pb-emas); box-shadow: 0 0 0 3px rgba(201, 162, 39, .22);
}
.page-tools .search-input { border-radius: 999px; }

/* ---------- 13. PEMBERITAHUAN & KOSONG ---------- */
.alert, .portal-alert { border-radius: 14px; }
.alert-info, .pa-info { background: var(--pb-putih); border-left-color: var(--pb-emas); }
.pt-bonus, .portal-alert.pa-info { box-shadow: var(--pb-bayang); }
.empty-state, .portal-empty, .dsb-kosong { color: var(--pb-redup); }

/* ---------- 14. PANEL KLIEN: kepala navy + menu putih ---------- */
.portal-topbar { background: #0B1730; border-bottom: 0; }
.portal-brand-text { color: #F2D477; font-weight: 600; letter-spacing: .14em; white-space: nowrap; display: inline-flex; align-items: center; gap: .5rem; }
.portal-brand-text::before { content: ""; width: 18px; height: 2px; background: #C9A227; }
.portal-user-name { color: #FFFFFF; }
.portal-user-sub { color: #C3CAD9; }
.portal-avatar { background: #1A2A4F; border: 0; color: #F2D477; }
.portal-nav { background: var(--pb-putih); border-bottom: 1px solid var(--p-border); box-shadow: 0 10px 24px -22px rgba(11, 23, 48, .5); }
.portal-nav a { color: var(--p-text-soft); border-bottom-width: 3px; }
.portal-nav a i { color: var(--p-text-dim); }
.portal-nav a:hover { color: var(--p-text); }
.portal-nav a.active { color: var(--p-text); border-bottom-color: var(--pb-emas); font-weight: 700; }
.portal-nav a.active i { color: var(--p-accent-text); }
.portal-main { padding-top: 2.25rem; }
.portal-page-head h1 { font-size: clamp(1.75rem, 2.4vw, 2.25rem); letter-spacing: -.025em; }
.portal-page-head h1::before { content: ""; display: block; width: 32px; height: 3px; border-radius: 2px; background: var(--pb-emas); margin-bottom: .9rem; }
.portal-footer { border-top-color: var(--p-border); }

/* ---------- 15. HP ---------- */
@media (max-width: 900px) {
    .dsb-kepala, .dsb-mitra-hero, .pt-hero {
        padding: 168px 1.25rem 1.4rem; min-height: 0;
        background-size: 100% 100%, 100% auto; background-position: 0 0, center top;
    }
    .dsb-kepala { background-image: linear-gradient(180deg, color-mix(in srgb, var(--pb-gading2) 0%, transparent) 70px, var(--pb-gading2) 176px),
        image-set(url("../images/suasana/tentang-hero-600.webp") type("image/webp"), url("../images/suasana/tentang-hero-600.jpg") type("image/jpeg")); }
    .dsb-mitra-hero { background-image: linear-gradient(180deg, color-mix(in srgb, var(--pb-gading2) 0%, transparent) 70px, var(--pb-gading2) 176px),
        image-set(url("../images/suasana/karir-hero-800.webp") type("image/webp"), url("../images/suasana/karir-hero-800.jpg") type("image/jpeg")); }
    .pt-hero { background-image: linear-gradient(180deg, color-mix(in srgb, var(--pb-gading2) 0%, transparent) 70px, var(--pb-gading2) 176px),
        image-set(url("../images/suasana/layanan-hero-600.webp") type("image/webp"), url("../images/suasana/layanan-hero-600.jpg") type("image/jpeg")); }
    .dsb-mitra-hero { grid-template-columns: 1fr; }
    .dsb-mitra-kode { max-width: none; }
    .dsb-uang { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .main-content { padding: 1.1rem .9rem 2.75rem !important; }
    .card { padding: 1.25rem 1.15rem; }
    .pt-ringkas, .stat-grid { grid-template-columns: 1fr 1fr !important; }
    .pt-ringkas > div { padding: 1rem 1.05rem; }
    .pt-ringkas .v { font-size: 1.375rem; }
    .dsb-sales { grid-template-columns: 1fr 1fr; }
    /* kartu HP pengganti tabel: kartu putih lega */
    .admin-list-card { border-radius: 14px; box-shadow: var(--pb-bayang); padding: 1rem 1.1rem; }
    .topbar { padding: 0 .9rem !important; }
}
@media (max-width: 560px) {
    .portal-main { padding: 1.25rem 1rem 3rem; }
    .portal-stats, .pt-ringkas { grid-template-columns: 1fr 1fr; gap: .75rem; }
    .portal-stat, .pt-ringkas > div { border: 1px solid var(--p-border) !important; padding: 1rem 1.05rem; }
    .portal-stat-value, .pt-ringkas .v { font-size: 1.375rem; }
    .portal-card { padding: 1.25rem 1.15rem; }
}
/* HP sempit: angka rupiah lengkap butuh satu kolom penuh (aturan nominal — tanpa patah) */
@media (max-width: 480px) {
    .portal-brand-text::before { display: none; }
    .dsb-angka, .pt-ringkas, .stat-grid, .portal-stats { grid-template-columns: 1fr !important; gap: .625rem; }
    .dsb-angka > .dsb-kartu, .pt-ringkas > div, .portal-stat { padding: .95rem 1.1rem; }
    .dsb-kartu .nilai, .pt-ringkas .v, .portal-stat-value { font-size: 1.5rem; }
    .dsb-mitra-kode .v { font-size: 1.5rem; }
    .dsb-kepala h2, .dsb-mitra-hero h2, .pt-hero h1 { font-size: 1.625rem; }
    .dsb-sales { grid-template-columns: 1fr; }
}
/* tema gelap: kartu utama navy diberi tepi emas supaya tetap menonjol di latar navy */
:root:not([data-theme="light"]) .dsb-kartu.utama { background-color: #0E1B33; border-color: rgba(227, 195, 90, .45); }