/* Menara Kontrol (views/menara.js) — gaya khusus halaman ini. Komponen bersama ada di app.css (.tile-link, .matrix .q-*, .sys, table.cards).
   Semua aturan di sini memakai kelas milik halaman ini saja (berkas view dimuat global):
   .mx-ph, .mx-tiles, .tile-more, .mx-alerts, .mx-bn, .mx-bt, .mx-bl, .mx-more, .mx-when, .mx-sys, .mx-table, .mx-th, .mx-nw, .mx-tip, .mx-tm,
   .mx-chev, .mx-plot, .mx-legend, .mx-lg, .mx-ver, .mx-warn, .mx-flag, .mx-intro, .matrix .nm, .matrix .ql-*. */

/* ---------- Kepala: segmen periode selebar layar di HP (zona jempol) ---------- */
@media (max-width: 559.98px) {
  .mx-ph > .seg.ph-act { display: flex; flex: 1 1 100%; }
  .mx-ph > .seg.ph-act > button { flex: 1 1 0; min-height: 40px; }
}

/* ---------- Empat KPI: 2 × 2, atau 4 sebaris bila lebar isi ≥ 860 px (tidak pernah 3 + 1) ----------
   clamp(): di atas 860 px nilai tengahnya sangat negatif → kolom min 25% (4 kolom); di bawahnya sangat positif → 50% (2 kolom). */
@media (min-width: 720px) {
  .mx-tiles { grid-template-columns: repeat(auto-fit, minmax(clamp(calc(25% - 12px), calc((860px - 100%) * 999), calc(50% - 8px)), 1fr)); }
}
/* KPI yang seluruh kartunya bisa diketuk (.tile-link): ajakan di baris .m */
.mx-tiles .tile-more { color: var(--accent-ink); font-weight: 700; }
.mx-tiles .tile-more .ico { margin-left: 4px; vertical-align: -2px; transition: transform var(--dur) var(--ease); }
.mx-tiles .tile:hover .tile-more .ico, .mx-tiles .tile:focus-within .tile-more .ico { transform: translateX(2px); }

/* ---------- Banner akun tidak aktif (merah) & perubahan lokasi / Partner (info): satu tumpukan rapat ----------
   Lebih dari satu butir: judul + daftar, tiga pertama terlihat, sisanya dalam <details class="how mx-more">. */
.mx-alerts { display: flex; flex-direction: column; gap: var(--space-2); }
.mx-bn > .mx-bt { display: block; font-weight: 750; }
.mx-bl { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 0; padding-left: 18px; }
.mx-bl > li { line-height: 1.45; }
.mx-bn .mx-when { color: var(--muted); white-space: nowrap; }
.mx-more { margin-top: 2px; }
.mx-more > .mx-bl { color: inherit; max-width: none; }   /* .how > ul meredupkan teks; di banner butir tetap sewarna */
.banner.bad .mx-more > summary { color: var(--red-ink); }
.banner.info .mx-more > summary { color: var(--blue-ink); }

/* ---------- Masalah sistem ---------- */
.mx-sys .eyebrow { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 6px; margin-bottom: 6px; }   /* ikon tetap di samping teks yang membungkus */
.mx-sys .eyebrow .ico { flex: none; margin-top: 1px; }
.mx-sys > div > b { display: block; font-size: var(--fs-md); font-weight: 750; letter-spacing: -.01em; line-height: 1.4; }
.mx-sys > div > b .code { vertical-align: 1px; }
.mx-sys > div > .m { margin-top: 4px; }
@media (max-width: 559.98px) { .mx-sys > .btn { flex: 1 1 100%; min-height: 44px; } }

