/* app.css -- sistem tampilan BillingBangIpin.
Prinsipnya tetap sama sejak awal: terbaca dan cepat. Tanpa gradien, tanpa bayangan
tebal, tanpa animasi, tanpa emoji (docs/KONVENSI.md bagian 6). Kesan rapi datang dari
token warna yang konsisten, jarak yang teratur, tipografi Inter, dan ikon SVG garis.
Susunan: token -> dasar -> kerangka (sidebar + isi) -> komponen -> halaman khusus
(masuk, portal, beranda) -> layar sempit -> cetak.
Nama kelas sengaja TIDAK diganti (kartu, baris, ringkas, st-*, lencana, ...): dipakai
di 20 halaman dan dirakit juga oleh JavaScript. Tambah kelas baru, jangan ganti nama. */
/* Inter (OFL, static/vendor/inter/OFL.txt) -- hanya subset Latin, 48 KB. Portal
pelanggan memakai font sistem supaya tetap ringan di jalur isolir 128 kbps. */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("/vendor/inter/inter-latin-wght-normal.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
/* merek */
--merek: #2563eb;
--merek-tua: #1d4ed8;
--merek-muda: #eff6ff;
--cincin: rgba(37, 99, 235, .22);
/* teks (kontras di atas putih: 17.9 / 10.4 / 5.3 : 1) */
--teks: #0f172a;
--teks-2: #334155;
--teks-redup: #5b6980;
--teks-samar: #8b98aa;
/* permukaan */
--latar: #ffffff;
--latar-halaman: #f4f6f9;
--latar-redup: #f8fafc;
--latar-sorot: #f1f5f9;
--garis: #e2e8f0;
--garis-lembut: #edf1f5;
--garis-kuat: #cbd5e1;
--garis-hover: #b6c2d1;
/* status: teks / latar / garis / titik */
--hijau: #047857; --hijau-latar: #ecfdf5; --hijau-garis: #a7f3d0; --hijau-titik: #10b981;
--merah: #b91c1c; --merah-latar: #fef2f2; --merah-garis: #fecaca; --merah-titik: #ef4444;
--kuning: #b45309; --kuning-latar: #fffbeb; --kuning-garis: #fde68a; --kuning-titik: #f59e0b;
--biru: #1d4ed8; --biru-latar: #eff6ff; --biru-garis: #bfdbfe; --biru-titik: #3b82f6;
--abu: #475569; --abu-latar: #f1f5f9; --abu-garis: #e2e8f0; --abu-titik: #94a3b8;
--oranye: #c2410c;
/* sidebar gelap */
--sb-latar: #0f172a;
--sb-garis: #1e293b;
--sb-teks: #cbd5e1;
--sb-redup: #94a3b8;
--sb-grup: #7d8ca3;
--sb-sorot: rgba(148, 163, 184, .12);
--sb-aktif: #1e293b;
--sb-aksen: #60a5fa;
/* ukuran */
--lebar-sidebar: 256px;
--radius: 12px;
--radius-kecil: 8px;
--pad-kartu: 20px;
--tinggi-isian: 38px;
--bayangan: 0 1px 2px rgba(15, 23, 42, .05);
--font-sistem: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font: "Inter", var(--font-sistem);
--font-mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
}
/* ================================================================ dasar */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--font);
font-size: 14px;
line-height: 1.55;
color: var(--teks);
background: var(--latar-halaman);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
[hidden] { display: none !important; } /* kalah oleh display:flex dari kelas lain */
::selection { background: #dbeafe; color: var(--teks); }
a { color: var(--merek); text-underline-offset: 2px; }
a:hover { color: var(--merek-tua); }
b, strong { font-weight: 600; }
p { margin: 12px 0; }
small { font-size: 12.5px; }
code {
font-family: var(--font-mono);
font-size: 12.5px;
padding: 1px 6px;
border-radius: 5px;
background: var(--latar-sorot);
border: 1px solid var(--garis);
color: var(--teks-2);
}
ul { margin: 8px 0 12px; padding-left: 20px; }
li { margin: 3px 0; }
:focus-visible { outline: 2px solid var(--merek); outline-offset: 2px; }
svg.ikon { width: 18px; height: 18px; flex: none; }
/* ================================================================ kerangka */
.tata { display: flex; min-height: 100vh; }
.sidebar {
width: var(--lebar-sidebar);
flex: 0 0 var(--lebar-sidebar);
position: sticky;
top: 0;
height: 100vh;
display: flex;
flex-direction: column;
background: var(--sb-latar);
color: var(--sb-teks);
border-right: 1px solid var(--sb-garis);
}
/* -- kepala: logo, nama aplikasi, nama ISP */
.sidebar .merek {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 16px 14px 18px;
border-bottom: 1px solid var(--sb-garis);
}
.sidebar .merek .logo { display: block; width: 36px; height: 36px; flex: none; border-radius: 9px; }
.sidebar .merek .logo svg { display: block; width: 100%; height: 100%; }
.sidebar .merek .logo:focus-visible { outline-color: var(--sb-aksen); }
.merek-teks { flex: 1; min-width: 0; line-height: 1.3; }
.merek-teks strong {
display: block;
color: #fff;
font-size: 15px;
font-weight: 650;
letter-spacing: -.01em;
}
.merek-teks small {
display: block;
margin-top: 2px;
color: var(--sb-redup);
font-size: 12.5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar .bar-atas { display: none; } /* tombol menu, hanya di layar sempit */
/* -- menu */
.sidebar nav {
flex: 1;
overflow-y: auto;
padding: 6px 12px 8px;
scrollbar-width: thin;
scrollbar-color: #334155 transparent;
}
.sidebar nav .grup {
padding: 14px 10px 6px;
font-size: 11px;
font-weight: 600;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--sb-grup);
}
.sidebar nav a {
position: relative;
display: flex;
align-items: center;
gap: 11px;
margin: 1px 0;
padding: 7px 10px;
border-radius: var(--radius-kecil);
color: var(--sb-teks);
font-size: 14px;
font-weight: 500;
line-height: 20px;
text-decoration: none;
}
.sidebar nav a svg { color: var(--sb-redup); }
.sidebar nav a:hover { background: var(--sb-sorot); color: #fff; }
.sidebar nav a:hover svg { color: #e2e8f0; }
.sidebar nav a.aktif { background: var(--sb-aktif); color: #fff; }
.sidebar nav a.aktif svg { color: var(--sb-aksen); }
.sidebar nav a.aktif::before {
content: "";
position: absolute;
left: -12px;
top: 8px;
bottom: 8px;
width: 3px;
border-radius: 0 3px 3px 0;
background: var(--sb-aksen);
}
.sidebar nav a:focus-visible { outline-color: var(--sb-aksen); outline-offset: -2px; }
/* -- kaki: pengguna yang masuk (blok profil = tautan ke Akun saya) + tombol keluar */
.sidebar .kaki {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 12px;
border-top: 1px solid var(--sb-garis);
}
.profil {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 10px;
padding: 6px 8px;
border-radius: var(--radius-kecil);
text-decoration: none;
}
.profil:hover, .profil.aktif { background: var(--sb-sorot); }
.profil:focus-visible, .sidebar .keluar:focus-visible { outline-color: var(--sb-aksen); }
.sidebar .keluar {
display: grid;
place-items: center;
width: 38px;
height: 38px;
flex: none;
border-radius: var(--radius-kecil);
color: var(--sb-redup);
}
.sidebar .keluar:hover { background: var(--sb-sorot); color: #fff; }
.sidebar .keluar .teks-keluar { display: none; }
.avatar {
display: grid;
place-items: center;
width: 34px;
height: 34px;
flex: none;
border-radius: 50%;
background: #1e3a8a;
color: #dbeafe;
font-size: 12.5px;
font-weight: 600;
letter-spacing: .02em;
}
.profil-teks { min-width: 0; line-height: 1.3; }
.profil-teks .nama {
display: block;
color: #fff;
font-size: 13.5px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.profil-teks .peran { display: block; color: var(--sb-redup); font-size: 12px; text-transform: capitalize; }
/* -- isi halaman */
.isi { flex: 1; min-width: 0; padding: 28px 40px 64px; }
.isi > * { max-width: 1440px; }
/* Jejak "ISP > kelompok menu" disisipkan ui.js di atas judul, setelah /api/saya
menjawab. Tempatnya dipesan lebih dulu lewat margin-top judul (26px = tinggi jejak +
jaraknya) supaya judul tidak meloncat turun. */
.jejak {
display: flex;
align-items: center;
gap: 6px;
height: 18px;
margin: 0 0 8px;
color: var(--teks-redup);
font-size: 12.5px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
}
.jejak svg { width: 14px; height: 14px; color: var(--teks-samar); }
.isi > h1 {
margin: 26px 0 6px;
font-size: 26px;
line-height: 1.25;
font-weight: 650;
letter-spacing: -.022em;
color: var(--teks);
}
.isi > .jejak + h1 { margin-top: 0; }
.isi > p.penjelas {
max-width: 82ch;
margin: 0 0 24px;
color: var(--teks-redup);
font-size: 14px;
line-height: 1.6;
}
/* ================================================================ kartu */
.kartu {
margin: 0 0 20px;
padding: var(--pad-kartu);
background: var(--latar);
border: 1px solid var(--garis);
border-radius: var(--radius);
box-shadow: var(--bayangan);
overflow: hidden; /* sudut membulat tetap rapi saat tabel menempel ke tepi kartu */
}
.kartu > :first-child { margin-top: 0; }
.kartu > :last-child, .kartu > :last-child > :last-child { margin-bottom: 0; }
/* Paragraf keterangan yang belum/tidak diisi JS tidak menyisakan pita kosong. */
.kartu p:empty { display: none; }
.kartu h2 {
margin: 0 0 16px;
font-size: 16px;
line-height: 1.4;
font-weight: 600;
letter-spacing: -.01em;
color: var(--teks);
}
.kartu h3 {
margin: 28px 0 12px;
font-size: 14px;
line-height: 1.4;
font-weight: 600;
color: var(--teks);
}
.kartu p.redup, .kartu > p { line-height: 1.6; }
/* Kepala kartu: judul di kiri, tautan/aksi di kanan. */
.kartu-kepala {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 0 0 16px;
}
.kartu-kepala h2 { margin: 0; }
/* Panahnya lewat ::after, jadi teks tautan boleh diganti JS (textContent) tanpa hilang. */
.tautan-panah {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 13.5px;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
}
.tautan-panah::after {
content: "";
width: 16px;
height: 16px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tautan-panah:hover { text-decoration: underline; }
/* ================================================================ ringkasan angka */
.ringkas {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 16px;
margin: 0 0 20px;
}
.ringkas > div {
container-type: inline-size; /* ukuran angka mengikuti lebar kotaknya */
min-width: 0;
padding: 16px 18px;
background: var(--latar);
border: 1px solid var(--garis);
border-radius: var(--radius);
box-shadow: var(--bayangan);
}
.ringkas .label { color: var(--teks-redup); font-size: 13px; font-weight: 500; line-height: 1.35; }
.ringkas .angka {
margin-top: 8px;
font-size: 22px;
font-size: clamp(19px, 12.5cqi, 24px);
line-height: 1.2;
font-weight: 650;
letter-spacing: -.02em;
color: var(--teks);
font-variant-numeric: tabular-nums;
}
.ringkas .angka .lencana { font-size: 13px; letter-spacing: 0; vertical-align: 3px; }
.ringkas .kecil { margin-top: 6px; color: var(--teks-redup); font-size: 12.5px; line-height: 1.45; }
/* Di dalam kartu: kotak lebih ringan, supaya tidak ada bingkai di dalam bingkai. */
.kartu .ringkas > div { background: var(--latar-redup); border-color: var(--garis-lembut); box-shadow: none; }
/* Jumlah kolom mengikuti jumlah kotak, supaya tidak ada kotak yatim di baris terakhir
(6 kotak -> 3x2, bukan 5+1). Peramban tanpa :has() tetap memakai auto-fit di atas. */
@media (min-width: 761px) {
.ringkas:has(> *) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ringkas:has(> :last-child:nth-child(1)) { grid-template-columns: minmax(0, 360px); }
.ringkas:has(> :last-child:nth-child(2)),
.ringkas:has(> :last-child:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
.ringkas:has(> :last-child:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ringkas:has(> :last-child:nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1560px) {
.ringkas:has(> :last-child:nth-child(6)) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* ================================================================ formulir */
.baris {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 8px 14px;
}
.baris > * { min-width: 0; }
.baris > span { align-self: center; }
/* Label di baris yang menutup kartu tidak perlu jarak bawah (padding kartu sudah cukup) --
termasuk kalau di belakangnya hanya ada elemen tersembunyi / hasil yang masih kosong
(#info-saring, #hasil-*). Di tempat lain jaraknya tetap: isi sesudah formulir sering
ber-margin-top 0. */
.kartu > .baris:last-child > label,
.kartu > form:last-child > .baris:last-child > label,
.kartu > .baris:has(+ :is([hidden], :empty):last-child) > label { margin-bottom: 0; }
/* Baris yang semua isinya tersembunyi (mis. tombol aksi tagihan lunas) tidak memakan tempat. */
.baris:not(:has(> :not([hidden]))) { display: none; }
label { display: block; margin: 0 0 16px; font-size: 14px; }
label > span:first-child {
display: block;
min-height: 18px;
margin-bottom: 6px;
color: var(--teks-2);
font-size: 13px;
font-weight: 500;
line-height: 18px;
}
/* Kotak centang di dalam label: teks. */
label > span:has(> input[type="checkbox"]) {
display: flex;
align-items: center;
gap: 9px;
min-height: 0;
margin: 0;
color: var(--teks);
font-size: 14px;
font-weight: 400;
line-height: 1.45;
cursor: pointer;
}
.baris label > span:has(> input[type="checkbox"]) { min-height: var(--tinggi-isian); }
input, select, textarea {
display: block;
width: 100%;
min-height: var(--tinggi-isian);
margin: 0;
padding: 8px 12px;
border: 1px solid var(--garis-kuat);
border-radius: var(--radius-kecil);
background-color: var(--latar);
color: var(--teks);
font: inherit;
font-size: 14px;
line-height: 20px;
box-shadow: 0 1px 1px rgba(15, 23, 42, .03);
}
/* Tinggi tetap: isian tanggal/jam Chrome & select sama tinggi dengan isian teks, jadi
label di satu baris formulir sejajar. */
input:not([type="checkbox"], [type="radio"], [type="file"]), select { height: var(--tinggi-isian); }
input::placeholder, textarea::placeholder { color: var(--teks-samar); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: var(--garis-hover); }
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--merek);
box-shadow: 0 0 0 3px var(--cincin);
}
input:disabled, select:disabled, textarea:disabled {
background-color: var(--latar-redup);
color: var(--teks-redup);
border-color: var(--garis);
cursor: not-allowed;
}
input[readonly], textarea[readonly] { background-color: var(--latar-redup); }
input[type="hidden"] { display: none !important; }
select {
appearance: none;
-webkit-appearance: none;
padding-right: 36px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 18px;
cursor: pointer;
}
textarea { min-height: 110px; padding: 10px 12px; line-height: 1.55; resize: vertical; }
input[type="checkbox"], input[type="radio"] {
display: inline-block;
width: 16px !important; /* menang atas style="width:auto" di halaman */
height: 16px;
min-height: 0;
margin: 0;
padding: 0;
flex: none;
box-shadow: none;
accent-color: var(--merek);
cursor: pointer;
}
input[type="checkbox"]:focus { box-shadow: 0 0 0 3px var(--cincin); }
input[type="file"] { height: var(--tinggi-isian); padding: 4px 6px; line-height: 28px; cursor: pointer; }
input[type="file"]::file-selector-button {
height: 28px;
margin-right: 10px;
padding: 0 12px;
border: 1px solid var(--garis-kuat);
border-radius: 6px;
background: var(--latar-redup);
color: var(--teks);
font: inherit;
font-size: 13px;
font-weight: 500;
cursor: pointer;
}
/* ================================================================ tombol */
button, a.tombol {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: var(--tinggi-isian);
margin: 0;
padding: 8px 14px;
border: 1px solid var(--garis-kuat);
border-radius: var(--radius-kecil);
background: var(--latar);
color: var(--teks);
font: inherit;
font-size: 14px;
font-weight: 500;
line-height: 20px;
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
box-shadow: 0 1px 1px rgba(15, 23, 42, .04);
}
button:hover, a.tombol:hover { background: var(--latar-redup); border-color: var(--garis-hover); color: var(--teks); }
button:active, a.tombol:active { background: var(--latar-sorot); }
button:disabled, button:disabled:hover {
opacity: .5;
cursor: not-allowed;
background: var(--latar);
border-color: var(--garis-kuat);
box-shadow: none;
}
button.utama {
background: var(--merek);
border-color: var(--merek);
color: #fff;
box-shadow: 0 1px 2px rgba(37, 99, 235, .25);
}
button.utama:hover { background: var(--merek-tua); border-color: var(--merek-tua); color: #fff; }
button.utama:active { background: #1e40af; }
button.utama:disabled, button.utama:disabled:hover { background: var(--merek); border-color: var(--merek); }
button.bahaya { color: var(--merah); }
button.bahaya:hover { background: var(--merah-latar); border-color: var(--merah-garis); color: var(--merah); }
/* ================================================================ tabel */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td {
padding: 11px 12px;
text-align: left;
vertical-align: middle;
border-bottom: 1px solid var(--garis-lembut);
}
thead th {
padding-top: 10px;
padding-bottom: 10px;
background: var(--latar-redup);
border-top: 1px solid var(--garis);
border-bottom: 1px solid var(--garis);
color: var(--teks-redup);
font-size: 12.5px;
font-weight: 600;
line-height: 1.35;
}
tbody th { color: var(--teks-2); font-weight: 500; }
tbody tr:hover > td, tbody tr:hover > th { background: #fafbfd; }
td.angka, th.angka { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Tombol di sel tabel lebih ringkas; beberapa tombol berjajar tetap berjarak. Kolom aksi
(sel terakhir berisi tombol) tidak dilipat, supaya tombolnya satu baris dan tinggi baris
tabel tetap rata -- tabel lebar menggeser di .tabel-geser. */
td button, td a.tombol {
min-height: 30px;
margin: 2px 0;
padding: 4px 9px;
font-size: 13px;
white-space: nowrap;
}
td:last-child:has(> button, > a.tombol) { white-space: nowrap; }
td input:not([type="checkbox"], [type="radio"], [type="file"]), td select {
height: 32px;
min-height: 32px;
padding-top: 5px;
padding-bottom: 5px;
}
/* Tabel lebar menggeser di dalam kartunya sendiri, bukan menggeser seluruh halaman
di layar HP. */
.tabel-geser { overflow-x: auto; }
/* Di dalam kartu, tabel menempel ke tepi kiri-kanan kartu (garis & kepala tabel selebar
kartu); sel pertama/terakhir diberi jarak setara padding kartu supaya teksnya tetap
sejajar dengan judul kartu. */
.kartu .tabel-geser, .kartu > table {
margin-left: calc(-1 * var(--pad-kartu));
margin-right: calc(-1 * var(--pad-kartu));
}
.kartu > table { width: calc(100% + 2 * var(--pad-kartu)); }
.kartu .tabel-geser :is(th, td):first-child, .kartu > table :is(th, td):first-child { padding-left: var(--pad-kartu); }
.kartu .tabel-geser :is(th, td):last-child, .kartu > table :is(th, td):last-child { padding-right: var(--pad-kartu); }
.kartu > .tabel-geser:first-child, .kartu > table:first-child { margin-top: calc(-1 * var(--pad-kartu)); }
.kartu > .tabel-geser:first-child thead th, .kartu > table:first-child thead th { border-top: 0; }
/* ...begitu juga di tepi bawah -- termasuk kalau sesudahnya hanya ada keterangan yang
kosong/tersembunyi (mis. #info-bayar di Langganan). */
.kartu > .tabel-geser:last-child, .kartu > table:last-child,
.kartu > .tabel-geser:has(+ :is([hidden], :empty):last-child) { margin-bottom: calc(-1 * var(--pad-kartu)); }
.kartu > .tabel-geser:last-child tbody tr:last-child > *,
.kartu > table:last-child tbody tr:last-child > *,
.kartu > .tabel-geser:has(+ :is([hidden], :empty):last-child) tbody tr:last-child > * { border-bottom: 0; }
td.kosong, .kosong { padding: 36px 16px; text-align: center; color: var(--teks-redup); }
/* Laporan laba-rugi */
table.laporan td { padding-top: 9px; padding-bottom: 9px; }
.kartu table.laporan td.pos, table.laporan td.pos { padding-left: calc(var(--pad-kartu) + 24px); }
table.laporan tr.judul td { background: var(--latar-redup); color: var(--teks); font-weight: 600; }
table.laporan tr.jumlah td { border-top: 1px solid var(--garis-kuat); font-weight: 600; }
table.laporan tr.info td { color: var(--teks-redup); font-size: 13px; }
/* Baris jumlah di bawah tabel (arus kas). */
tr.total > * { background: var(--latar-redup); border-top: 1px solid var(--garis-kuat); color: var(--teks); font-weight: 600; }
/* ================================================================ status */
.redup { color: var(--teks-redup); }
.st-lunas, .st-hidup { color: var(--hijau); }
.st-telat { color: var(--oranye); }
.st-gagal, .st-putus, .st-minus { color: var(--merah); }
.st-batal { color: var(--teks-redup); text-decoration: line-through; }
span.st-hidup, span.st-putus { font-weight: 500; }
/* Titik keadaan untuk "hidup / terhubung" dan "putus / galat". */
span.st-hidup::before, span.st-putus::before {
content: "";
display: inline-block;
width: 7px;
height: 7px;
margin-right: 6px;
border-radius: 50%;
background: var(--hijau-titik);
vertical-align: 1px;
}
span.st-putus::before { background: var(--merah-titik); }
/* Lencana: status pendek dalam pil berwarna. Warna lewat kelas warna (hijau, merah,
kuning, biru, abu) atau nama status langganan yang sudah lama dipakai. */
.lencana {
--titik: var(--abu-titik);
display: inline-flex;
align-items: center;
gap: 6px;
padding: 1px 9px 1px 8px;
border: 1px solid var(--abu-garis);
border-radius: 999px;
background: var(--abu-latar);
color: var(--abu);
font-size: 12px;
font-weight: 500;
line-height: 20px;
white-space: nowrap;
vertical-align: middle;
text-decoration: none;
}
.lencana::before {
content: "";
width: 6px;
height: 6px;
flex: none;
border-radius: 50%;
background: var(--titik);
}
.lencana.hijau, .lencana.aktif, .lencana.bebas_biaya {
--titik: var(--hijau-titik);
background: var(--hijau-latar); border-color: var(--hijau-garis); color: var(--hijau);
}
.lencana.merah, .lencana.beku, .lencana.tenggang {
--titik: var(--merah-titik);
background: var(--merah-latar); border-color: var(--merah-garis); color: var(--merah);
}
.lencana.kuning {
--titik: var(--kuning-titik);
background: var(--kuning-latar); border-color: var(--kuning-garis); color: var(--kuning);
}
.lencana.biru, .lencana.uji_coba {
--titik: var(--biru-titik);
background: var(--biru-latar); border-color: var(--biru-garis); color: var(--biru);
}
.lencana.abu, .lencana.tanpa_paket { --titik: var(--abu-titik); }
/* Baris kedua di sel tabel (kode pelanggan, keterangan, "oleh ...") sedikit lebih kecil. */
td .redup { font-size: 13px; }
/* ================================================================ pesan & spanduk */
.pesan, .spanduk {
position: relative;
margin: 0 0 20px;
padding: 11px 16px 11px 44px;
border: 1px solid;
border-radius: 10px;
font-size: 14px;
line-height: 1.5;
}
.pesan::before, .spanduk::before, .kabar::before {
content: "";
position: absolute;
left: 15px;
top: 12px;
width: 18px;
height: 18px;
background: currentColor;
-webkit-mask: var(--ikon-pesan) center / contain no-repeat;
mask: var(--ikon-pesan) center / contain no-repeat;
}
.pesan.galat {
background: var(--merah-latar);
border-color: var(--merah-garis);
color: var(--merah);
--ikon-pesan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E");
}
.pesan.baik {
background: var(--hijau-latar);
border-color: var(--hijau-garis);
color: var(--hijau);
--ikon-pesan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.3 2.7 2.7L16 9.7'/%3E%3C/svg%3E");
}
.spanduk {
background: var(--kuning-latar);
border-color: var(--kuning-garis);
color: #92400e;
--ikon-pesan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.2 2.9 17.5a2 2 0 0 0 1.7 3h14.8a2 2 0 0 0 1.7-3L13.7 4.2a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5v4M12 17h.01'/%3E%3C/svg%3E");
}
.spanduk.berat { background: var(--merah-latar); border-color: var(--merah-garis); color: var(--merah); }
.spanduk a { color: inherit; font-weight: 600; }
/* Sandi PPPoE yang baru dibuat / dilihat: huruf mono, spasi dipertahankan. */
#sandi-tampil { font-family: var(--font-mono); font-size: 13px; white-space: pre-wrap; }
/* Salinan singkat #pesan di pojok layar, dimunculkan ui.js hanya saat #pesan sedang
tergulir keluar layar. Tidak menangkap klik (pointer-events:none). */
.kabar {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 60;
max-width: min(440px, calc(100vw - 32px));
padding: 12px 16px 12px 44px;
border-radius: 10px;
background: var(--teks);
color: #f1f5f9;
font-size: 14px;
line-height: 1.5;
box-shadow: 0 6px 16px rgba(15, 23, 42, .18);
pointer-events: none;
}
.kabar::before { top: 13px; }
.kabar.baik::before {
background: #34d399;
--ikon-pesan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.3 2.7 2.7L16 9.7'/%3E%3C/svg%3E");
}
.kabar.galat::before {
background: #f87171;
--ikon-pesan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E");
}
/* ================================================================ tab (Keuangan) */
.tab {
display: flex;
gap: 4px;
margin: 0 0 20px;
overflow-x: auto;
box-shadow: inset 0 -1px 0 var(--garis); /* garis bawah; tab aktif menimpanya */
scrollbar-width: none;
}
.tab::-webkit-scrollbar { display: none; }
.tab button {
flex: none;
min-height: 0;
padding: 10px 14px;
border: 0;
border-bottom: 2px solid transparent;
border-radius: 0;
background: none;
box-shadow: none;
color: var(--teks-redup);
font-weight: 500;
}
.tab button:hover { background: none; color: var(--teks); }
.tab button.aktif { color: var(--merek); border-bottom-color: var(--merek); }
/* ================================================================ rincian */
dl.rinci {
display: grid;
grid-template-columns: minmax(120px, max-content) 1fr;
gap: 10px 28px;
margin: 0 0 16px;
}
dl.rinci dt { color: var(--teks-redup); }
dl.rinci dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
/* Skrip RouterOS: baris panjang tidak dilipat, supaya yang disalin = yang terlihat. */
textarea.skrip {
min-height: 280px;
padding: 14px 16px;
border-color: #1e293b;
border-radius: 10px;
background: #0f172a;
color: #e2e8f0;
font-family: var(--font-mono);
font-size: 12.5px;
line-height: 1.6;
white-space: pre;
overflow-x: auto;
}
textarea.skrip:focus { border-color: var(--merek); }
/* Isi pesan WA di Notifikasi: teks biasa, bukan kode. */
pre.kartu {
margin-top: 16px;
background: var(--latar-redup);
box-shadow: none;
font-family: var(--font);
font-size: 14px;
line-height: 1.6;
}
iframe { border-radius: var(--radius-kecil); background: #fff; }
/* Template pesan (Notifikasi): tiap template dipisah garis tipis. */
.form-template + .form-template { margin-top: 8px; padding-top: 4px; border-top: 1px solid var(--garis-lembut); }
/* Navigasi halaman tabel: keterangan di kiri, tombol di kanan. */
#info-hal, #k-info { order: -1; margin-right: auto; color: var(--teks-redup); font-size: 13px; }
/* Baris "Simpan perubahan" Pengaturan (di antara kartu, bukan di dalamnya). */
#baris-simpan { margin: 0 0 24px; }
#info-simpan { flex: 1 1 320px; font-size: 13px; }
/* ================================================================ beranda */
.dasbor {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
.dasbor > .kartu { grid-column: 1 / -1; margin: 0; }
.dasbor > .setengah { grid-column: auto; }
.dasbor > .setengah .ringkas { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 12px; }
.dasbor > .setengah .ringkas > div { padding: 14px 16px; }
/* Peran yang hanya melihat salah satu dari Jaringan/Gangguan: kartunya selebar penuh. */
.dasbor:has(> #kartu-jaringan[hidden]) > #kartu-gangguan,
.dasbor:has(> #kartu-gangguan[hidden]) > #kartu-jaringan { grid-column: 1 / -1; }
/* Status sistem: lima baris tabel ditata sebagai lajur mendatar. Tetap (E2E
menghitung rows.length), hanya tampilannya yang berubah. */
.status-sistem tbody {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.status-sistem tr {
display: flex;
flex-direction: column;
gap: 6px;
padding: 14px var(--pad-kartu);
border-left: 1px solid var(--garis-lembut);
margin-left: -1px;
}
.kartu > table.status-sistem :is(th, td) { padding: 0; border: 0; background: none; }
.status-sistem th { color: var(--teks-redup); font-size: 12.5px; font-weight: 500; }
.status-sistem td { font-size: 14px; font-weight: 500; }
.status-sistem td .lencana + .lencana { margin-left: 4px; }
/* ================================================================ halaman masuk */
body.halaman-login { background: var(--latar); }
.login { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: 100vh; }
.login-sisi {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 40px;
padding: 44px 52px;
background: var(--sb-latar);
color: var(--sb-teks);
}
.login-merek { display: flex; align-items: center; gap: 12px; color: #fff; font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.login-merek svg { width: 40px; height: 40px; flex: none; }
.login-pesan h2 {
max-width: 440px;
margin: 0 0 28px;
color: #fff;
font-size: 30px;
line-height: 1.25;
font-weight: 650;
letter-spacing: -.025em;
}
.login-pesan ul { display: grid; gap: 16px; max-width: 440px; margin: 0; padding: 0; list-style: none; }
.login-pesan li { display: flex; align-items: flex-start; gap: 12px; margin: 0; font-size: 15px; line-height: 1.55; }
.login-pesan li svg { width: 20px; height: 20px; margin-top: 2px; color: var(--sb-aksen); }
.login-kaki { color: var(--sb-grup); font-size: 13px; }
.login-utama { display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.kotak-login { width: 100%; max-width: 380px; }
.kotak-login .login-logo {
display: none;
align-items: center;
gap: 12px;
margin-bottom: 28px;
font-size: 17px;
font-weight: 650;
letter-spacing: -.01em;
}
.kotak-login .login-logo svg { width: 40px; height: 40px; flex: none; }
.kotak-login h1 { margin: 0 0 6px; font-size: 26px; line-height: 1.25; font-weight: 650; letter-spacing: -.022em; }
.kotak-login p.penjelas { margin: 0 0 28px; color: var(--teks-redup); }
.kotak-login input { height: 42px; }
.kotak-login button[type="submit"] { width: 100%; min-height: 42px; margin-top: 8px; }
.kotak-login .catatan { margin: 20px 0 0; color: var(--teks-redup); font-size: 13px; text-align: center; }
.sandi-bungkus { position: relative; display: block; }
.sandi-bungkus input { padding-right: 46px; }
.sandi-bungkus .lihat-sandi {
position: absolute;
top: 5px;
right: 4px;
width: 38px;
min-height: 32px;
padding: 0;
border: 0;
background: none;
box-shadow: none;
color: var(--teks-redup);
}
.sandi-bungkus .lihat-sandi:hover { background: var(--latar-sorot); color: var(--teks); }
/* ================================================================ portal pelanggan */
/* Font sistem: tidak mengunduh Inter (pelanggan terisolir ada di jalur 128 kbps). */
body.portal { --font: var(--font-sistem); background: var(--latar-halaman); }
.portal-lebar { max-width: 640px; margin: 0 auto; padding: 0 16px; }
.portal-kepala { background: var(--sb-latar); color: #fff; }
.portal-kepala .portal-lebar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 60px;
}
.portal-identitas { min-width: 0; line-height: 1.3; }
.portal-identitas strong { display: block; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.portal-identitas small { display: block; color: var(--sb-redup); font-size: 12.5px; }
.portal-kepala button {
flex: none;
min-height: 34px;
padding: 6px 12px;
border-color: #334155;
background: transparent;
box-shadow: none;
color: #e2e8f0;
}
.portal-kepala button:hover { background: var(--sb-sorot); border-color: #475569; color: #fff; }
main.portal-lebar { padding-top: 20px; padding-bottom: 48px; }
.portal-baris {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 0;
border-bottom: 1px solid var(--garis-lembut);
line-height: 1.6;
}
.portal-baris:first-child { padding-top: 0; }
.portal-baris:last-child { border-bottom: 0; padding-bottom: 0; }
#daftar-tagihan .portal-baris strong { font-size: 18px; letter-spacing: -.01em; }
.portal-baris button { flex: none; }
body.portal .kartu form button[type="submit"] { width: 100%; }
body.portal #form-kode .baris button { flex: 1 1 auto; }
/* ================================================================ modal