/* Tema PDAM Bali (sesi rebranding, D-033). Dimuat sesudah app.css + penyesuaian.css.
   Hanya menimpa token warna dan menambah gaya merek; app.css tetap utuh supaya bisa diganti dari repo desain.
   Warna dari gaya Momentum AI: biru #004c9e (gelap #003d7a), hijau #55a22f, teks #101828. Huruf tetap huruf sistem. */

:root {
  /* aksen / aksi utama: biru */
  --accent: #004C9E;
  --accent-hover: #003D7A;
  --accent-bg: #EAF1FA;
  --accent-border: #B9CFEA;
  --border-focus: #004C9E;
  --bg-selected: #EAF1FA;

  /* teks */
  --text-primary: #101828;

  /* aksen kedua: hijau. Teks memakai versi lebih gelap supaya terbaca di latar terang. */
  --accent-2: #55A22F;
  --accent-2-text: #3B7A1E;
  --accent-2-bg: #EEF6E9;

  /* kanal WhatsApp ikut hijau merek */
  --channel-wa: #3B7A1E;
  --channel-wa-bg: #EEF6E9;

  /* gelembung bot ikut biru merek */
  --bubble-out: #EDF3FB;
  --bubble-out-border: #D3E1F2;
}

/* --- merek di bilah atas -------------------------------------------------- */
.topbar { box-shadow: inset 0 3px 0 var(--accent); }
.brand__mark {
  width: 30px; height: 30px;
  border-radius: var(--radius-pill);
  background: linear-gradient(160deg, var(--accent) 55%, var(--accent-2));
}
.brand__mark .i { width: 17px; height: 17px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name { color: var(--accent); font-size: var(--fs-lg); }
.brand__sub { font-size: var(--fs-xs); font-weight: 600; color: var(--accent-2-text); }

/* --- rincian teknis di Ringkasan (biaya AI), tertutup bawaan --------------- */
.teknis__head { list-style: none; cursor: pointer; }
.teknis__head::-webkit-details-marker { display: none; }
.teknis__head > .i:last-child { transition: transform 0.15s; color: var(--text-secondary); }
.teknis[open] .teknis__head > .i:last-child { transform: rotate(180deg); }
.teknis[open] { gap: var(--sp-5); }
.teknis .card__title { font-size: var(--fs-base); color: var(--text-secondary); }

/* --- halaman Pelanggan & Blast (D-037) ------------------------------------ */
.blast__notice { display: flex; gap: var(--sp-3); align-items: flex-start; }
.blast__rincian { margin: var(--sp-2) 0 0; padding-left: var(--sp-6); }
.blast__konfirmasi, .blast__status { display: flex; flex-direction: column; gap: var(--sp-4);
  border-color: var(--accent-border); }
.blast__aksi { justify-content: flex-end; }
.blast__tabel td { vertical-align: top; }
.blast__tabel input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }
.blast__tabel .badge { margin: 0 0 2px; }
.blast__daftar-status { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column;
  gap: var(--sp-3); }

/* --- data dummy di halaman Pelanggan & Blast (D-042) ---------------------- */
.data__kepala { gap: var(--sp-3); flex-wrap: wrap; justify-content: flex-end; }
.data__kartu { display: flex; flex-direction: column; gap: var(--sp-4); border-color: var(--accent-border); }
.data__kartu > p { margin: 0; }
.data__tutup { margin-left: auto; }
.data__form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); }
.data__field { display: flex; flex-direction: column; gap: var(--sp-2); }
.data__field .setelan__label { align-self: flex-start; font-size: var(--fs-sm); }
.data__field input {
  width: 100%; padding: 7px 10px; font: inherit; font-size: var(--fs-md); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-surface);
}
.data__field input:focus { outline: none; border-color: var(--border-focus); }
.data__help { grid-column: 1 / -1; margin: 0; line-height: 1.45; }
.data__lepas { display: flex; margin-top: var(--sp-3); }
.data__aksi { grid-column: 1 / -1; justify-content: flex-end; }
.data__sub { gap: var(--sp-3); align-items: baseline; }
.data__tagihan td { vertical-align: top; }
.data__tagihan input, .data__tagihan select {
  width: 100%; min-width: 0; padding: 5px 8px; font: inherit; font-size: var(--fs-sm); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-surface);
}
.data__tagihan input:focus, .data__tagihan select:focus { outline: none; border-color: var(--border-focus); }
.data__baris-aksi { gap: var(--sp-2); flex-wrap: nowrap; }
.data__baru td { background: var(--bg-subtle); }

/* --- penanda keputusan "Bot: balas" tetap satu baris ---------------------- */
.decision__action { white-space: nowrap; }