/* ---------- Tabel per cabang (≥720 px tabel, <720 px kartu) ---------- */
.mx-table tbody tr[role="button"]:focus-visible { outline-offset: -2px; border-radius: 0; }
.mx-table td:first-child b { font-weight: 750; }
.mx-table td:first-child .m { margin-top: 4px; }
/* Kepala bertooltip (Tanpa Manager, TL terhadap tenggat asli, kolom Verifikator) */
:is(.mx-table, .mx-ver) th.mx-th { cursor: help; }
.mx-th .mx-nw { white-space: nowrap; }
.mx-th .mx-tip { margin-left: 4px; vertical-align: -1px; color: var(--dim); }
.mx-table td.mx-tm .c[title] { cursor: help; }
@media (max-width: 719.98px) {
  .mx-table tbody tr { position: relative; transition: background-color var(--dur) var(--ease); }
  .mx-table tbody tr[role="button"]:active { background: var(--surface-2); }
  .mx-table tbody tr[role="button"]:focus-visible { outline-offset: -3px; border-radius: var(--radius-lg); }
  .mx-table table.cards td:first-child { padding-right: 28px !important; }
  .mx-table td:first-child b { font-size: var(--fs-md); letter-spacing: -.01em; }
  .mx-table .mx-chev { position: absolute; top: 16px; right: var(--space-4); color: var(--dim); }
  .mx-table td .m { margin-top: 2px; }
  .mx-table td.mx-tm:empty { display: none; }   /* Tanpa Manager / PJ tanpa akun yang kosong (0/0) tidak tampil di kartu */
}

/* ---------- Matriks hasil × disiplin ---------- */
@media (max-width: 559.98px) { .card.matrix { padding: var(--space-4); } }
.mx-plot { min-width: 0; }
.matrix .q { stroke: none; }
.matrix .ql-ok { fill: var(--green-ink); }
.matrix .ql-warn { fill: var(--amber-ink); }
.matrix .ql-info { fill: var(--blue-ink); }
.matrix .ql-bad { fill: var(--red-ink); }
/* Nama cabang: lingkar tipis sewarna kartu agar terbaca di atas garis bantu dan latar kuadran. */
.matrix .nm { paint-order: stroke fill; stroke: var(--surface-solid); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
/* Titik: area ketuk ~34 px lewat garis tepi transparan; membesar saat disorot / difokus. */
.matrix circle[data-go-to] { stroke: transparent; stroke-width: 14px; transform-box: fill-box; transform-origin: center;
  transition: transform var(--dur) var(--ease-spring); }
.matrix circle[data-go-to]:hover { transform: scale(1.3); }
.matrix circle[data-go-to]:focus-visible { outline: none; transform: scale(1.3); stroke: var(--text); stroke-width: 2.5px; }

/* Legenda empat kuadran: satu kolom di HP, 2 × 2 mengikuti letak kuadran di layar lebar. */
.matrix .mx-legend { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 720px) { .matrix .mx-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; } }
.mx-legend .mx-lg { position: relative; margin: 0; padding-left: 20px; line-height: 1.45; }
.mx-legend .mx-lg b { color: var(--text); font-weight: 750; }
.mx-legend .mx-lg > i { position: absolute; left: 0; top: .2em; width: 12px; height: 12px; border-radius: 50%; }
.mx-legend .dot-ok { background: var(--green); }
.mx-legend .dot-warn { background: var(--amber); }
.mx-legend .dot-info { background: var(--blue); }
.mx-legend .dot-bad { background: var(--red); }

/* ---------- Verifikator (90 hari): tabel ≥720 px, kartu di HP; baris waspada berlatar amber ---------- */
.mx-intro { max-width: 72ch; padding: 0 2px; }
.mx-ver th.r, .mx-ver td.r { text-align: right; }
.mx-ver table.plain th { white-space: normal; vertical-align: bottom; }   /* kepala panjang membungkus, tabel muat tanpa geser */
.mx-ver td:first-child b { font-weight: 750; }
.mx-ver .mx-flag { margin-top: 6px; }
.mx-ver tr.mx-warn { background: var(--amber-soft); }
@media (max-width: 719.98px) {
  .mx-ver.scroll.cards { overflow: hidden; }   /* latar baris waspada ikut sudut membulat kartu */
  .mx-ver td:first-child b { font-size: var(--fs-md); letter-spacing: -.01em; }
}