/* Kerapian halaman kerja. Navigasi dan palet tetap memakai token Suite. */
@media screen{
  .page{--ux-jarak:16px;font-size:13px;min-width:0}
  .page .page-head{gap:16px;margin-bottom:16px;align-items:center;flex-wrap:wrap}
  .page .page-head h1{font-size:22px;line-height:1.3;letter-spacing:-.4px}
  .page .page-head p{font-size:12px;line-height:1.6;max-width:72ch}
  .page .panel{margin-bottom:16px}
  .page .panel-head{padding:12px 16px;gap:12px}
  .page .panel-body{padding:16px}
  .page .btn,.modal .btn,.pr-laci .btn{min-height:32px;font-size:12px}
  .page .tbl th{font-size:10.5px;line-height:1.4}
  .page .tbl td{font-size:12px;padding-top:10px;padding-bottom:10px}
  /* TANPA scrollbar-gutter: ruang batang gulir tegak yang dicadangkannya
     membuat lebar gulir wadah berbeda dari batang gulir ATAS (tabel-gulir.js),
     dan di ujung kanan ±15 px kolom terakhir tidak terjangkau lewat batang atas.
     Dikunci uji 41. */
  /* TANPA overscroll-behavior:contain pada wadah tabel (laporan MRI 1 Okt
     2026: "saat kursor di area tabel tidak bisa scroll down, harus di luar
     tabel"). `contain` memutus gulir dari tabel ke halaman — dan di Chrome
     ia menahan roda mouse bahkan saat tabelnya sendiri tidak bisa digulir
     ke arah itu, jadi halaman diam selama kursor di atas tabel. Dialog dan
     laci TETAP contain: di sana gulir yang menembus ke halaman di
     belakangnya memang yang dicegah. */
  .tbl-wrap:focus-visible,.pr-gulir:focus-visible{outline:2px solid var(--fokus);outline-offset:2px}
  .page .td-num,.page td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
  .page button.kpi,.page a.kpi{cursor:pointer;transition:box-shadow .15s,border-color .15s}
  .page button.kpi:hover,.page a.kpi:hover{border-color:var(--blue);box-shadow:var(--shadow-2)}
  .page .pr-kepala-aksi{margin-left:auto;flex:0 1 auto}
  .page .pr-kpi{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .page .pr-kpi>button{padding:14px;border-radius:14px;min-height:130px}
  .page .pr-kpi>button:hover{transform:none;border-color:var(--blue);box-shadow:var(--shadow-2)}
  .page .pr-kpi strong{font-size:clamp(18px,1.65vw,24px);white-space:normal;overflow:visible;overflow-wrap:anywhere;letter-spacing:-.4px;line-height:1.4}
  .page .pr-kpi>button>span,.page .pr-kpi small{font-size:11px}
  .page .pr-filter{padding:12px;gap:8px}
  .page .pr-keterangan,.page .pr-petunjuk,.page .pr-kaki{font-size:11px;line-height:1.6}
  .page .pr-bilah{padding:10px 12px;gap:10px;scrollbar-gutter:stable;align-items:center}
  .page .pr-bilah .btn{font-size:11px;min-height:34px}
  .page .pr-gulir{max-height:62vh;min-height:130px;scrollbar-gutter:stable}
  .page .pr-tabel th,.page .pr-tabel td{padding:10px 12px}
  .page .pr-tabel th{font-size:10.5px}
  .page .pr-tabel td{font-size:12px;vertical-align:middle}
  .page .pr-tabel small{font-size:10.5px;line-height:1.5}
  .page .pr-tabel input[type=checkbox]{width:18px;height:18px;margin:5px;vertical-align:middle}
  .page .pr-tabel :is(th,td):first-child{width:52px;min-width:52px;max-width:52px}
  .page .pr-tabel :is(th,td):nth-child(2){left:52px}
  .page .pr-tabel tr[aria-selected=true] td{background:var(--blue-soft)}
  .page .pr-tabel tr:focus-visible{outline:2px solid var(--fokus);outline-offset:-2px}
  .page .pr-tabel :is(th,td):nth-child(n+3):not(:nth-last-child(-n+2)){text-align:right;font-variant-numeric:tabular-nums}
  .page .pr-master :is(th,td):first-child{width:auto;min-width:210px;max-width:none;left:0}
  .page .pr-master td:nth-child(2){position:static}
  .page .pr-master th:nth-child(2){position:sticky;top:0;left:auto;z-index:2}
  .page .pr-master :is(th,td):nth-child(n+2):not(:last-child){text-align:right;font-variant-numeric:tabular-nums}
  .page .pr-tabel .ux-empty-cell{position:static!important;white-space:normal;max-width:none;width:auto}
  .page .pr-halaman button{min-width:32px;height:32px}
  .modal:has(>.modal-body){display:flex;flex-direction:column;overflow:hidden;max-height:calc(100dvh - 36px)}
  .modal>.modal-head,.modal>.modal-foot{flex-shrink:0;background:var(--card);z-index:1}
  .modal>.modal-body{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
  .modal>.modal-foot{flex-wrap:wrap}
  .modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .pr-laci-isi,.cd-body{min-height:0;overscroll-behavior:contain;scrollbar-gutter:stable}
  .pr-laci-kepala,.pr-laci-kaki,.cd-head,.cd-tabs{flex-shrink:0}
  .pr-hadir{table-layout:fixed;width:100%}
  .pr-hadir th,.pr-hadir td{padding:9px 10px;overflow-wrap:anywhere}
  .pr-hadir th:nth-child(odd),.pr-hadir td:nth-child(odd){width:66px}
  .pr-hadir th{font-size:10px;letter-spacing:.2px}
  .pr-hadir th:nth-child(3),.pr-hadir td:nth-child(3){border-left:1px solid var(--line)}
  .pr-lokasi-baris{display:block;line-height:1.7}
  .pr-laci .pr-baris b{font-variant-numeric:tabular-nums;text-align:right}
  .modal .f input,.modal .f textarea,.modal .f select{font-size:13px}
  .f .err-msg:not(:empty){display:block;color:var(--bad);font-size:12px;line-height:1.5;margin-top:5px}
  .toast .toast-tutup{border:0;background:transparent;color:inherit;cursor:pointer;flex:none;min-width:32px;min-height:32px;font-size:18px}
  .ux-keadaan{padding:36px 20px;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:14px;margin:16px 0}
  .ux-keadaan h2{font-size:16px;margin:10px 0 6px}
  .ux-keadaan p{font-size:13px;color:var(--ink-3);line-height:1.6;max-width:62ch;margin:0 auto 16px;overflow-wrap:anywhere}
  .ux-keadaan-ikon{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--bad-bg);color:var(--bad);font-weight:700}
  .ux-putar{display:inline-block;width:24px;height:24px;border:2px solid var(--line);border-top-color:var(--blue);border-radius:50%;animation:btnPutar .8s linear infinite}
  @media(max-width:1100px){.page .pr-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}}
  /* HP: tombol kepala (Ekspor, Gabungkan, Bantuan) berbagi SATU baris, dan
     bilah bulan/tanggal yang selebar layar turun ke bawahnya. Diukur 20 Okt
     2026 pada 390 px: jarak 16 px + .spacer kosong (yang ikut memakan dua
     jarak) membuat Bantuan turun sendirian ke baris ketiga di Lokasi Kerja
     dan Posisi Karyawan. Di sini — bukan app.css — karena aturan jarak di
     atas lebih khusus dan akan menang diam-diam. */
  @media(max-width:560px){
    .page .page-head{column-gap:8px}
    .page .page-head > .spacer{display:none}
    .page .page-head > .abs-bulan{order:9}
    /* Payroll: bulan + Aturan perhitungan selebar 323 px; tanpa boleh
       menyusut, Bantuan terlempar ke baris sendiri. Bloknya yang melipat. */
    .page .page-head > .pr-kepala-aksi{flex:1 1 0; min-width:0}
  }
}