/* SIRENDU 2026 - gaya aplikasi (T20). Hanya memakai variabel Universal Theme agar ikut tema terang/gelap. */

/* Keterangan di bawah judul halaman: lebar baca nyaman, warna sekunder */
.srd-lead {
  max-width: 88ch;
  margin: 0;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--ut-body-text-color, inherit);
  opacity: .8;
}

/* Angka pada laporan: lebar digit seragam supaya kolom nominal mudah dibandingkan */
.a-IRR-table td[align="right"],
.a-IRR-table td.u-tE,
.t-Report-cell[align="right"] {
  font-variant-numeric: tabular-nums;
}

/* Kepala kolom laporan tetap terlihat saat menggulir */
.a-IRR-table th {
  white-space: nowrap;
}

/* Pil status (melanjutkan pola .st di SISPRAN OPERASIONAL), warna dari palet tema */
.srd-st {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  color: #004f95;
  color: color-mix(in srgb, var(--ut-palette-info, #004f95) 62%, #000);
  background: var(--ut-palette-info-shade, #e9f5ff);
}
.srd-st[data-st=""] { display: none; }
.srd-st[data-st*="SETUJU" i], .srd-st[data-st*="SUKSES" i], .srd-st[data-st*="SUCCESS" i],
.srd-st[data-st*="LENGKAP" i], .srd-st[data-st*="COCOK" i], .srd-st[data-st*="SELESAI" i],
.srd-st[data-st*="TERUKUR" i], .srd-st[data-st="OK" i], .srd-st[data-st*="SESUAI" i] {
  color: #00592e;
  color: color-mix(in srgb, var(--ut-palette-success, #00592e) 62%, #000);
  background: var(--ut-palette-success-shade, #cdffe0);
}
.srd-st[data-st*="DRAFT" i], .srd-st[data-st*="BELUM" i], .srd-st[data-st*="TUNGGU" i],
.srd-st[data-st*="PENDING" i], .srd-st[data-st*="SEBAGIAN" i], .srd-st[data-st*="PROSES" i],
.srd-st[data-st*="RUNNING" i], .srd-st[data-st*="AJU" i] {
  color: #764400;
  color: color-mix(in srgb, var(--ut-palette-warning, #764400) 62%, #000);
  background: var(--ut-palette-warning-shade, #fffedc);
}
.srd-st[data-st*="TOLAK" i], .srd-st[data-st*="GAGAL" i], .srd-st[data-st*="ERROR" i],
.srd-st[data-st*="FAIL" i], .srd-st[data-st*="PUTUS" i], .srd-st[data-st*="TIDAK" i],
.srd-st[data-st*="TANPA" i], .srd-st[data-st*="BATAL" i] {
  color: #a50000;
  color: color-mix(in srgb, var(--ut-palette-danger, #a50000) 62%, #000);
  background: var(--ut-palette-danger-shade, #ffebeb);
}

/* Role aktif di bilah atas: jangan sampai mendorong menu pengguna keluar layar */
.t-NavigationBar-item .t-Button-label {
  max-width: 28ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Petunjuk halaman: tertutup secara bawaan supaya blok judul yang menempel tetap ringkas */
.srd-help > summary {
  display: inline-block;
  cursor: pointer;
  font-size: .8125rem;
  color: var(--ut-link-text-color, inherit);
  list-style: none;
}
.srd-help > summary::-webkit-details-marker { display: none; }
.srd-help > summary::after { content: " \25BE"; }
.srd-help[open] > summary::after { content: " \25B4"; }
.srd-help > .srd-lead { margin-top: 4px; }

/* Judul halaman ringkas (D1 = a, DEC-63): h1 + tombol Bantuan; petunjuk tampil sebagai panel melayang */
.srd-judul--hal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 12px; }
.srd-judul--hal h1 { margin: 0; font-size: 1.5rem; line-height: 1.25; font-weight: 600; }
.srd-judul--hal .srd-help { position: relative; }
.srd-judul--hal .srd-help > summary {
  display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 4px 12px;
  border: 1px solid var(--ut-component-border-color, #c9c3bd); border-radius: 6px;
  background: var(--ut-component-background-color, #fff); color: var(--ut-body-text-color, inherit); font-size: .8125rem;
}
.srd-judul--hal .srd-help[open] > summary { background: var(--ut-component-highlight-background-color, #f1efed); }
.srd-help-isi {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; box-sizing: border-box;
  width: min(560px, calc(100vw - 32px)); padding: 12px 16px;
  background: var(--ut-component-background-color, #fff); border: 1px solid var(--ut-component-border-color, #e2deda);
  border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
}
.srd-help-isi .srd-lead { max-width: none; opacity: 1; }
@media (max-width: 640px) {
  .srd-judul--hal h1 { font-size: 1.375rem; }
  .srd-judul--hal .srd-help > summary { min-height: 44px; }
  .srd-judul--hal .srd-help { position: static; }
  .srd-judul--hal { position: relative; }
  .srd-help-isi { left: 0; right: 0; width: auto; }
}
/* Percontohan filter sebaris dengan judul (rencana UI/UX 2.1, 2026-11-15): judul 4 kolom, filter 8 kolom tanpa kartu */
.srd-judul--sebaris { justify-content: flex-start; min-height: 56px; margin-bottom: 0; }
.srd-judul--sebaris .srd-help-isi { left: 0; right: auto; }
#srdFilterSebaris { margin-bottom: 12px; }
#srdFilterSebaris .t-Form-fieldContainer { margin-bottom: 0; }
@media (max-width: 640px) {
  .srd-judul--sebaris { min-height: 0; margin-bottom: 8px; }
}

/* Beranda varian A (D4 = a, 2026-11-14): judul ringkas, daftar tindak lanjut, panel ringkas, pintasan per modul */
.srd-beranda { --srd-garis: var(--ut-component-border-color, #e2deda); --srd-redup: var(--ut-body-text-color-muted, #5e5955); --srd-perhatian: #9a3a0b; }
.srd-beranda h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.srd-judul { margin: 0 0 20px; }
.srd-judul h1 { margin: 0; font-size: 1.5rem; line-height: 1.25; font-weight: 600; }
.srd-judul p { margin: 4px 0 0; color: var(--srd-redup); }
.srd-beranda-atas { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.srd-tl { flex: 999 1 560px; min-width: 0; }
.srd-beranda-samping { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.srd-panel { background: var(--ut-component-background-color, #fff); border: 1px solid var(--srd-garis); border-radius: 10px; }
.srd-tl > h2 { padding: 16px 20px 12px; }
.srd-tl-daftar { list-style: none; margin: 0; padding: 0; }
.srd-tl-baris { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--srd-garis); }
.srd-tl-angka { font-size: 1.75rem; font-weight: 600; line-height: 1; text-align: right; font-variant-numeric: tabular-nums; }
.srd-tl-angka--perhatian { color: var(--srd-perhatian); }
.srd-tl-teks { min-width: 0; }
.srd-tl-judul { display: block; font-weight: 600; }
.srd-tl-rinci { display: block; color: var(--srd-redup); font-size: .8125rem; }
.srd-tl-aksi { white-space: nowrap; }
.srd-tl-kosong { padding: 16px 20px 20px; border-top: 1px solid var(--srd-garis); }
.srd-tl-kosong p { margin: 0 0 4px; color: var(--srd-redup); }
.srd-tl-semua { margin: 0; padding: 12px 20px; border-top: 1px solid var(--srd-garis); }
.srd-tl-kosong .srd-tl-kosong-judul { font-weight: 600; color: inherit; }
.srd-tl-kosong .t-Button { margin-top: 8px; }
.srd-ringkas { padding: 16px 20px; }
.srd-ringkas > h2 { margin-bottom: 8px; }
.srd-ringkas p { margin: 8px 0; color: var(--srd-redup); font-size: .8125rem; }
.srd-sy-daftar { list-style: none; margin: 0; padding: 0; }
.srd-sy-daftar li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; white-space: nowrap; padding: 6px 0; border-top: 1px solid var(--srd-garis); font-variant-numeric: tabular-nums; }
.srd-status { padding: 1px 8px; border-radius: 999px; font-size: .75rem; font-weight: 600; background: #eeebe8; color: #3f3a36; }
.srd-status--success { background: #ddf3e6; color: #0b5a33; }
.srd-status--failed { background: #fbe3dc; color: #8a2a0a; }
.srd-pn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 8px; }
.srd-pn dt { font-size: .8125rem; color: var(--srd-redup); }
.srd-pn dd { margin: 0; font-size: 1.125rem; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.srd-ps { margin-top: 28px; }
.srd-ps > h2 { margin-bottom: 12px; }
.srd-ps-kisi { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.srd-ps-grup { min-width: 0; }
.srd-ps-grup h3 { margin: 0 0 6px; font-size: .8125rem; font-weight: 600; color: var(--srd-redup); }
.srd-ps-grup ul { list-style: none; margin: 0; padding: 0; }
.srd-ps-grup a { display: block; padding: 4px 0; }
@media (max-width: 640px) {
  .srd-tl-baris { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 12px 16px; }
  .srd-tl-angka { font-size: 1.375rem; }
  .srd-tl-baris { align-items: start; }
  .srd-tl-aksi { grid-column: 2; justify-self: start; min-height: 44px; display: inline-flex; align-items: center; }
  .srd-ps-grup a, .srd-ringkas > a { padding: 0; min-height: 44px; display: flex; align-items: center; }
}

/* Fokus papan ketik selalu terlihat */
:focus-visible {
  outline-offset: 2px;
}

/* Layar sempit (audit F04): bilah cari Interactive Report boleh menyusut, supaya tombol Go tidak terpotong.
   Penyebab: .a-IRR-search ber-flex "1 0 auto" dan wadah isiannya ber-min-width auto. */
@media (max-width: 640px) {
  .a-IRR-search { flex-shrink: 1; min-width: 0; }
  .a-IRR-searchFieldContainer { min-width: 0; }
  .a-IRR-search-field { min-width: 0; width: 100%; }
}

/* Layar sempit (audit F05): pohon master tidak memakan lebih dari setengah layar, dan region detail
   berhenti di bawah bilah atas saat digulir ke tampilan. */
@media (max-width: 640px) {
  .t-Region.i-h640 > .t-Region-bodyWrap,
  .t-Region.i-h640 > .t-Region-bodyWrap > .t-Region-body { height: 45vh; }
}
#srdRkoIndikator { scroll-margin-top: 120px; }

/* Layar sempit (audit UI/UX 2026-11-14 temuan 09): deretan tombol region turun baris, tidak melewati tepi layar. */
@media (max-width: 640px) {
  .t-Region-buttons { flex-wrap: wrap; }
  .t-Region-buttons-right { flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: 100%; box-sizing: border-box; min-width: 0; }
}

/* Tahun sesi di bilah atas (P0_IDKALENDER): pada layar sempit angka tahun tetap terbaca (375 px: 49 px tanpa aturan ini). */
#P0_IDKALENDER_CONTAINER, #P0_IDKALENDER { min-width: 112px; }
/* T81: header 56 px (sasaran rencana layout §9). Label Tahun tersembunyi secara visual (templat hidden, tetap terbaca
   pembaca layar); teks pilihan "Tahun 2026" memberi konteks. */
.t-Header #P0_IDKALENDER { height: 2.5rem; min-height: 2.5rem; padding-block: 0; }
/* T81: label status di dalam tabel boleh membungkus agar tabel lebar (Dana Terikat) tidak meluap. */
.a-IRR-table .srd-st, .t-Report-report .srd-st { white-space: normal; max-width: 11rem; }

/* Fase C (T81): penanda isian wajib. Teks bawaan templat ("Required") diganti lewat CSS karena kuncinya tidak dikenal; elemen ini aria-hidden */
.t-Form-itemRequired { font-size: 0; }
.t-Form-itemRequired::after { content: "Wajib diisi"; font-size: .6875rem; }