/* ==========================================================================
   TAGIHAN WIFI — tema VibeCoder (indigo/violet, kartu kaca) + lembar gaya Excel
   ========================================================================== */
:root {
  --ink: #1F1B3A;
  --muted: #635F82;
  --indigo: #4F46E5;
  --violet: #8B5CF6;
  --in: #0E9F6E;
  --out: #E02424;
  --warn: #B45309;
  --amber: #F59E0B;
  --line: #D8DEE9;
  --line-soft: rgba(99, 95, 130, .12);
  --card-bg: rgba(255, 255, 255, 0.64);
  --card-brd: rgba(255, 255, 255, 0.78);
  --shadow: 0 18px 40px -24px rgba(49, 34, 110, 0.45);
  --radius: 18px;
  --sheet-head: #E7EBF4;
  --sheet-line: #D8DEE9;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: clip; }

body {
  min-height: 100vh;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: #F3F0FF;
  background-image:
    radial-gradient(900px 600px at 8% -8%, rgba(139, 92, 246, 0.24), transparent 62%),
    radial-gradient(760px 520px at 96% 4%, rgba(79, 70, 229, 0.18), transparent 60%),
    radial-gradient(800px 620px at 50% 108%, rgba(56, 189, 248, 0.12), transparent 62%),
    linear-gradient(160deg, #F6F3FF 0%, #EEE9FF 52%, #F7F2FF 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

.bg-orb { position: fixed; border-radius: 50%; filter: blur(80px); opacity: .4; pointer-events: none; z-index: 0; }
.orb-1 { width: 420px; height: 420px; top: -140px; left: -100px; background: #C4B5FD; }
.orb-2 { width: 360px; height: 360px; top: 22%; right: -140px; background: #A5B4FC; }
.orb-3 { width: 380px; height: 380px; bottom: -180px; left: 38%; background: #FBCFE8; }

.wrap { width: min(1640px, 100% - 20px); margin-inline: auto; }

/* ---------- Topbar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 12px 0;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.75);
}
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.brand strong { display: block; font-size: .98rem; letter-spacing: -0.01em; }
.brand small { display: block; color: var(--muted); font-size: .72rem; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  background: linear-gradient(135deg, var(--indigo), var(--violet));
  box-shadow: 0 10px 22px -12px rgba(79, 70, 229, .9);
}

.nav { display: flex; align-items: center; gap: 4px; }
.nav-link {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: .84rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: .16s ease;
  white-space: nowrap;
}
.nav-link:hover { color: var(--ink); background: rgba(255,255,255,.78); }
.nav-link.is-active {
  color: var(--indigo);
  background: rgba(255,255,255,.95);
  border-color: rgba(79, 70, 229, .18);
  box-shadow: 0 8px 18px -14px rgba(79,70,229,.9);
}

.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu:not([open]) .menu-panel { display: none; }
.menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 250px;
  padding: 16px;
  display: grid;
  gap: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--card-brd);
  box-shadow: 0 24px 48px -26px rgba(49, 34, 110, .5);
  z-index: 40;
}
.menu-form { display: grid; gap: 8px; }
.menu-form label { font-size: .76rem; font-weight: 600; color: var(--muted); }
.menu-form input {
  width: 100%;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(99, 95, 130, .22);
  background: #fff;
  font: inherit;
  font-size: .88rem;
}
.menu-link {
  padding-top: 10px;
  border-top: 1px solid rgba(99, 95, 130, .14);
  color: var(--ink);
  font-size: .84rem;
  font-weight: 600;
  text-decoration: none;
}
.menu-link:last-child { color: var(--out); }

/* ---------- Layout ---------- */
.main { padding: 24px 0 16px; position: relative; z-index: 1; display: grid; gap: 20px; }
.main > * { min-width: 0; }

.hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.hero h1 { margin: 0 0 6px; font-size: 1.55rem; letter-spacing: -0.025em; }
.hero p { margin: 0; max-width: 70ch; font-size: .9rem; }
.hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.muted { color: var(--muted); }
.small { font-size: .8rem; }
.hint { color: var(--muted); font-size: .76rem; line-height: 1.6; margin: 0; }
.hint strong { color: var(--ink); }
.center { text-align: center; }

.card {
  background: var(--card-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--card-brd);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}
.card-tight { padding: 14px; }

/* ---------- Tombol ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 16px;
  border-radius: 11px;
  border: 1px solid transparent;
  background: rgba(255,255,255,.9);
  color: var(--ink);
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--indigo), var(--violet));
  box-shadow: 0 12px 24px -14px rgba(79, 70, 229, .85);
}
.btn-ghost { background: rgba(255,255,255,.72); border-color: rgba(99,95,130,.18); }
.btn-ghost:hover { background: #fff; }
.btn-danger { background: #FEE2E2; color: #B91C1C; border-color: rgba(185,28,28,.16); }
.btn-sm { padding: 7px 12px; font-size: .78rem; border-radius: 9px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.link-aksi { color: var(--indigo); font-weight: 600; text-decoration: none; font-size: .78rem; }
.link-aksi:hover { text-decoration: underline; }

/* ---------- Flash ---------- */
.flash {
  padding: 12px 16px;
  border-radius: 13px;
  font-size: .86rem;
  font-weight: 500;
  line-height: 1.55;
  border: 1px solid transparent;
}
.flash-ok { background: #E8FBF2; color: #046C4E; border-color: rgba(14,159,110,.22); }
.flash-warn { background: #FFFBEB; color: #92400E; border-color: rgba(245,158,11,.28); }
.flash-err { background: #FEF2F2; color: #B91C1C; border-color: rgba(224,36,36,.2); }

/* ---------- Bulan (tab) ---------- */
.bulan-bar { display: grid; gap: 12px; }
.bulan-atas { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bulan-judul { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bulan-judul h2 { margin: 0; font-size: 1.05rem; letter-spacing: -.01em; }
.bulan-nav { display: flex; align-items: center; gap: 6px; }
.bulan-panah {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(99,95,130,.16);
  color: var(--ink);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 700;
}
.bulan-panah:hover { background: #fff; }
.bulan-input {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(99,95,130,.2);
  background: #fff;
  font: inherit;
  font-size: .84rem;
  font-weight: 600;
  color: var(--ink);
}
.bulan-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.bulan-tab {
  display: grid;
  gap: 2px;
  padding: 9px 14px;
  min-width: 108px;
  border-radius: 12px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 10px 22px -20px rgba(49,34,110,.6);
  text-decoration: none;
  color: var(--ink);
  transition: .15s ease;
}
.bulan-tab:hover { background: #fff; transform: translateY(-1px); }
.bulan-tab strong { font-size: .86rem; }
.bulan-tab span { font-size: .71rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.bulan-tab.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--indigo), var(--violet));
  border-color: transparent;
  box-shadow: 0 14px 26px -16px rgba(79,70,229,.9);
}
.bulan-tab.is-active span { color: rgba(255,255,255,.85); }
.bulan-tab.is-kosong { opacity: .72; }

/* ---------- Kartu ringkasan ---------- */
.stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.stat {
  padding: 15px 16px;
  border-radius: 15px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 14px 30px -26px rgba(49,34,110,.7);
  display: grid;
  gap: 5px;
}
.stat-label { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.stat-value { font-size: 1.06rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stat-note { font-size: .7rem; color: var(--muted); }
.stat-utama {
  color: #fff;
  background: linear-gradient(135deg, #4F46E5, #8B5CF6);
  border-color: transparent;
}
.stat-utama .stat-label, .stat-utama .stat-note { color: rgba(255,255,255,.82); }
.stat-sisa { background: linear-gradient(135deg, #FEF3C7, #FFE4E6); border-color: rgba(245,158,11,.25); }
.stat-sisa .stat-value { color: #B91C1C; }
.stat-bayar .stat-value { color: var(--in); }

.progress-wrap { display: grid; gap: 6px; }
.progress { height: 9px; border-radius: 99px; background: rgba(99,95,130,.16); overflow: hidden; }
.progress > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--indigo), var(--violet)); }

/* ---------- Chip status ---------- */
.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  padding: 7px 13px;
  border-radius: 99px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(99,95,130,.16);
  text-decoration: none;
  white-space: nowrap;
}
.chip:hover { color: var(--ink); background: #fff; }
.chip.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--indigo), var(--violet));
  border-color: transparent;
}

/* ---------- Filter ---------- */
.filter-card { display: grid; gap: 14px; }
.filter-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.filter-head h2 { margin: 0; font-size: .98rem; }
.filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.field { display: grid; gap: 5px; min-width: 0; }
.field > label { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.input, .select, textarea.input {
  width: 100%;
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid rgba(99,95,130,.22);
  background: #fff;
  font: inherit;
  font-size: .85rem;
  color: var(--ink);
}
.input:focus, .select:focus, textarea.input:focus {
  outline: 2px solid rgba(79,70,229,.28);
  outline-offset: 1px;
  border-color: rgba(79,70,229,.5);
}
.range-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.filter-aksi { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
details.lanjutan > summary {
  cursor: pointer;
  font-size: .8rem;
  font-weight: 700;
  color: var(--indigo);
  list-style: none;
}
details.lanjutan > summary::-webkit-details-marker { display: none; }
details.lanjutan > summary::before { content: '▸ '; }
details.lanjutan[open] > summary::before { content: '▾ '; }
.lanjutan-isi { margin-top: 12px; display: grid; gap: 12px; }

/* ---------- Lembar (tabel gaya Excel) ---------- */
.sheet-card { padding: 0; overflow: hidden; scroll-margin-top: 84px; }
.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(99,95,130,.12);
  background: rgba(255,255,255,.5);
}
.sheet-head h2 { margin: 0 0 3px; font-size: 1rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sheet-head p { margin: 0; font-size: .78rem; color: var(--muted); }
.sheet-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.lembar-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--indigo);
  background: rgba(79,70,229,.1);
  border: 1px solid rgba(79,70,229,.18);
}

.sheet-scroll { overflow-x: hidden; overflow-y: visible; }
@media (max-width: 1100px) { .sheet-scroll { overflow: visible; } }
table.sheet {
  width: 100%;
  /* Full layar: tabel TIDAK punya lebar minimum, jadi tidak ada geser ke samping.
     Pembagian lebar kolom memakai persen (table-layout: fixed). */
  min-width: 0;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .78rem;
}
table.sheet th,
table.sheet td {
  padding: 6px 6px;
  border-bottom: 1px solid var(--sheet-line);
  border-right: 1px solid var(--sheet-line);
  vertical-align: middle;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}
table.sheet th:last-child, table.sheet td:last-child { border-right: 0; }
table.sheet thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--sheet-head);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #46506A;
  white-space: nowrap;
  padding: 0;
  border-bottom: 1px solid #C7D0E0;
}
table.sheet thead th .th-sort {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 9px;
  color: inherit;
  text-decoration: none;
  justify-content: inherit;
}
table.sheet thead th.ta-right .th-sort { justify-content: flex-end; }
table.sheet th.is-sort { background: #DCE3F2; color: var(--indigo); }
table.sheet thead a.th-sort.is-sort { background: #DCE3F2; color: var(--indigo); border-radius: 0; }
.s-arrow { font-size: .68rem; opacity: .55; }
.s-arrow.is-active { opacity: 1; color: var(--indigo); }

table.sheet col.col-pilih { width: 3%; }
table.sheet col.col-no { width: 3.2%; }
table.sheet col.col-nama { width: 10%; }
table.sheet col.col-ppoe { width: 6.8%; }
table.sheet col.col-alamat { width: 8.6%; }
table.sheet col.col-uang { width: 7%; }
table.sheet col.col-selisih { width: 6.2%; }
table.sheet col.col-sisa { width: 7%; }
table.sheet col.col-ket { width: 9.2%; }
table.sheet col.col-kol { width: 7.2%; }
table.sheet col.col-tgl { width: 9.4%; }
table.sheet col.col-aksi { width: 4.2%; }

table.sheet td.cell-no {
  background: #F1F4FA;
  color: #5A6480;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}
table.sheet th.corner-no { text-align: center; }
table.sheet th.th-pilih, table.sheet td.cell-pilih {
  width: 34px;
  text-align: center;
  padding: 4px 2px;
  background: #EDF0F7;
}
table.sheet thead th.th-pilih { background: var(--sheet-head); }
table.sheet th.th-pilih input, table.sheet td.cell-pilih input {
  width: 16px;
  height: 16px;
  accent-color: var(--indigo);
  cursor: pointer;
  margin: 0;
}
table.sheet tbody tr.row-data.is-pilih td { background: #EEF2FF; }
table.sheet tbody tr.row-data.is-pilih td.cell-no { background: #E3E9FA; }
.toolbar-pilih { background: rgba(254, 242, 242, .8); border-top: 1px dashed rgba(224, 36, 36, .25); }
.toolbar-pilih .hint strong { font-size: .95rem; color: var(--out); }
.toolbar-pilih .btn[disabled] { opacity: .55; }
table.sheet th.corner-no .th-sort { justify-content: center; }

table.sheet tbody tr.row-data:nth-child(even) td { background: #FCFDFF; }
table.sheet tbody tr.row-data:nth-child(even) td.cell-no { background: #EDF0F7; }
table.sheet tbody tr.row-data:hover td { background: #F7FAFF; }

table.sheet td.ta-right, table.sheet th.ta-right { text-align: right; }
table.sheet .amount { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; text-align: right; }
table.sheet .nowrap { white-space: nowrap; }
table.sheet .value-in { color: var(--in); }
table.sheet .value-out { color: var(--out); }
table.sheet .value-minus { color: var(--indigo); }
table.sheet .value-nol { color: var(--muted); font-weight: 500; }

/* input di dalam sel — setipis mungkin supaya terasa seperti Excel */
table.sheet td.cell-edit { padding: 3px 4px; }
table.sheet td.cell-edit input,
table.sheet td.cell-edit select {
  width: 100%;
  padding: 4px 5px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  font-size: .78rem;
  color: inherit;
  min-width: 0;
  text-overflow: ellipsis;
}
table.sheet td.cell-edit input:hover,
table.sheet td.cell-edit select:hover { border-color: rgba(99,95,130,.24); background: #fff; }
table.sheet td.cell-edit input:focus,
table.sheet td.cell-edit select:focus {
  outline: 2px solid rgba(79,70,229,.35);
  background: #fff;
  border-color: var(--indigo);
}
table.sheet td.cell-edit input.uang { text-align: right; font-variant-numeric: tabular-nums; }
table.sheet td.cell-edit select.pilih-ket,
table.sheet td.cell-edit select.pilih-kol {
  border-style: dashed;
  border-color: rgba(99,95,130,.28);
  font-size: .78rem;
}
table.sheet td.cell-edit select.pilih-ket:not(.terisi) { color: var(--muted); }
table.sheet td.cell-edit select.pilih-kol:not(.terisi) { color: var(--muted); }
/* Kolom BAYAR: read-only, terisi otomatis dari pembayaran */
table.sheet td.cell-bayar {
  background: #F3F6FB;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
}
table.sheet td.cell-bayar .amount { display: block; }
table.sheet td.cell-bayar::after {
  content: 'otomatis';
  display: block;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: .8;
}
table.sheet td.cell-bayar[data-nilai="0"] { }
table.sheet td.cell-edit select.pilih-kol.terkunci {
  background: #F3F4F6;
  color: #4B5563;
  border-style: solid;
  border-color: rgba(99, 95, 130, .22);
  cursor: not-allowed;
}
table.sheet td.cell-edit:has(select.terkunci) { position: relative; }
.kunci-info {
  position: absolute;
  top: 2px;
  right: 3px;
  font-size: .6rem;
  line-height: 1;
  opacity: .75;
}
table.sheet td.cell-edit input[type="date"] { font-size: .78rem; }
table.sheet tr.row-data.is-dirty td { background: #FFFCF0 !important; }
table.sheet tr.row-data.is-dirty td.cell-no { background: #FDF3D8 !important; }
table.sheet tr.row-data.is-dirty td.cell-nama { background: #FFFCF0 !important; }

table.sheet td.cell-nama .sub { display: block; font-size: .7rem; color: var(--muted); }
table.sheet td.cell-aksi {
  white-space: nowrap;
  padding: 4px 3px;
}
table.sheet td.cell-aksi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  place-items: center;
}
table.sheet td.cell-aksi .mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 22px;
  height: 22px;
  border-radius: 8px;
  border: 1px solid rgba(99,95,130,.2);
  background: #fff;
  color: var(--ink);
  font-size: .82rem;
  text-decoration: none;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
table.sheet td.cell-aksi .mini:hover { background: #EEF2FF; border-color: rgba(79,70,229,.35); }
table.sheet td.cell-aksi .mini-danger:hover { background: #FEE2E2; border-color: rgba(224,36,36,.35); }

table.sheet tfoot td {
  position: sticky;
  bottom: 0;
  background: #EEF1F8;
  font-weight: 700;
  font-size: .8rem;
  border-top: 2px solid #C7D0E0;
  font-variant-numeric: tabular-nums;
}
table.sheet tfoot td.cell-no, table.sheet tfoot td.cell-nama { z-index: 4; }
table.sheet .blank-cell { text-align: center; color: var(--muted); padding: 30px 16px; background: #fff; }
table.sheet .blank-cell a { color: var(--indigo); font-weight: 600; }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
}
.badge-lunas { background: #E8FBF2; color: #046C4E; }
.badge-belum { background: #FEF2F2; color: #B91C1C; }
.badge-sebagian { background: #FFF7ED; color: #9A3412; }
.badge-lebih { background: #EEF2FF; color: #3730A3; }
.badge-kosong { background: #F3F4F6; color: #4B5563; }
.badge-selisih { background: #FEF9C3; color: #854D0E; }
.badge-koordinat { background: #EEF2FF; color: #3730A3; padding: 3px 9px; font-size: .7rem; }

.sheet-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 12px 20px;
  background: rgba(238, 242, 255, .75);
  border-bottom: 1px solid rgba(99,95,130,.12);
}
.sheet-toolbar .kotor-info { font-size: .76rem; color: var(--warn); font-weight: 600; }
.sheet-toolbar .kotor-info.sembunyi { display: none; }
.sheet-hint { margin: 0; padding: 12px 20px 16px; color: var(--muted); font-size: .76rem; line-height: 1.7; }
.sheet-hint strong { color: var(--ink); }
.form-tersembunyi { display: none; }
.bulan-form { display: inline-flex; }
.sheet-hint kbd {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 5px;
  border: 1px solid rgba(99,95,130,.28);
  background: #fff;
  font-family: inherit;
  font-size: .72rem;
  font-weight: 600;
}

/* ---------- Impor ---------- */
.impor-card { display: grid; gap: 14px; }
.impor-card > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.impor-card > summary::-webkit-details-marker { display: none; }
.impor-judul { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: .95rem; }
.impor-judul .ikon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--indigo), var(--violet));
  color: #fff;
  font-size: .9rem;
}
.impor-isi { display: grid; gap: 14px; margin-top: 14px; }
.impor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.impor-col { display: grid; gap: 10px; align-content: start; }
.impor-col h3 { margin: 0; font-size: .85rem; }
textarea.paste {
  width: 100%;
  min-height: 132px;
  padding: 11px;
  border-radius: 11px;
  border: 1px solid rgba(99,95,130,.24);
  background: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem;
  line-height: 1.55;
  resize: vertical;
  white-space: pre;
  overflow: auto;
}
.paste-info { font-size: .75rem; color: var(--muted); }
.paste-info strong { color: var(--ink); }
.urutan-kolom {
  font-size: .72rem;
  color: var(--muted);
  background: rgba(255,255,255,.7);
  border: 1px dashed rgba(99,95,130,.28);
  border-radius: 10px;
  padding: 9px 11px;
  line-height: 1.6;
}
.urutan-kolom b { color: var(--ink); }
.file-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.file-row input[type="file"] { font-size: .78rem; }

/* ---------- Tambah baris ---------- */
.tambah-grid { display: grid; grid-template-columns: 1.4fr .9fr 1.3fr .9fr 1fr .9fr auto; gap: 10px; align-items: end; }

/* ---------- Halaman lain ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.page-head h1 { margin: 0 0 5px; font-size: 1.45rem; letter-spacing: -.02em; }
.page-head p { margin: 0; font-size: .86rem; }

.daftar-ket { display: grid; gap: 10px; }
.ket-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.9);
  flex-wrap: wrap;
}
.ket-nama { font-weight: 600; font-size: .88rem; }

.pel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 16px; }
.pilih-kartu {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 5px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(99, 95, 130, .18);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  z-index: 2;
}
.pilih-kartu input {
  width: 18px;
  height: 18px;
  accent-color: var(--indigo);
  cursor: pointer;
  margin: 0;
}
.pel-card:has(.pilih-pelanggan:checked) {
  border-color: rgba(79, 70, 229, .5);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .13), 0 14px 30px -26px rgba(49, 34, 110, .7);
}
.pel-card .pel-atas { padding-right: 74px; }
.pel-card {
  display: grid;
  gap: 10px;
  padding: 15px;
  border-radius: 16px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.92);
  box-shadow: 0 14px 30px -26px rgba(49,34,110,.7);
  position: relative;
}
.pel-atas { display: flex; align-items: center; gap: 11px; }
.pel-avatar {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: .95rem;
  color: #fff;
  background: linear-gradient(135deg, var(--indigo), var(--violet));
  overflow: hidden;
  flex: 0 0 auto;
  text-decoration: none;
}
.pel-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pel-nama { font-weight: 700; font-size: .9rem; line-height: 1.25; }
.pel-sub { font-size: .74rem; color: var(--muted); }
.pel-baris { display: flex; align-items: center; gap: 6px; font-size: .76rem; color: var(--muted); flex-wrap: wrap; }
.pel-aksi { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 4px; }
.pel-aksi .btn { padding: 6px 10px; font-size: .74rem; border-radius: 9px; }
.pel-stat { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 10px; }
.pel-stat-item { padding: 12px 14px; border-radius: 13px; background: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.9); display: grid; gap: 3px; }
.pel-stat-item strong { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.pel-stat-item span { font-size: .69rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }

.cust-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; align-items: start; }
.cust-media { aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; border: 1px solid rgba(99,95,130,.16); background: #EEF2FF; position: relative; }
.cust-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cust-media iframe { width: 100%; height: 100%; border: 0; display: block; }
.cust-kosong { display: grid; place-items: center; height: 100%; color: var(--muted); font-size: .8rem; text-align: center; padding: 20px; }
.cust-aksi { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.cust-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.label-tombol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 15px;
  border-radius: 11px;
  border: 1px solid rgba(99,95,130,.2);
  background: #fff;
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
}
.label-tombol:hover { background: #F7F8FF; }
.media-info { font-size: .75rem; color: var(--muted); margin-top: 8px; }
.riwayat-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.riwayat-table th, .riwayat-table td { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); text-align: left; }
.riwayat-table th { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.riwayat-table td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; position: relative; z-index: 1; }
.login-card { width: min(380px, 100%); display: grid; gap: 14px; justify-items: start; padding: 28px; }
.login-card h1 { margin: 0; font-size: 1.3rem; }
.login-card p { margin: 0; font-size: .86rem; }
.login-card .form { width: 100%; display: grid; gap: 12px; }
.login-card .hint { justify-self: center; text-align: center; }

/* ---------- Footer ---------- */
.foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 18px 0 30px;
  font-size: .74rem;
  color: var(--muted);
  position: relative;
  z-index: 1;
}

/* ---------- Portal kolektor: tema sendiri (teal) supaya jelas beda dari admin ---------- */
body.body-kolektor { background-color: #EFFAF7; }
/* Portal kolektor = aplikasi tagih versi HP: konten dibatasi supaya enak dibaca
   di desktop juga (tidak melebar seperti lembar admin). */
body.body-kolektor .main { max-width: 900px; margin-inline: auto; gap: 14px; }
body.body-kolektor .hero h1 { font-size: 1.35rem; }
body.body-kolektor .pel-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
body.body-kolektor {
  background-image:
    radial-gradient(900px 600px at 8% -8%, rgba(13, 148, 136, .22), transparent 62%),
    radial-gradient(760px 520px at 96% 4%, rgba(16, 185, 129, .16), transparent 60%),
    radial-gradient(800px 620px at 50% 108%, rgba(56, 189, 248, .12), transparent 62%),
    linear-gradient(160deg, #F0FBF8 0%, #E7F6F2 52%, #F2FBF9 100%);
}
body.body-kolektor .orb-1 { background: #99F6E4; }
body.body-kolektor .orb-2 { background: #A7F3D0; }
body.body-kolektor .orb-3 { background: #BAE6FD; }
body.body-kolektor .topbar { background: rgba(240, 253, 250, .7); }
body.body-kolektor .brand-mark { background: linear-gradient(135deg, #0D9488, #10B981); }
body.body-kolektor .nav-link.is-active {
  color: #0F766E;
  border-color: rgba(13, 148, 136, .22);
}
body.body-kolektor .nav-link:hover { color: #0F766E; }
body.body-kolektor .btn-primary {
  background: linear-gradient(135deg, #0D9488, #10B981);
  box-shadow: 0 12px 24px -14px rgba(13, 148, 136, .85);
}
body.body-kolektor .stat-utama { background: linear-gradient(135deg, #0D9488, #10B981); }
body.body-kolektor .progress > i { background: linear-gradient(90deg, #0D9488, #10B981); }
body.body-kolektor .chip.is-active { background: linear-gradient(135deg, #0D9488, #10B981); }
body.body-kolektor .bulan-tab.is-active {
  background: linear-gradient(135deg, #0D9488, #10B981);
  box-shadow: 0 14px 26px -16px rgba(13, 148, 136, .9);
}
body.body-kolektor .pel-avatar { background: linear-gradient(135deg, #0D9488, #10B981); }
body.body-kolektor .input:focus, body.body-kolektor .select:focus {
  outline-color: rgba(13, 148, 136, .3);
  border-color: rgba(13, 148, 136, .55);
}
body.body-kolektor .nav-keluar { color: var(--muted); }
.mode-chip {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 99px;
  background: rgba(13, 148, 136, .14);
  color: #0F766E;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  vertical-align: middle;
}
.login-kolektor .brand-mark { background: linear-gradient(135deg, #0D9488, #10B981); }
.login-kolektor .btn-primary {
  background: linear-gradient(135deg, #0D9488, #10B981);
  box-shadow: 0 12px 24px -14px rgba(13, 148, 136, .85);
}

/* ---------- Portal kolektor (kartu bayar) ---------- */
.pel-pay { display: grid; gap: 8px; }
.pel-pay .pel-nama { font-size: .95rem; }
.pel-pay .pel-baris { color: var(--muted); }
.pel-pay .btn-block { width: 100%; }
.pp-form { display: grid; gap: 10px; padding-top: 10px; border-top: 1px dashed var(--line-soft); }
.pp-form .filter-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.pp-form .input, .pp-form .select { font-size: .92rem; padding: 11px 12px; }
@media (max-width: 760px) {
  .pel-pay { padding: 13px; }
  .pp-form .filter-aksi .btn { flex: 1 1 auto; }
}

/* tabel riwayat: di HP tetap terbaca tanpa geser */
@media (max-width: 760px) {
  .riwayat-table, .riwayat-table tbody, .riwayat-table tr, .riwayat-table td { display: block; width: auto; }
  .riwayat-table thead, .riwayat-table tfoot { display: none; }
  .riwayat-table tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: .82rem;
  }
  .riwayat-table td { border: 0; padding: 0; }
  .riwayat-table td.num { text-align: left; }
}


/* ==========================================================================
   PORTAL KOLEKTOR — daftar & kartu (mengikuti metode web sales: daftar penuh
   + kotak cari di atas daftar)
   ========================================================================== */
.bar-kembali {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-radius: 13px;
  background: #E6FBF4;
  border: 1px solid rgba(13, 148, 136, .28);
  font-size: .8rem;
  font-weight: 600;
  color: #0F766E;
}
.bar-kembali .bk-teks { flex: 1 1 180px; }
.bar-kembali .btn { padding: 7px 12px; font-size: .78rem; }
@media (max-width: 760px) {
  .bar-kembali .btn { flex: 1 1 auto; }
  .bar-kembali .bk-teks { flex: 1 1 100%; }
}
.daftar-kol { display: grid; gap: 12px; }
.pel-pay { display: grid; gap: 8px; scroll-margin-top: 92px; }
.pel-pay.baris-sorot {
  border-color: rgba(13, 148, 136, .55);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, .16), 0 14px 30px -26px rgba(13, 148, 136, .8);
  animation: sorot-pudar 2.4s ease-out 1;
}
@keyframes sorot-pudar {
  from { background: #D9FBF2; }
  to { background: rgba(255, 255, 255, .8); }
}
.pel-pay .badge { flex: 0 0 auto; }
.pel-angka {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  background: #F6F9FF;
  border: 1px solid rgba(99, 95, 130, .1);
  border-radius: 11px;
  padding: 8px 4px;
}
.pel-angka > div { display: grid; gap: 1px; text-align: center; }
.pel-angka span { font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.pel-angka strong { font-size: .88rem; font-variant-numeric: tabular-nums; }
.pel-angka .kurang strong { color: #B91C1C; }
.pel-angka .lunas strong { color: #0E9F6E; }
.pel-aksi-kol { display: flex; gap: 8px; flex-wrap: wrap; }
.pel-aksi-kol .btn { flex: 1 1 0; min-height: 42px; }
.pel-aksi-kol .form-sebaris { flex: 1 1 0; display: flex; }
.pel-aksi-kol .form-sebaris .btn { flex: 1 1 auto; }
.form-sebaris { margin: 0; }

/* kotak cari (dipakai portal kolektor & pelanggan kolektor) */
.cari-card { display: grid; gap: 8px; padding: 14px 16px; }
.cari-form { display: grid; gap: 6px; }
.cari-baris { display: flex; gap: 8px; align-items: center; }
.cari-input {
  flex: 1 1 0;
  min-width: 0;
  font-size: .95rem;
  padding: 12px 14px;
  border-radius: 12px;
}
.cari-tombol { flex: 0 0 auto; min-height: 44px; }
.cari-kecil { display: flex; justify-content: flex-end; }
.cari-notice {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 11px;
  background: rgba(13, 148, 136, .09);
  border: 1px solid rgba(13, 148, 136, .2);
  font-size: .8rem;
  line-height: 1.6;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.cari-notice .link-aksi { margin-left: auto; }
.stats.stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* tombol kembali ke atas (HP, daftar panjang) */
.ke-atas {
  position: fixed;
  right: 14px;
  bottom: 18px;
  z-index: 25;
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0D9488, #10B981);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 12px 26px -12px rgba(13, 148, 136, .9);
}
body.body-kolektor .ke-atas { display: grid; }

@media (max-width: 1100px) {
  .stats.stats-3 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .cari-card { padding: 12px; }
  .cari-input { font-size: 1rem; padding: 11px 12px; }
  .cari-tombol { padding: 11px 14px; }
  .pel-pay { padding: 13px; gap: 9px; }
  .pel-aksi-kol .btn { flex: 1 1 100%; }
  .pel-aksi-kol .form-sebaris { flex: 1 1 100%; }
  .pel-aksi-kol .form-sebaris .btn { width: 100%; }
  .pp-form .filter-grid { grid-template-columns: 1fr; }
  .daftar-kol { gap: 10px; }
}

/* ---------- Struk ---------- */
.struk-wrap { display: grid; justify-items: center; gap: 16px; padding: 20px 0 40px; }
.struk-aksi { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.struk {
  width: 320px;
  background: #fff;
  color: #111;
  padding: 18px 18px 16px;
  border-radius: 10px;
  box-shadow: 0 20px 44px -28px rgba(49,34,110,.7);
  font-family: ui-monospace, 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.55;
}
.struk.kecil { width: 240px; font-size: 10.5px; padding: 14px; }
.struk-head { text-align: center; display: grid; gap: 2px; padding-bottom: 8px; border-bottom: 1px dashed #9CA3AF; }
.struk-head strong { font-size: 1.02em; letter-spacing: .04em; }
.struk-head span { font-size: .92em; color: #374151; }
.struk-meta { display: grid; gap: 2px; padding: 9px 0; border-bottom: 1px dashed #9CA3AF; }
.struk-meta div { display: flex; justify-content: space-between; gap: 10px; }
.struk-meta b { font-weight: 600; }
.struk-rincian { display: grid; gap: 3px; padding: 9px 0; border-bottom: 1px dashed #9CA3AF; }
.struk-rincian div { display: flex; justify-content: space-between; gap: 10px; }
.struk-total { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; font-weight: 700; font-size: 1.08em; border-bottom: 1px dashed #9CA3AF; }
.struk-terbilang { padding: 8px 0; font-style: italic; font-size: .92em; border-bottom: 1px dashed #9CA3AF; }
.struk-ket { padding: 8px 0; display: grid; gap: 2px; }
.struk-foot { padding-top: 8px; text-align: center; font-size: .9em; color: #374151; display: grid; gap: 4px; }
.struk-tanda { display: flex; justify-content: space-between; gap: 10px; padding-top: 12px; }
.struk-tanda div { display: grid; gap: 26px; text-align: center; flex: 1; }
.struk-tanda small { border-top: 1px dotted #9CA3AF; padding-top: 3px; }

/* ---------- Tabel ringkas (daftar kolektor) ---------- */
.tabel-ringkas td, .tabel-ringkas th { padding: 10px 12px; }
.tabel-ringkas td:nth-child(3), .tabel-ringkas td:nth-child(4) { white-space: nowrap; }
.tabel-ringkas form { display: inline; }
.btn-bt { }

/* ---------- Lembar BWI WIFI (tanpa kolektor & AKSI) ---------- */
table.sheet.sheet-bwi col.col-pilih { width: 3.2%; }
table.sheet.sheet-bwi col.col-no { width: 3.4%; }
table.sheet.sheet-bwi col.col-nama { width: 12%; }
table.sheet.sheet-bwi col.col-ppoe { width: 8%; }
table.sheet.sheet-bwi col.col-alamat { width: 10%; }
table.sheet.sheet-bwi col.col-uang { width: 8%; }
table.sheet.sheet-bwi col.col-selisih { width: 7%; }
table.sheet.sheet-bwi col.col-sisa { width: 8%; }
table.sheet.sheet-bwi col.col-ket { width: 11%; }
table.sheet.sheet-bwi col.col-tgl { width: 10%; }

/* ---------- Pembukuan Keuangan ---------- */
table.sheet.sheet-buku { min-width: 0; }
table.sheet.sheet-buku col.col-tgl { width: 13%; }
table.sheet.sheet-buku col.col-uang { width: 15%; }
table.sheet.sheet-buku col.col-kol { width: 14%; }
table.sheet.sheet-buku col.col-ket { width: 16%; }
table.sheet.sheet-buku col.col-ket2 { width: 17%; }
table.sheet.sheet-buku col.col-aksi-buku { width: 10%; }
table.sheet.sheet-buku td.cell-teks { padding: 8px 10px; font-size: .76rem; }
table.sheet.sheet-buku td.cell-aksi-buku { text-align: center; white-space: nowrap; padding: 6px 4px; }
table.sheet.sheet-buku tr.row-auto td { background: #EEF4FF; }
table.sheet.sheet-buku tr.row-auto:hover td { background: #E6EEFF; }
table.sheet.sheet-buku tr.row-baru td { background: #FFFCF0; border-bottom: 2px solid #F0E3B8; }
table.sheet.sheet-buku tr.row-baru td.cell-edit input { background: #fff; }
.mini-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 1px solid rgba(99, 95, 130, .2);
  background: #fff;
  color: var(--ink);
  font-size: .9rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  margin: 0 2px;
}
.mini-mini:hover { background: #EEF2FF; border-color: rgba(79, 70, 229, .4); }
.mini-mini.mini-danger:hover { background: #FEE2E2; border-color: rgba(224, 36, 36, .35); }
.tambah-grid-bwi { grid-template-columns: 1.4fr 1fr 1.4fr 1fr 1fr auto; }

/* ---------- Printer Bluetooth (struk 58 mm) ---------- */
.btn-bt { background: linear-gradient(135deg, #0D9488, #10B981); color: #fff; border-color: transparent; }
.btn-bt[disabled] { opacity: .55; }
.bt-panel { display: grid; gap: 10px; width: 100%; max-width: 560px; }
.bt-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bt-status {
  font-size: .72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 99px;
  background: #F3F4F6;
  color: #4B5563;
}
.bt-status.ok { background: #E8FBF2; color: #046C4E; }
.bt-status.err { background: #FEF2F2; color: #B91C1C; }
.bt-setting > summary {
  cursor: pointer;
  font-size: .8rem;
  font-weight: 700;
  color: var(--indigo);
  list-style: none;
  padding: 8px 0;
}
.bt-setting > summary::-webkit-details-marker { display: none; }
.bt-setting .filter-grid { margin-top: 8px; }
.bt-setting code { font-size: .72rem; background: #F3F4F6; padding: 1px 4px; border-radius: 4px; }
.bt-preview {
  margin: 0;
  padding: 12px;
  border-radius: 10px;
  background: #FFFDF5;
  border: 1px dashed rgba(99, 95, 130, .3);
  font-family: ui-monospace, 'Courier New', monospace;
  font-size: .72rem;
  line-height: 1.5;
  max-height: 240px;
  overflow: auto;
  white-space: pre;
}
.hint-nominal { display: block; margin-top: 2px; color: var(--warn); font-weight: 600; }
.pratinjau-rusak { color: var(--out); font-weight: 600; }
.lebih-kecil {
  display: block;
  font-size: .64rem;
  font-weight: 700;
  color: var(--indigo);
  font-variant-numeric: tabular-nums;
}
.lebih-info { color: #3730A3; font-weight: 600; }
.struk-aksi { justify-content: center; }

/* ---------- Riwayat impor ---------- */
.log-item { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.9); }
.log-item summary { cursor: pointer; font-size: .82rem; font-weight: 600; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.log-teks {
  margin: 8px 0 0;
  max-height: 220px;
  overflow: auto;
  padding: 10px;
  border-radius: 9px;
  background: #F8FAFF;
  border: 1px solid var(--line-soft);
  font-family: ui-monospace, monospace;
  font-size: .72rem;
  white-space: pre-wrap;
  word-break: break-word;
}
.log-meta { font-size: .72rem; color: var(--muted); font-weight: 500; }

/* ---------- Responsif ---------- */

/* ==========================================================================
   LEMBAR DI HP (<= 760px): satu baris = satu kartu, TIDAK ada geser ke samping.
   Setiap sel menampilkan labelnya lewat data-label (::before), meniru tampilan
   form aplikasi supaya tetap terbaca di layar sempit.
   ========================================================================== */
@media (max-width: 1100px) {
  table.sheet,
  table.sheet tbody,
  table.sheet tr,
  table.sheet td { display: block; width: auto; }
  table.sheet colgroup,
  table.sheet thead,
  table.sheet tfoot { display: none; }
  table.sheet { table-layout: auto; font-size: .82rem; border-spacing: 0; }
  table.sheet tbody tr.row-data {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 10px;
    padding: 12px 13px;
    margin: 0;
    border-bottom: 8px solid #EFF2F9;
    background: #fff;
    border-right: 0;
    border-left: 0;
  }
  table.sheet tbody tr.row-data:nth-child(even) td { background: transparent; }
  table.sheet tbody tr.row-data:hover td { background: transparent; }
  table.sheet tbody tr.row-data td {
    border: 0;
    padding: 0;
    overflow: visible;
    text-align: left;
  }
  table.sheet tbody tr.row-data td::before {
    content: attr(data-label);
    display: block;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 2px;
  }
  table.sheet tbody tr.row-data td.cell-no {
    background: transparent;
    color: var(--indigo);
    font-size: .78rem;
    text-align: left;
    padding: 0;
  }
  table.sheet tbody tr.row-data td.cell-pilih {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    padding: 0 0 2px;
  }
  table.sheet tbody tr.row-data td.cell-pilih::before {
    content: 'PILIH BARIS INI';
    display: inline;
    margin: 0;
  }
  table.sheet tbody tr.row-data td.cell-pilih input {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
  }
  table.sheet tbody tr.row-data td.cell-pilih { justify-content: flex-start; }
  table.sheet tbody tr.row-data td.cell-no::before { content: 'NO'; }
  table.sheet tbody tr.row-data td.cell-nama,
  table.sheet tbody tr.row-data td.cell-alamat { grid-column: 1 / -1; }
  table.sheet tbody tr.row-data td.cell-nama input { font-size: .95rem; font-weight: 700; }
  table.sheet tbody tr.row-data td.cell-edit input,
  table.sheet tbody tr.row-data td.cell-edit select {
    background: #F7F9FF;
    border: 1px solid rgba(99, 95, 130, .18);
    border-radius: 8px;
    padding: 8px 9px;
    font-size: .84rem;
  }
  table.sheet tbody tr.row-data td.cell-edit input:focus,
  table.sheet tbody tr.row-data td.cell-edit select:focus { background: #fff; }
  table.sheet tbody tr.row-data td.cell-bayar {
    background: #F3F6FB;
    border-radius: 8px;
    padding: 6px 9px;
  }
  table.sheet tbody tr.row-data td.cell-bayar::after { display: none; }
  table.sheet tbody tr.row-data td[data-selisih-cell],
  table.sheet tbody tr.row-data td[data-sisa-cell] {
    background: #F7F9FF;
    border-radius: 8px;
    padding: 6px 9px;
  }
  table.sheet tbody tr.row-data td.cell-aksi {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding-top: 4px;
  }
  table.sheet tbody tr.row-data td.cell-aksi::before { display: none; }
  table.sheet tbody tr.row-data td.cell-aksi .mini {
    max-width: none;
    height: 34px;
    font-size: .92rem;
    border-radius: 10px;
    background: #F4F6FF;
  }
  table.sheet .blank-cell { display: block; }
  .sheet-card { border-radius: 16px; }
}

@media (max-width: 1100px) {
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pel-stat { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .cust-grid { grid-template-columns: 1fr; }
  .impor-grid { grid-template-columns: 1fr; }
  .tambah-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .wrap { width: min(100% - 22px, 1320px); }
  .topbar { padding: 9px 0; }
  .brand small { display: none; }
  .topbar-inner { flex-wrap: wrap; gap: 8px; }
  .nav { flex-wrap: wrap; gap: 2px; }
  .nav-link { padding: 7px 10px; font-size: .78rem; }
  .main { padding: 16px 0 12px; gap: 14px; }
  .hero h1 { font-size: 1.28rem; }
  .hero p { font-size: .82rem; }
  .card { padding: 15px; border-radius: 16px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat { padding: 12px; }
  .stat-value { font-size: .95rem; }
  .pel-stat { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
  .pel-stat-item { padding: 10px; }
  .pel-grid { grid-template-columns: 1fr; }
  .sheet-card { border-radius: 16px; }
  .sheet-head { padding: 13px 14px; }
  .sheet-toolbar { padding: 10px 14px; }
  .sheet-toolbar .btn { flex: 1 1 100%; }
  .sheet-hint { padding: 10px 14px 14px; }
  .filter-grid { grid-template-columns: 1fr 1fr; }
  .bulan-tabs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .bulan-tab { min-width: 0; }
  .tambah-grid { grid-template-columns: 1fr; }
  .struk { width: min(320px, 100%); }
  .struk.kecil { width: min(240px, 100%); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------- Cetak (struk) ---------- */
@media print {
  body { background: #fff !important; }
  .bg-orb, .topbar, .foot, .struk-aksi, .flash { display: none !important; }
  .main { padding: 0 !important; }
  .struk-wrap { padding: 0; }
  .struk {
    width: auto;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin: 0 auto;
    font-size: 11px;
  }
  .struk.kecil { font-size: 10px; }
  @page { margin: 6mm; }
}


/* ---------- Halaman Backup & Restore ---------- */
.bk-card { display: grid; gap: 14px; }
.bk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.bk-item {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--line, #E5E7EB);
  border-radius: 12px;
  background: rgba(255, 255, 255, .7);
}
.bk-label { font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted, #6B7280); }
.bk-item strong { font-size: .95rem; }
.bk-sub { font-size: .72rem; color: var(--muted, #6B7280); }
.badge-status {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.badge-status.is-on { color: #08543C; background: rgba(16, 185, 129, .16); border: 1px solid rgba(16, 185, 129, .3); }
.badge-status.is-off { color: #6B7280; background: rgba(148, 163, 184, .16); border: 1px solid rgba(148, 163, 184, .3); }
.badge-status.is-fail { color: #8C1C1C; background: rgba(239, 68, 68, .13); border: 1px solid rgba(239, 68, 68, .28); }
.bk-form { display: grid; gap: 12px; }
.bk-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.bk-form .field { display: grid; gap: 6px; }
.bk-form .field .label { font-size: .78rem; font-weight: 600; color: var(--muted, #6B7280); }
.bk-check { display: flex; align-items: flex-start; gap: 8px; font-size: .84rem; }
.bk-check input { width: 18px; height: 18px; accent-color: var(--accent, #4F46E5); margin-top: 1px; }
.bk-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.bk-note {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(79, 70, 229, .2);
  background: rgba(243, 240, 255, .6);
  font-size: .82rem;
  line-height: 1.55;
}
.bk-note.is-warn { border-color: rgba(240, 180, 41, .45); background: #FFF8E6; color: #7A4E02; }
.bk-copy { display: flex; gap: 8px; }
.bk-copy input { flex: 1 1 auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; }
.bk-detail { border-top: 1px solid var(--line-soft, rgba(0,0,0,.08)); padding-top: 10px; }
.bk-detail summary { cursor: pointer; font-weight: 600; font-size: .84rem; color: var(--accent, #4F46E5); }
.bk-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; font-size: .82rem; }
.bk-list li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,.7); }
.bk-list-num { list-style: decimal; padding-left: 22px; }
.bk-list-num li { display: list-item; background: none; padding: 2px 0; }
.mono-kecl { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .74rem; word-break: break-all; }
.btn.danger { color: var(--out, #E02424); }

/* ============================================================
 * KIT: pembungkus tabel (WAJIB di semua app VibeCoder)
 *
 * Pembungkus tabel lebar harus bisa digeser sendiri, bukan melebarkan
 * halaman.
 * ============================================================ */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ============================================================
 * KIT: tabel biasa (WAJIB di semua app VibeCoder)
 *
 * table.table dipakai banyak halaman (backup.php, admin, bank, tracking,
 * sales, pelanggan) tetapi dulu TANPA gaya sama sekali: padding sel 1px, tanpa
 * garis, tanpa gulir -> teks menempel dan tabel memaksa halaman melebar.
 * ============================================================ */
table.table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  background: rgba(255, 255, 255, .94);
  font-size: .84rem;
}
table.table th,
table.table td {
  padding: 9px 10px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid rgba(99, 95, 130, .14);
}
table.table th {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #56607A;
  background: #EDF0F7;
  white-space: nowrap;
}
table.table tbody tr:hover { background: rgba(79, 70, 229, .04); }
table.table td.ta-right,
table.table th.ta-right { text-align: right; }
table.table td.nowrap { white-space: nowrap; }
table.table .blank-cell { text-align: center; color: var(--muted); padding: 18px 10px; }
table.table tbody tr:last-child td { border-bottom: 0; }