/* Pengaturan (views/pengaturan.js) — gaya khusus halaman ini (DESIGN.md 7.9). Komponen bersama ada di app.css:
   .ph/.ph-ic/.how, .grid2, .field, .scroll.cards + table.cards (kartu di HP), .pill, .btn.soft/.danger-soft, .banner. */

/* Peringatan akun tidak aktif (GM, banner merah): judul + daftar bila lebih dari satu */
.pg-warn > ul { margin: 6px 0 0; padding-left: 18px; }
.pg-warn > ul > li + li { margin-top: 4px; }
.pg-warn li::marker { color: var(--red-ink); }

/* Klaster & Partner: garis pemisah antar klaster */
#clu > .grid2 + .grid2 { padding-top: 14px; border-top: 1px solid var(--stroke); }
@media (max-width: 559.98px) { #clu > .btns > .btn { flex: 1 1 100%; } }
/* Partner yang akunnya nonaktif: pilihan bertanda merah + keterangan di bawahnya sampai diganti */
#clu select[aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 4px var(--red-soft); }
.pg-off { display: flex; align-items: flex-start; gap: 6px; color: var(--red-ink); font-size: var(--fs-xs); font-weight: 650; line-height: 1.4; }
.pg-off > .ico { flex: none; margin-top: 1px; }

/* Manager → profil: avatar + nama sebagai satu tautan, tanpa gaya tautan; WA tetap di sebelahnya */
a.person-link { color: inherit; text-decoration: none; }
.person > a.person-link { display: inline-flex; align-items: center; gap: 6px; min-width: 0; border-radius: 999px; }
.person > a.person-link:hover > span { text-decoration: underline; text-underline-offset: 3px; }
.pg-mgr .person { margin-block: 2px; }
.person > a.person-link { white-space: nowrap; }
/* Tabel (≥720 px): satu Manager per baris; WA turun ke bawah nama bila kolom sempit, nama tidak terpotong */
@media (min-width: 720px) { .pg-mgr .person { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-right: 0; } }

/* Tabel cabang (≥720 px: tabel; di HP: kartu per cabang lewat table.cards) */
.pg-branches .pg-bn { font-weight: 750; }
.pg-branches td:first-child { min-width: 140px; }
.pg-branches td > select { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
.pg-branches .pill[title] { cursor: help; }

/* Lokasi toko: pil + aksi */
.loc-act { margin-top: 6px; }
.loc-act select { min-height: 36px; padding: 6px 36px 6px 12px; background-position: right 10px center; background-size: 16px; }
.loc-act [data-loc].is-busy .ico { animation: spin .9s linear infinite; }
/* Partner, lokasi sudah ditetapkan: tanpa tombol, hanya keterangan berkunci (KC) */
.pg-loc-lock { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--muted); font-weight: 650; }
.pg-loc-lock > .ico { flex: none; color: var(--dim); }

@media (max-width: 719.98px) {
  table.cards.pg-branches tr { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  table.cards.pg-branches td:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
  table.cards.pg-branches .pg-bn { font-size: var(--fs-md); font-weight: 800; letter-spacing: -.01em; }
  table.cards.pg-branches td.pg-mgr { grid-column: 1 / -1; }
  table.cards.pg-branches td > select { width: 100%; min-height: 44px; padding-left: 12px; padding-right: 34px; background-position: right 10px center; }
  table.cards.pg-branches .loc-act { margin-top: 10px; gap: 8px; }
  table.cards.pg-branches .pg-loc-lock { margin-top: 10px; }
  /* Jempol: aksi lokasi setinggi 44 px; "Pakai lokasi" selebar kartu, radius + Hapus di baris berikutnya */
  table.cards.pg-branches .loc-act > .btn.sm,
  table.cards.pg-branches .loc-act > select { min-height: 44px; }
  table.cards.pg-branches .loc-act > [data-loc] { flex: 1 1 100%; }
  table.cards.pg-branches .loc-act > select { flex: 1 1 0; min-width: 0; }
}
/* HP yang sedikit lebih lebar: Status & Klaster berdampingan */
@media (min-width: 380px) and (max-width: 719.98px) {
  table.cards.pg-branches tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}