/* Cabang Baru (views/proyek.js) — gaya khusus halaman ini. Komponen bersama ada di app.css (.count-big, .gate.is-pass/.is-next/.is-held, .phase, .tasks). */

/* Daftar: ikon kecil di depan tiap butir meta */
.pj-row .meta > span { display: inline-flex; align-items: center; gap: 5px; }
.pj-row .meta .ico { width: 14px; height: 14px; color: var(--dim); }

/* Kepala detail: di HP pil status naik sebaris dengan kotak ikon, teks di bawahnya */
@media (max-width: 559.98px) {
  .pj-head > .ph-text { order: 2; }
  .pj-head > .ph-act { margin-left: auto; }
}

/* Gerbang: kotak ikon + judul sebaris, catatan keputusan */
.gate-h { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gate-h > b { flex: 1; min-width: 0; line-height: 1.3; overflow-wrap: anywhere; }
.gate-note { display: flex; align-items: flex-start; gap: 6px; color: var(--muted); font-size: var(--fs-xs); line-height: 1.45; }
.gate-note > .ico { flex: none; margin-top: 2px; color: var(--dim); }
.gate-note b { font-size: inherit; font-weight: 750; color: var(--text); }

/* Fase: kolom tambahan untuk panah buka/tutup; kolom pil selebar tetap agar bar kemajuan tiap fase sejajar */
.pj-phases .phase > button { grid-template-columns: 32px minmax(0, 1fr) 150px minmax(136px, auto) 16px; }
.pj-phases .phase > button > .pill { justify-self: end; }
@media (max-width: 559.98px) {
  /* Baris 1: nomor · nama · panah; baris 2: bar kemajuan · pil keadaan */
  .pj-phases .phase > button { grid-template-columns: 32px minmax(0, 1fr) auto 16px; row-gap: 10px; }
  .pj-phases .phase > button .no { grid-column: 1; grid-row: 1 / span 2; }
  .pj-phases .phase > button .nm { grid-column: 2 / 4; grid-row: 1; }
  .pj-phases .phase > button .bar { grid-column: 2; grid-row: 2; }
  .pj-phases .phase > button > .pill { grid-column: 3; grid-row: 2; }
  .pj-phases .phase > button > .chev { grid-column: 4; grid-row: 1 / span 2; }
}

/* Tugas: judul di atas, pemilik/penyelesai/tertahan di bawah */
.pj-phases .tasks label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pj-phases .tasks .pt-t { overflow-wrap: anywhere; }
.pj-phases .tasks .pt-m { font-size: var(--fs-xs); font-weight: 600; color: var(--dim); }
.pj-phases .tasks .pt-lock { display: inline-flex; align-items: center; gap: 4px; color: var(--amber-ink); font-weight: 700; vertical-align: -2px; }
.pj-phases .tasks input:disabled + label { cursor: default; }
.pj-phases .tasks li.is-blocked label { cursor: not-allowed; }
.pj-phases .tasks li.is-blocked .pt-t { color: var(--muted); }
.pj-phases .tasks .gate-row.is-pass { color: var(--green-ink); }
@media (max-width: 559.98px) {
  .pj-phases .tasks li { grid-template-columns: 28px minmax(0, 1fr); row-gap: 6px; }
  .pj-phases .tasks li > input { grid-row: 1 / span 2; align-self: start; }
  .pj-phases .tasks li > .pill { grid-column: 2; justify-self: start; }
}

/* Pengaturan proyek: aksi berisiko dipisah ke kanan; di HP tombol selebar kartu */
@media (min-width: 560px) { .pj-set .btns > #pjCancel { margin-left: auto; } }
@media (max-width: 559.98px) { .pj-set .btns > .btn { flex: 1 1 100%; } }