/* UX1 2 Nov 2026: rangka Portal bersih. Dimuat paling akhir; hanya menimpa kerangka (topbar, tab kerja, sidebar, kepala halaman,
   dashboard, tabel). Warna hanya netral; status = titik 7px + teks (ok hijau, warn kuning, danger merah, hitam berjalan, abu lain). */

/* 1. Titik status bersama */
.ui-dot{display:inline-block;flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:var(--ui-muted)}
.ui-dot-ok{background:var(--ui-ok)}.ui-dot-warn{background:var(--ui-warn)}.ui-dot-danger{background:var(--ui-danger)}.ui-dot-run{background:var(--ui-primary)}

/* Lencana berlatar warna di daftar diganti titik + teks */
.ui-shell .badge,.ui-shell .badge.owner,.ui-shell .badge.off{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:transparent;color:var(--ui-text);font-size:12px}
.ui-shell .badge::before{content:'';flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:var(--ui-ok)}
.ui-shell .badge.owner::before{background:var(--ui-primary)}.ui-shell .badge.off::before{background:var(--ui-danger)}

/* 2. Satu judul per halaman: tanpa eyebrow, tab rekaman tunggal tersembunyi */
.ui-shell .ui-page-heading .eyebrow,.ui-shell .home-welcome,.ui-shell .home-topbar,.ui-topbar-account{display:none}
.ui-shell .ui-page-heading{margin-bottom:14px}
.ui-shell .ui-page-heading h1,.ui-shell main h1{font-size:22px;line-height:1.3;font-weight:650;letter-spacing:-.01em}
/* Satu-satunya tab (daftar) tidak digambar tetapi tetap ada untuk pembaca layar dan fokus keyboard. */
.ui-tabs.ui-tabs-single{position:relative;display:block;flex:0 0 1px;width:1px;height:1px;min-height:0;padding:0;margin:0;overflow:hidden}
.ui-tabs.ui-tabs-single .ui-tab{position:absolute;width:1px;height:1px;min-height:0;padding:0;border:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* 3. Topbar 48px memuat tab kerja; breadcrumb hilang selama tab ada */
.portal-workspace-frame{--ui-sticky-top:0px}
body.ui-shell{padding-top:var(--ui-bar-h)}
body.ui-workspace{padding-top:var(--ui-bar-h)}
.ui-topbar{height:var(--ui-bar-h);padding:0 16px 0 0;gap:8px;justify-content:flex-start}
.ui-topbar-tabs .ui-topbar-left{flex:0 0 auto;gap:0}
.ui-topbar-tabs .ui-breadcrumb{display:none}
.ui-topbar-tabs .ui-topbar-actions{margin-left:auto;flex:0 0 auto;gap:12px}
.ui-topbar:not(.ui-topbar-tabs) .ui-topbar-left{padding-left:20px}
.ui-topbar .ui-workspace-tabs{position:static;inset:auto;flex:1 1 auto;min-width:0;height:var(--ui-bar-h);align-items:center;gap:2px;padding:0 8px;border:0;background:transparent;overflow-x:auto;overflow-y:hidden}
.ui-topbar .ui-workspace-tab{height:32px;border:0;border-radius:6px;background:transparent;color:var(--ui-muted-text);max-width:280px}
.ui-topbar .ui-workspace-tab:hover{background:var(--ui-hover);color:var(--ui-text)}
.ui-topbar .ui-workspace-tab.active,.ui-topbar .ui-workspace-tab.active:hover{background:var(--ui-hover);color:var(--ui-text);font-weight:600}
.ui-topbar .ui-workspace-select{min-height:32px;padding:0 10px;font-size:13px}
.ui-topbar .ui-workspace-close{width:24px;min-width:24px;height:24px;min-height:24px;margin:0 5px 0 0}
.ui-topbar .ui-workspace-add{min-height:32px;width:32px}
/* MT1 13 Nov: muat ulang tab aktif, di kiri tombol tutup; ukuran dan warna sama dengan .ui-workspace-close (style-lanjutan). */
.ui-shell .ui-workspace-reload{display:grid;place-items:center;width:24px;min-width:24px;height:24px;min-height:24px;padding:0;margin:0 5px 0 0;border:0;border-radius:6px;line-height:1;background:transparent;color:inherit;box-shadow:none}
.ui-workspace-reload .portal-icon{display:block;width:12px;height:12px;stroke-width:1.7}
.ui-shell .ui-workspace-reload:hover:not(:disabled),.ui-shell .ui-workspace-reload:focus-visible{background:var(--ui-line)}
.ui-shell .ui-workspace-reload:focus-visible{outline:1px solid var(--ui-muted);outline-offset:-1px}
.ui-shell .ui-workspace-reload:disabled{cursor:progress}
.ui-shell .ui-topbar .ui-topbar-reload{display:none}
.ui-topbar-date{font-size:12px;color:var(--ui-muted-text)}
.ui-workspace-frame{top:var(--ui-bar-h);height:calc(100dvh - var(--ui-bar-h))}
/* PD-KHT: tab rekaman desktop ikut tab kerja topbar (kontrak M2: geometri dan warna sama); HP tetap × 40px. */
@media(min-width:761px){
 .ui-tabs .ui-tab{height:32px;margin:0 0 4px;border:0;border-radius:6px;background:transparent;color:var(--ui-muted-text)}
 .ui-tabs .ui-tab:hover{background:var(--ui-hover);color:var(--ui-text)}
 .ui-tabs .ui-tab.ui-active,.ui-tabs .ui-tab.ui-active:hover{background:var(--ui-hover);color:var(--ui-text)}
 .ui-tabs .ui-tab-open{height:32px;min-height:32px;color:inherit}
 .ui-tabs .ui-tab.ui-active .ui-tab-open{font-weight:600}
}

/* 4. Sidebar: menu per urusan, judul kelompok tanpa panah, aktif = abu muda + garis hitam 3px */
.ui-shell #ui-sidebar{top:0;bottom:0;height:100dvh;min-height:100dvh}
.ui-shell #ui-sidebar .ui-nav-group{border-top:0;margin-top:14px;padding-top:0}
.ui-shell #ui-sidebar .ui-nav-group-toggle{min-height:26px;padding:4px 12px;font-size:11px;font-weight:500;letter-spacing:0;color:var(--ui-muted-text);pointer-events:none;cursor:default}
.ui-shell #ui-sidebar .ui-nav-group-toggle .portal-icon{display:none}
.ui-shell #ui-sidebar .ui-nav-group-closed>.ui-nav-group-items{display:grid}
.ui-shell #ui-sidebar .home-nav{min-height:38px;padding:8px 12px;border-radius:0 6px 6px 0;font-size:13px;font-weight:500}
.ui-shell #ui-sidebar .home-nav.active,.ui-shell #ui-sidebar button.home-nav.active{background:var(--ui-hover);color:var(--ui-text);font-weight:600;box-shadow:inset 3px 0 0 var(--ui-primary)}
.ui-shell #ui-sidebar .home-nav .ui-nav-count{margin-left:auto;padding:0 6px;border-radius:9px;background:var(--ui-hover);color:var(--ui-text);font-size:11px;font-weight:600;line-height:18px}
.ui-shell #ui-sidebar,.ui-sidebar-collapsed .ui-shell #ui-sidebar{padding-bottom:0}
/* Kaki akun menempel di dasar sidebar tanpa celah padding, supaya menu yang digulir tidak tembus di bawahnya. */
.ui-shell #ui-sidebar .ui-nav-account{position:sticky;bottom:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding:8px 4px 16px 12px;border-top:1px solid var(--ui-line);background:var(--ui-panel);font-size:12px;color:var(--ui-muted-text)}
.ui-shell #ui-sidebar .ui-nav-account a{color:var(--ui-text);font-weight:600;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Petunjuk pintas di kotak Cari menu */
.ui-kbd{margin-right:8px;padding:1px 6px;border:1px solid var(--ui-line);border-radius:5px;background:var(--ui-panel);color:var(--ui-muted-text);font:500 11px var(--ui-font);white-space:nowrap}
.ui-sidebar-collapsed .ui-kbd{display:none}
@media(max-width:760px){.ui-kbd{display:none}}
@media(min-width:761px){
 .ui-shell #ui-sidebar,body.ui-shell,.ui-topbar,.ui-workspace-frame{transition:width .14s ease,left .14s ease,padding-left .14s ease}
 /* Sidebar ciut ala Claude: rail ikon 56px, tanpa teks, tooltip nama menu (data-tooltip), menu aktif tetap bertanda. */
 :root.ui-sidebar-collapsed{--ui-sidebar-width:56px}
 .ui-sidebar-collapsed .ui-shell #ui-sidebar{padding:16px 8px 0;overflow-x:hidden}
 .ui-sidebar-collapsed .ui-shell #ui-sidebar .home-nav{justify-content:center;padding:0;min-height:40px;border-radius:6px}
 .ui-sidebar-collapsed .ui-shell #ui-sidebar .home-nav .ui-nav-count,.ui-sidebar-collapsed .ui-shell #ui-sidebar .ui-nav-account a{display:none}
 .ui-sidebar-collapsed .ui-shell #ui-sidebar .ui-nav-account{justify-content:center;padding:8px 0 12px}
 .ui-sidebar-collapsed .ui-shell #ui-sidebar .home-nav.active{box-shadow:none}
 .ui-sidebar-collapsed .ui-shell #ui-sidebar .ui-nav-group{margin-top:8px;padding-top:8px;border-top:1px solid var(--ui-line)}
}
@media(prefers-reduced-motion:reduce){.ui-shell #ui-sidebar,body.ui-shell,.ui-topbar,.ui-workspace-frame{transition:none}}

/* 5. Dashboard: angka utama dalam satu bingkai bersekat, kartu Perlu tindakan, grafik satu nada */
.dw-stats{display:flex;flex-wrap:wrap;margin:0 0 14px;border:1px solid var(--ui-line);border-radius:var(--ui-radius);background:var(--ui-panel);overflow:hidden}
.dw-stats>.dashboard-widget,.dw-stats>.dw-stat-vehicles{flex:1 1 160px;min-width:0;margin:0;padding:14px 18px;border:0;border-radius:0;box-shadow:none;background:transparent;grid-column:auto}
.dw-stats>*+*{border-left:1px solid var(--ui-line)}
.dw-stats .dw-heading h3{font-size:12px;font-weight:500;color:var(--ui-muted-text)}
.dw-stats .dw-metric{gap:2px}.dw-stats .dw-metric>strong{font-size:26px;color:var(--ui-primary)}
.dw-todo{margin:0 0 14px;padding:14px 18px;border:1px solid var(--ui-line);border-radius:var(--ui-radius);background:var(--ui-panel)}
.dw-todo h3{margin:0 0 6px;font-size:14px}
.dw-todo ul{list-style:none;margin:0;padding:0}
.dw-todo li+li{border-top:1px solid var(--ui-table-line)}
.dw-todo-row{display:flex;align-items:center;gap:10px;min-height:38px;color:var(--ui-text);text-decoration:none;font-size:13px}
.dw-todo-row:hover{background:var(--ui-table-hover)}
.dw-todo-row strong{min-width:2ch;font-weight:650}
.dw-todo-go{margin-left:auto;color:var(--ui-muted-text)}
.dw-todo-none{padding:8px 0;font-size:13px;color:var(--ui-muted-text)}
.dashboard-bar strong{color:var(--ui-text)}
.dashboard-bar progress{background:var(--ui-hover)}
.dashboard-bar progress::-webkit-progress-bar{background:var(--ui-hover)}
.dashboard-bar progress::-webkit-progress-value{background:var(--ui-muted-text)}
.dashboard-bar progress::-moz-progress-bar{background:var(--ui-muted-text)}
.dw-metric>strong{color:var(--ui-primary)}
/* Kendaraan: batang mendatar (menggantikan donat) */
.dw-vp{display:grid;gap:10px}
.dw-vp-center{display:flex;align-items:baseline;gap:8px}
.dw-vp-center strong{font-size:26px;font-weight:650;color:var(--ui-text)}.dw-vp-center small{font-size:12px;color:var(--ui-muted-text)}
.dw-vp-legend{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.ui-shell .dw-vp-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'name num' 'bar bar';gap:4px 12px;width:100%;padding:6px 4px;border:0;border-radius:6px;background:transparent;color:var(--ui-text);font-size:12px;font-weight:500;text-align:left}
.ui-shell .dw-vp-row:hover{background:var(--ui-hover)}
.dw-vp-name{grid-area:name;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dw-vp-num{grid-area:num;font-weight:650}
.dw-vp-bar{grid-area:bar;display:block;height:7px;border-radius:4px;background:var(--ui-hover);overflow:hidden}
.dw-vp-bar>i{display:block;height:100%;border-radius:4px;background:var(--ui-muted-text)}
.dw-vp-row.dw-vp-tone-office .dw-vp-bar>i,.dw-vp-row.dw-vp-tone-none .dw-vp-bar>i,.dw-vp-row.dw-vp-tone-7 .dw-vp-bar>i{background:var(--ui-input-line)}

/* 6. Tabel lebih rapat: kepala huruf biasa abu 11.5px, baris ±40px, ikon chevron tanpa bingkai.
   MM5 7 Nov: teks dan ikon urut judul kolom >= 4,5:1 di latar judul (#5F5F5F di #F1F1F1 = 5,7:1); ikon tidak dipudarkan. */
.ui-shell .table-wrap th,.ui-shell .table-wrap th .table-sort{text-transform:none;letter-spacing:0;font-size:11.5px;font-weight:500;color:var(--ui-table-head-text)}
.ui-shell .table-wrap th .table-sort .portal-icon{opacity:1}
.ui-shell .table-wrap th{padding-block:8px}
.ui-shell .table-wrap td{padding-block:6px;line-height:1.35}
.ui-shell .table-wrap .employee-avatar{width:28px;height:28px;min-width:28px;font-size:10px}
.ui-shell .table-wrap .employee-identity{gap:10px}
/* PD-BUT D24: menu/lembar tindakan baris (.ui-row-menu) ikut di sel .actions; tombolnya tetap 36/46 px, bukan 28 px. */
.ui-shell .table-wrap tbody td>button,.ui-shell .table-wrap tbody td .actions button:not(.ui-row-menu button){min-height:28px;padding:2px 9px}
.ui-shell .table-wrap td>button.ui-row-toggle{min-height:24px;width:24px;padding:0;border:0;background:transparent;color:var(--ui-muted-text);box-shadow:none}
.ui-shell .table-wrap td>button.ui-row-toggle:hover{background:var(--ui-hover);color:var(--ui-text)}
.ui-row-toggle .portal-icon{width:14px;height:14px;transition:transform .12s ease}
.ui-row-toggle[aria-expanded=false] .portal-icon{transform:rotate(-90deg)}
.ui-quick-filters>button{min-height:32px;font-size:12.5px}
.ui-shell .ui-quick-filters>button .ui-chip-n{margin-left:6px;color:var(--ui-muted-text);font-weight:500}
.ui-shell .ui-quick-filters>button[aria-pressed=true] .ui-chip-n{color:var(--ui-line)}

/* 7. HP (≤760px): topbar = menu + cari, tab kerja disembunyikan, navigasi bawah tidak menutup baris terakhir */
@media(max-width:760px){
 :root{--ui-bar-h:52px;--ui-sticky-top:0px}
 body.ui-shell,body.ui-workspace{padding-top:var(--ui-bar-h);padding-bottom:calc(72px + env(safe-area-inset-bottom));overflow-x:hidden;overflow-x:clip}
 .ui-topbar{padding:0 12px;height:var(--ui-bar-h)}
 .ui-topbar .ui-workspace-tabs{display:none}
 /* MT2: ↻ tab aktif pindah ke topbar HP, target sentuh 40px seperti tombol menu. */
 .ui-shell .ui-topbar .ui-topbar-reload{display:grid;width:40px;min-width:40px;height:40px;min-height:40px;margin:0}
 .ui-topbar .ui-topbar-reload .portal-icon{width:18px;height:18px}
 .ui-topbar-tabs .ui-breadcrumb{display:flex}
 .ui-topbar:not(.ui-topbar-tabs) .ui-topbar-left{padding-left:0}
 .ui-topbar-tabs .ui-topbar-left{flex:1 1 auto;min-width:0}
 .ui-topbar-date{display:none}
 .ui-workspace-frame{top:var(--ui-bar-h);bottom:calc(64px + env(safe-area-inset-bottom));height:calc(100dvh - var(--ui-bar-h) - 64px - env(safe-area-inset-bottom))}
 /* PD-SHC D50: hidden membuat wadah gulir dan mematikan position:sticky; clip memotong tanpa wadah gulir. */
 .ui-shell main{overflow-x:hidden;overflow-x:clip}
 .ui-shell .table-wrap{max-width:100%}
 .ui-shell .ui-list-tools,.ui-shell .ui-search-actions{flex-wrap:wrap;max-width:100%}
 .ui-shell .ui-search-actions input{flex:1 1 100%;min-width:0;width:100%}
 .dw-stats>*{flex:1 1 45%}
 .dw-stats>*+*{border-left:0}
 .ui-mobile-nav{background:var(--ui-panel);border-top:1px solid var(--ui-line)}
 .ui-mobile-nav .ui-mobile-nav-item{color:var(--ui-muted-text)}
 .ui-mobile-nav .ui-mobile-nav-item.active{color:var(--ui-text);font-weight:650}
}
/* MM5 7 Nov: pilihan Urut kartu HP dan daftar Saring kolom di dialog Filter hanya tampil saat tabel jadi kartu. */
.ui-kartu-urut,.ui-saring-kolom{display:none}
/* MPF 7 Nov (Abdi, HP lipat 712px): kartu hanya di HP <=640px, sama dengan batas kartu style.css; 641-760px tetap tabel
   (kepala dan sel sejajar, gulir samping di .table-wrap) dengan kolom identitas pertama beku berlatar tidak transparan. */
@media(max-width:640px){
 /* Daftar tabel jadi kartu: kode kecil abu, nama tebal, sisanya keterangan abu. PD-KHT: hanya tabel yang memilihnya
    (table.ui-kartu-hp, kolom 1 kode/nomor, kolom 2 nama); tabel kolom beku/bergulir tetap tabel. Baris/sel [hidden]/.hidden
    tetap tersembunyi, sel yang disembunyikan modul (display:none) menang karena display sel tanpa !important. MM5: kepala
    kolom diganti satu pilihan Urut (.ui-kartu-urut, sasaran 44px); saringan kolom lewat tombol Filter (.ui-saring-kolom).
    Daftar kartu ikut gulir halaman (tanpa gulir bersarang); ruang menu bawah dari padding-bottom body (blok 7). */
 .ui-page-wide .table-wrap :is(table.ui-kartu-hp,.ui-kartu-hp tbody){display:block!important;width:auto!important;min-width:0!important}
 .ui-page-wide .table-wrap .ui-kartu-hp thead{display:none!important}
 .ui-shell .ui-page-wide .table-wrap:has(>table.ui-kartu-hp){max-height:none;overflow:visible}
 .ui-page-wide .ui-kartu-urut{display:flex;align-items:center;gap:8px;margin:12px 0 0;font-size:13px;color:var(--ui-muted-text)}
 .ui-shell .ui-page-wide .ui-kartu-urut select{flex:1 1 auto;min-width:0;min-height:44px;margin:0}
 .ui-saring-kolom{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
 .ui-saring-kolom h3{flex:1 1 100%;margin:0;font-size:13px}
 .ui-shell .ui-saring-kolom button{min-height:44px}
 .ui-page-wide .table-wrap .ui-kartu-hp tbody tr:not([hidden],.hidden){display:flex!important;flex-wrap:wrap;align-items:center;gap:2px 10px;padding:10px 14px!important;border-bottom:1px solid var(--ui-table-line)!important}
 .ui-page-wide .table-wrap .ui-kartu-hp tbody td:not([hidden],.hidden){display:block;flex:0 0 auto;width:auto!important;padding:0!important;border:0!important;white-space:normal;font-size:12.5px;color:var(--ui-muted-text)}
 .ui-page-wide .table-wrap .ui-kartu-hp tbody td:first-child{flex-basis:100%;font-size:11px;color:var(--ui-muted-text)}
 .ui-page-wide .table-wrap .ui-kartu-hp tbody td:nth-child(2){flex-basis:100%;font-size:14px;font-weight:600;color:var(--ui-text)}
}
@media(min-width:641px) and (max-width:760px){
 .ui-shell .table-wrap .ui-identity-table tbody td:first-child{position:sticky;left:0;z-index:1;background:var(--ui-panel)}
 .ui-shell .table-wrap .ui-identity-table thead th:first-child{position:sticky;left:0;top:0;z-index:3}
}
/* Judul sub menu bertingkat (mis. Presensi Absensi): sorot abu seperti menu lain, bukan hitam tombol bawaan.
   Tanpa awalan #ui-sidebar karena saat sidebar ciut daftar sub menu dipindah ke body sebagai flyout. */
.ui-submenu-nest-toggle{border-radius:6px}
.ui-submenu-nest-toggle:hover:not(:disabled){background:var(--ui-hover);color:var(--ui-text)}
/* UX1 akhir. */
/* PM6 P3-4/P3-5: metadata sumber dan hidden pada komponen dengan display khusus. */
.ui-check-source{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;margin:10px 0;font-size:11px;white-space:normal}
.ui-check-source dt{color:var(--ui-muted-text)}.ui-check-source dd{min-width:0;margin:0;overflow-wrap:anywhere}
.ui-check-source[hidden],.ui-shell :is(.ui-count-line,.ui-list-controls,.ui-search-actions,.ui-tabs,.ui-rincian-facts,.ui-ubah-bar)[hidden],
.ui-page-wide .table-wrap :is(table.ui-kartu-hp,.ui-kartu-hp tbody,.ui-kartu-hp tr,.ui-kartu-hp td)[hidden]{display:none!important}
/* TB1 7 Nov: tombol › buka rincian (uiOpenRow, app.js) di sel terakhir sempit; sasaran 32px desktop, 44px HP/layar sentuh.
   Pemilih ber-table>tbody agar menang dari aturan tombol sel tabel lebar (style-lanjutan, td>button 28px).
   Kartu HP (table.ui-kartu-hp <=640px): tombol di ujung kanan kartu, tengah tegak, tidak memakan baris sendiri. */
.ui-shell table>tbody>tr.ui-open-row>td.ui-open-cell{width:1%;padding:2px 6px;text-align:right;vertical-align:middle;white-space:nowrap}
.ui-shell table>tbody>tr.ui-open-row>td.ui-open-cell>button.ui-open-button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;min-width:32px;min-height:32px;padding:0;margin:0;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--ui-muted-text);vertical-align:middle}
.ui-shell table>tbody>tr.ui-open-row>td.ui-open-cell>button.ui-open-button:hover{background:var(--ui-hover);border-color:var(--ui-line);color:var(--ui-text)}
.ui-open-button .portal-icon{width:18px;height:18px}
.ui-shell table>thead>tr>th.ui-open-head{width:1%;min-width:0;padding-inline:0}
@media(max-width:760px),(pointer:coarse){
 .ui-shell table>tbody>tr.ui-open-row>td.ui-open-cell>button.ui-open-button{width:44px;height:44px;min-width:44px;min-height:44px}
}
@media(max-width:640px){
 .ui-page-wide .table-wrap .ui-kartu-hp tbody tr.ui-open-row:not([hidden],.hidden){position:relative;padding-right:62px!important}
 .ui-page-wide .table-wrap .ui-kartu-hp tbody td.ui-open-cell:not([hidden],.hidden){position:absolute;right:8px;top:50%;transform:translateY(-50%);padding:0!important}
}
/* UC5 8 Nov: baris hitungan + pilihan Urut kartu (uiCountLine, ui-daftar.js) bersama Master Proyek dan Karyawan. Laptop satu baris;
   HP: angka di atas, cakupan di bawahnya, Urut di kanan selebar pilihan terpilih (field-sizing) agar teksnya tidak terpotong
   (sisa UC4: "Terbaru d"); bila hitungan tidak lagi muat 120px, Urut turun ke baris sendiri di kanan. Daftar kartu lain (Merek, Pemberi Tugas) tanpa baris hitungan ini, jadi tidak berubah. */
.ui-count-line{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;margin:10px 0 8px}
.ui-count-line>p{margin:0}
.ui-count-line .ui-list-count-scope::before{content:" · "}
@media(max-width:640px){
 .ui-count-line{flex-wrap:wrap;margin:2px 0}
 .ui-count-line>p{flex:1 1 120px;min-width:0;line-height:1.3}
 .ui-count-line .ui-list-count-n{display:block;font-size:14px;font-weight:600;color:var(--ui-text)}
 .ui-count-line .ui-list-count-scope{display:block;font-size:12px}
 .ui-count-line .ui-list-count-scope::before{content:none}
 .ui-shell .ui-page-wide .ui-count-line .ui-kartu-urut{flex:0 0 auto;max-width:100%;margin:0 0 0 auto}
 .ui-shell .ui-page-wide .ui-count-line .ui-kartu-urut select{flex:0 1 auto;field-sizing:content}
}

/* UC8 9 Nov: rincian + Ubah baku UC2 bersama (Merek, Pemberi Tugas, Grup WA; uiUbahForm di ui-daftar.js), sama dengan blok UC2
   master-projects.css. Baca: judul + status (titik + teks, di luar h2) + "✎ Ubah" kanan; isian dl, kosong "Belum diisi" abu;
   Tindakan lain paling bawah. Ubah: isian berubah kuning + "• diubah" (CSS), Batal + Simpan menempel di bawah (HP di atas menu bawah). */
.ui-rincian-head{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:16px}
.ui-rincian-title{flex:1;min-width:0;overflow-wrap:anywhere}.ui-rincian-title h2{display:inline;margin:0}
.ui-rincian-head>button{flex:none;margin-left:auto}
.ui-rincian-status{display:inline-flex;align-items:center;gap:6px;margin-left:10px;font-size:14px;vertical-align:middle;white-space:nowrap}
.ui-rincian-facts{display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px 16px;max-width:760px;margin:0;min-width:0}
.ui-rincian-facts dt{color:var(--ui-muted-text)}.ui-rincian-facts dd{margin:0;min-width:0;overflow-wrap:anywhere}
.ui-rincian-section{margin-top:24px}.ui-rincian-section>h3{margin:0 0 10px;font-size:15px}
.ui-missing{color:var(--ui-muted-text)}
.ui-other-actions{margin-top:32px;padding-top:16px;border-top:1px solid var(--ui-line)}
.ui-other-actions h3{margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ui-muted-text)}
.ui-other-buttons{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.ui-other-actions .small{margin:10px 0 0}
.ui-ubah-form{max-width:720px}.ui-ubah-form fieldset{display:grid;gap:8px;min-width:0;margin:0;padding:0;border:0}
.ui-ubah-form fieldset fieldset{margin-top:16px}.ui-ubah-sub{margin:4px 0 0}
#app .ui-ubah-form label.ui-diubah.ui-diubah,#app .ui-ubah-form :is(input,select,textarea,.ui-ubah-box).ui-diubah.ui-diubah{border-color:var(--ui-warn-line);background:var(--ui-warn-bg)}
#app .ui-ubah-form label.ui-diubah.ui-diubah::before{content:"• diubah";float:right;margin-left:8px;color:var(--ui-warn);font-weight:600}
.ui-ubah-bar{position:sticky;bottom:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-top:20px;padding:12px 16px;border:1px solid var(--ui-line);border-radius:var(--ui-radius);background:var(--ui-panel)}
.ui-ubah-count{margin:0}.ui-ubah-actions{display:flex;gap:8px}
.ui-ubah-form .ui-form-error:empty{display:none}
@media(max-width:760px){
 .ui-rincian-facts{grid-template-columns:100px minmax(0,1fr);gap:8px 12px}
 .ui-ubah-bar{bottom:68px;padding:12px}
 .ui-ubah-actions{flex:1 1 100%}.ui-ubah-actions>button{flex:1 1 0;min-height:44px}
}

/* AR1 12 Nov 2026 (Abdi): widget tautan luar (petak angka) dan lencana "!" di menu; selain dua itu hanya token rangka. */
.dw-body.dw-luar{display:grid;gap:14px;align-content:start}
.dw-luar-kartu{container-type:inline-size;min-width:0}
.dw-luar-kartu h4{margin:0;font-size:14px}
.dw-luar-buka{display:inline-flex;align-items:center;gap:6px;max-width:100%;font-weight:600;overflow-wrap:anywhere}
.dw-luar-buka .portal-icon{flex:0 0 16px;width:16px;height:16px}
.dw-luar-petak{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
@container (max-width:249px){.dw-luar-petak{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dw-luar-angka{display:flex;flex-direction:column;gap:2px;min-width:0;padding:8px 10px;border:1px solid var(--ui-line);border-radius:var(--ui-radius)}
.dw-luar-angka strong{font-size:18px;font-weight:700;line-height:1.25;overflow-wrap:anywhere}
.dw-luar-angka small{font-size:12px;line-height:1.35;color:var(--ui-muted-text);overflow-wrap:anywhere}
.dw-luar-catatan{margin:8px 0 0}
.ui-nav-perlu{display:inline-flex;align-items:center;justify-content:center;flex:0 0 18px;width:18px;height:18px;margin-left:auto;border-radius:50%;background:#C2410C;color:#FFFFFF;font-size:12px;font-weight:700;line-height:1}
.ui-sidebar-collapsed .ui-shell #ui-sidebar .home-nav .ui-nav-perlu{display:none}