/*
 * zkoss_popup_menu_fix.css
 * Patch global untuk popup submenu ZKoss 5.5.
 *
 * Beberapa theme lama mengatur menu/sidebar dengan selector global seperti
 * .z-menubar-ver div dan .z-menu-item-cnt. Saat ZK membuat submenu popup,
 * rule tersebut ikut membuat popup melebar sampai hampir seluruh layar.
 * File ini harus dimuat paling akhir melalui MyThemeProvider.
 */

.z-menu-popup,
.z-menupopup {
	width: auto !important;
	min-width: 220px !important;
	max-width: 380px !important;
	max-height: calc(100vh - 36px) !important;
	max-height: min(calc(100vh - 36px), 88vh) !important;
	left: auto;
	right: auto;
	box-sizing: border-box !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	touch-action: pan-y;
	scrollbar-width: thin !important;
	scrollbar-color: rgba(148, 163, 184, 0.6) transparent !important;
	z-index: 2147483647 !important;
}

.z-menu-popup .z-menu-popup-cnt,
.z-menupopup .z-menupopup-cnt,
.z-menu-popup-cnt {
	width: auto !important;
	min-width: 220px !important;
	max-width: 380px !important;
	max-height: calc(100vh - 44px) !important;
	max-height: min(calc(100vh - 44px), 86vh) !important;
	box-sizing: border-box !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	touch-action: pan-y;
	scrollbar-width: thin !important;
	scrollbar-color: rgba(148, 163, 184, 0.6) transparent !important;
}

/* Scrollbar kustom yang elegan untuk popup menu ZKoss agar nyaman digulir saat menu melebihi layar */
.z-menu-popup::-webkit-scrollbar,
.z-menupopup::-webkit-scrollbar,
.z-menu-popup-cnt::-webkit-scrollbar,
.z-menupopup-cnt::-webkit-scrollbar {
	width: 6px !important;
	height: 6px !important;
}

.z-menu-popup::-webkit-scrollbar-track,
.z-menupopup::-webkit-scrollbar-track,
.z-menu-popup-cnt::-webkit-scrollbar-track,
.z-menupopup-cnt::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.08) !important;
	border-radius: 4px !important;
}

.z-menu-popup::-webkit-scrollbar-thumb,
.z-menupopup::-webkit-scrollbar-thumb,
.z-menu-popup-cnt::-webkit-scrollbar-thumb,
.z-menupopup-cnt::-webkit-scrollbar-thumb {
	background: rgba(148, 163, 184, 0.65) !important;
	border-radius: 4px !important;
}

.z-menu-popup::-webkit-scrollbar-thumb:hover,
.z-menupopup::-webkit-scrollbar-thumb:hover,
.z-menu-popup-cnt::-webkit-scrollbar-thumb:hover,
.z-menupopup-cnt::-webkit-scrollbar-thumb:hover {
	background: rgba(100, 116, 139, 0.85) !important;
}

.z-menu-popup-cnt .z-menu,
.z-menu-popup-cnt .z-menu-item,
.z-menu-popup-cnt .z-menu-body,
.z-menu-popup-cnt .z-menu-item-body,
.z-menu-popup-cnt .z-menu-inner-m,
.z-menu-popup-cnt .z-menu-item-inner-m,
.z-menu-popup-cnt .z-menu-cnt,
.z-menu-popup-cnt .z-menu-item-cnt,
.z-menu-popup-cnt .z-menu-btn,
.z-menu-popup-cnt .z-menu-item-btn,
.z-menu-popup-cnt span:not(.z-menu-img):not(.z-menu-item-img),
.z-menu-popup-cnt a,
.z-menu-popup-cnt div {
	width: auto !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

.z-menu-popup-cnt .z-menu .z-menu-img,
.z-menu-popup-cnt .z-menu-item .z-menu-item-img,
.z-menu-popup-cnt .z-menu-img,
.z-menu-popup-cnt .z-menu-item-img {
	display: inline-block !important;
	width: 14px !important;
	min-width: 14px !important;
	max-width: 14px !important;
	height: 14px !important;
	min-height: 14px !important;
	max-height: 14px !important;
	margin-left: -20px !important;
	margin-right: 6px !important;
	vertical-align: -2px !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;
	background-size: 13px 13px !important;
}

.z-menu-popup-cnt .z-menu a.z-menu-cnt,
.z-menu-popup-cnt .z-menu-item a.z-menu-item-cnt,
.z-menu-popup-cnt .z-menu-btn,
.z-menu-popup-cnt .z-menu-item-btn {
	display: block !important;
	min-width: 220px !important;
	max-width: 360px !important;
	min-height: 27px !important;
	height: 27px !important;
	line-height: 25px !important;
	padding: 0 12px 0 28px !important;
	margin: 1px 0 !important;
	box-sizing: border-box !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	text-align: left !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	border-radius: 5px !important;
	background: rgba(255, 255, 255, 0.10) !important;
	color: #ffffff !important;
	text-decoration: none !important;
}

.z-menu-popup-cnt .z-menu,
.z-menu-popup-cnt .z-menu-item {
	margin: 0 !important;
	padding: 0 !important;
	border-left: 0 !important;
	border-right: 0 !important;
}

/*
 * State hover/aktif diletakkan di berkas ini karena stylesheet ini dimuat
 * setelah CSS tenant. Latar gelap transparan menjaga kontras pada semua warna
 * tema dan indikator kiri memberi fokus tanpa menggeser ukuran item.
 */
.z-menu-popup-cnt .z-menu-over > .z-menu-cl > .z-menu-cr > .z-menu-cm > .z-menu-cnt,
.z-menu-popup-cnt .z-menu-item-over > .z-menu-item-cl > .z-menu-item-cr > .z-menu-item-cm > .z-menu-item-cnt,
.z-menu-popup-cnt .z-menu-over > .z-menu-body .z-menu-btn,
.z-menu-popup-cnt .z-menu-item-over > .z-menu-item-body .z-menu-item-btn,
.z-menu-popup-cnt .z-menu-body-over .z-menu-btn,
.z-menu-popup-cnt .z-menu-item-body-over .z-menu-item-btn,
.z-menu-popup-cnt .z-menu-cnt:hover,
.z-menu-popup-cnt .z-menu-item-cnt:hover,
.z-menu-popup-cnt .z-menu-btn:hover,
.z-menu-popup-cnt .z-menu-item-btn:hover,
.z-menu-popup-cnt .z-menu-over a.z-menu-cnt,
.z-menu-popup-cnt .z-menu-item-over a.z-menu-item-cnt,
.z-menu-popup-cnt li:hover a.z-menu-cnt,
.z-menu-popup-cnt li:hover a.z-menu-item-cnt,
.z-menu-popup-cnt .z-menu-over .z-menu-btn,
.z-menu-popup-cnt .z-menu-item-over .z-menu-item-btn,
.z-menu-popup-cnt .z-menu-body-seld .z-menu-btn,
.z-menu-popup-cnt .z-menu-body-clk .z-menu-btn,
.z-menu-popup .z-menu-over > .z-menu-cl > .z-menu-cr > .z-menu-cm > .z-menu-cnt,
.z-menu-popup .z-menu-item-over > .z-menu-item-cl > .z-menu-item-cr > .z-menu-item-cm > .z-menu-item-cnt,
.z-menu-popup .z-menu-cnt:hover,
.z-menu-popup .z-menu-item-cnt:hover {
	min-height: 27px !important;
	height: 27px !important;
	line-height: 25px !important;
	padding: 0 12px 0 28px !important;
	margin: 1px 0 !important;
	box-sizing: border-box !important;
	background-color: rgba(15, 23, 42, 0.48) !important;
	background-image: none !important;
	border: 1px solid rgba(255, 255, 255, 0.42) !important;
	border-radius: 5px !important;
	box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.92) !important;
	color: #ffffff !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.38) !important;
	transform: none !important;
}

.z-menu-popup-cnt .z-menu-over .z-menu-cnt,
.z-menu-popup-cnt .z-menu-item-over .z-menu-item-cnt,
.z-menu-popup-cnt .z-menu-over .z-menu-btn,
.z-menu-popup-cnt .z-menu-item-over .z-menu-item-btn,
.z-menu-popup-cnt .z-menu-over .z-label,
.z-menu-popup-cnt .z-menu-item-over .z-label {
	color: #ffffff !important;
}

@media (max-width: 480px) {
	.z-menu-popup,
	.z-menupopup,
	.z-menu-popup .z-menu-popup-cnt,
	.z-menupopup .z-menupopup-cnt,
	.z-menu-popup-cnt {
		min-width: 210px !important;
		max-width: 92vw !important;
		max-height: 68vh !important;
	}

	.z-menu-popup-cnt .z-menu a.z-menu-cnt,
	.z-menu-popup-cnt .z-menu-item a.z-menu-item-cnt,
	.z-menu-popup-cnt .z-menu-btn,
	.z-menu-popup-cnt .z-menu-item-btn {
		min-width: 210px !important;
		max-width: 92vw !important;
		touch-action: manipulation;
	}
}

/* ======================================================================
   UKURAN KOTAK WAJIB SAMA DI SEMUA KEADAAN (patch 2026-09-17)

   Gejala: teks item menu TURUN beberapa piksel saat di-hover atau saat
   item sedang terpilih/terbuka.

   Sebab: CSS bawaan ZK (zul.jar -> web/js/zul/menu/css/menu.css.dsp)
   menukar padding dengan border antar-keadaan, dan pertukaran itu netral
   SELAMA keduanya utuh:
       .z-menu-popup-cnt .z-menu       { padding:1px; }            <- normal, tanpa border
       .z-menu-popup-cnt .z-menu-over  { padding:0; border:1px; }  <- hover
   Berkas ini (blok di atas) memaksa padding:0 pada KEDUA keadaan namun
   hanya menghapus border kiri-kanan, sehingga pada keadaan hover tersisa
   border ATAS dan BAWAH masing-masing 1px: item bertambah tinggi 2px dan
   isinya ikut turun.

   Perbaikan: border dinolkan di semua keadaan. Penanda fokus tetap ada
   lewat box-shadow inset pada blok hover di atas, yang tidak memakan
   ruang sehingga tidak menggeser apa pun.
   ====================================================================== */
.z-menu-popup-cnt .z-menu,
.z-menu-popup-cnt .z-menu-item,
.z-menu-popup-cnt .z-menu-separator,
.z-menu-popup-cnt .z-menu-over,
.z-menu-popup-cnt .z-menu-item-over,
.z-menu-popup-cnt .z-menu:hover,
.z-menu-popup-cnt .z-menu-item:hover,
html body .z-menu-popup-cnt li.z-menu,
html body .z-menu-popup-cnt li.z-menu-item,
html body .z-menu-popup-cnt li.z-menu-over,
html body .z-menu-popup-cnt li.z-menu-item-over,
html body .z-menu-popup-cnt li.z-menu:hover,
html body .z-menu-popup-cnt li.z-menu-item:hover,
.z-menu-popup-cnt .z-menu-cl,
.z-menu-popup-cnt .z-menu-cr,
.z-menu-popup-cnt .z-menu-cm,
.z-menu-popup-cnt .z-menu-item-cl,
.z-menu-popup-cnt .z-menu-item-cr,
.z-menu-popup-cnt .z-menu-item-cm {
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
}

/* Metrik vertikal tombol/tautan item popup identik di keadaan normal, hover,
   over, terpilih (-seld), dan sedang dibuka (-clk). */
.z-menu-popup-cnt .z-menu a.z-menu-cnt,
.z-menu-popup-cnt .z-menu-item a.z-menu-item-cnt,
.z-menu-popup-cnt .z-menu a.z-menu-cnt:hover,
.z-menu-popup-cnt .z-menu-item a.z-menu-item-cnt:hover,
.z-menu-popup-cnt .z-menu-over a.z-menu-cnt,
.z-menu-popup-cnt .z-menu-item-over a.z-menu-item-cnt,
.z-menu-popup-cnt .z-menu-btn,
.z-menu-popup-cnt .z-menu-item-btn,
.z-menu-popup-cnt .z-menu-btn:hover,
.z-menu-popup-cnt .z-menu-item-btn:hover,
.z-menu-popup-cnt .z-menu-over .z-menu-btn,
.z-menu-popup-cnt .z-menu-item-over .z-menu-item-btn,
.z-menu-popup-cnt .z-menu-body-over .z-menu-btn,
.z-menu-popup-cnt .z-menu-body-seld .z-menu-btn,
.z-menu-popup-cnt .z-menu-body-clk .z-menu-btn {
	min-height: 27px !important;
	height: 27px !important;
	line-height: 25px !important;
	padding: 0 12px 0 28px !important;
	border-width: 1px !important;
	margin: 1px 0 !important;
	box-sizing: border-box !important;
}

/* Mega menu (main-responsive-menu-popup, struktur z-menubar-ver): tombolnya
   memakai metrik ZK bawaan (padding-top:3px, padding-bottom:2px). Keadaan
   over/seld/clk tidak boleh mengubahnya. */
html body .main-responsive-menu-popup .z-menubar-ver .z-menu-btn,
html body .main-responsive-menu-popup .z-menubar-ver .z-menu-item-btn,
html body .main-responsive-menu-popup .z-menubar-ver .z-menu-body-over .z-menu-btn,
html body .main-responsive-menu-popup .z-menubar-ver .z-menu-body-seld .z-menu-btn,
html body .main-responsive-menu-popup .z-menubar-ver .z-menu-body-clk .z-menu-btn,
html body .main-responsive-menu-popup .z-menubar-ver .z-menu-item-body-over .z-menu-item-btn {
	padding-top: 3px !important;
	padding-bottom: 2px !important;
	border-width: 0 !important;
	margin: 0 !important;
}

/* ZK menambah padding-right 3px -> 8px pada div pembungkus saat submenu
   dibuka (-clk), sehingga teks bergeser MENDATAR. Samakan juga. */
html body .main-responsive-menu-popup .z-menubar-ver .z-menu-inner-m > div,
html body .main-responsive-menu-popup .z-menubar-ver .z-menu-body-clk .z-menu-inner-m > div,
html body .main-responsive-menu-popup .z-menubar-ver .z-menu-body-clk-over .z-menu-inner-m > div {
	padding-right: 3px !important;
}

/* ======================================================================
   PATCH GLOBAL: Z-INDEX POPUP, BACKDROP, DAN MODAL DI ATAS HEADER
   File ini dimuat paling akhir oleh MyThemeProvider, sehingga aturan di bawah
   menang atas semua CSS tenant perguruan tinggi.
   ====================================================================== */
.ais-af-backdrop,
.ecampus-filter-popup-mask {
	z-index: 100001 !important;
}

.ais-af-panel,
.ais-filter-lanjut-overlay,
.ais-filter-lanjut-panel,
.ais-legacy-filter-overlay,
.ecampus-filter-popup-window {
	z-index: 100002 !important;
}

/* Di dalam overlay filter (.ais-legacy-filter-overlay & .ais-filter-lanjut-overlay):
   Backdrop berada di belakang form/kartu (z-index: 0),
   kartu/body form berada di depan (z-index: 1),
   dan tombol tutup berada di paling atas (z-index: 2). */
.ais-legacy-filter-backdrop,
.ais-filter-lanjut-backdrop {
	z-index: 0 !important;
}

.ais-legacy-filter-overlay > .ecampus-zul-filter-window-body,
.ais-legacy-filter-overlay > .z-vbox,
.ais-filter-lanjut-panel {
	z-index: 1 !important;
}

.ais-legacy-filter-close {
	z-index: 2 !important;
}

.z-modal-mask {
	z-index: 99990 !important;
}

.z-window-modal,
.z-window-highlighted,
.z-window-popup,
.z-window-overlapped {
	z-index: 99995 !important;
}

/* Panel dropdown pilihan (Combobox, Bandbox, Datebox, Timebox)
   harus selalu berada di atas overlay filter dan modal */
.z-bandbox-shadow,
.z-combobox-shadow,
.z-datebox-shadow,
.z-timebox-shadow,
.z-bandbox-pp,
.z-combobox-pp,
.z-datebox-pp,
.z-timebox-pp,
.z-bandpopup {
	z-index: 199999 !important;
}

/* Saat popup, filter lanjut, atau modal terbuka, turunkan z-index header */
body.ais-af-open .headerHbox,
body.ais-af-open .main-responsive-header,
body.ais-af-open .gridHeader,
body.ais-af-open .main-responsive-module-row,
body:has(.ais-af-panel.active) .main-responsive-header,
body:has(.ais-af-panel.active) .headerHbox,
body:has(.ais-filter-lanjut-panel.active) .main-responsive-header,
body:has(.ais-filter-lanjut-panel.active) .headerHbox,
body:has(.z-modal-mask) .main-responsive-header,
body:has(.z-modal-mask) .headerHbox,
body:has(.z-modal-mask) .gridHeader {
	z-index: 1 !important;
}

/* ======================================================================
   PATCH GLOBAL: LABEL / REVISI DI CAPTION GROUPBOX & GRID KONFIGURASI
   Theme tenant (mis. sma.css, hijau.css) memasang .z-caption a { color: white; }.
   Di grid konfigurasi dengan background putih, nama konfigurasi menjadi tidak terlihat.
   Aturan di bawah memastikan teks nama konfigurasi kontras dan berlatar badge jelas.
   ====================================================================== */
html body .ais-caption-styled,
html body .z-caption.ais-caption-styled,
html body .ais-konfig-grid .z-caption,
html body .ais-konfig-tabbox .z-caption {
	background: #f8fafc !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 8px 16px !important;
	color: #0f172a !important;
}

html body .ais-caption-styled .z-a,
html body .ais-caption-styled a.z-a,
html body .ais-konfig-grid .z-caption .z-a,
html body .ais-konfig-grid .z-caption a.z-a,
html body .ais-konfig-tabbox .z-caption .z-a,
html body .ais-konfig-tabbox .z-caption a.z-a,
html body .z-groupbox .z-caption a,
html body .z-groupbox .z-caption a:visited,
html body .z-caption .ais-revisi-link,
html body .z-caption a.ais-revisi-link,
.ais-revisi-link,
a.ais-revisi-link {
	color: #1d4ed8 !important;
	background: #eff6ff !important;
	border: 1px solid #bfdbfe !important;
	border-radius: 6px !important;
	padding: 3px 9px !important;
	font-weight: 700 !important;
	font-size: 11.5px !important;
	text-decoration: none !important;
	text-shadow: none !important;
	display: inline-block !important;
	line-height: 1.4 !important;
	white-space: normal !important;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .05) !important;
}

html body .ais-caption-styled .z-a:hover,
html body .ais-caption-styled a.z-a:hover,
html body .ais-konfig-grid .z-caption .z-a:hover,
html body .ais-konfig-grid .z-caption a.z-a:hover,
html body .ais-konfig-tabbox .z-caption .z-a:hover,
html body .ais-konfig-tabbox .z-caption a.z-a:hover,
html body .z-groupbox .z-caption a:hover,
html body .z-caption .ais-revisi-link:hover,
html body .z-caption a.ais-revisi-link:hover,
.ais-revisi-link:hover,
a.ais-revisi-link:hover {
	color: #1e40af !important;
	background: #dbeafe !important;
	border-color: #93c5fd !important;
}

html body .ais-caption-styled .z-label,
html body .ais-konfig-grid .z-caption .z-label,
html body .ais-konfig-tabbox .z-caption .z-label,
html body .z-groupbox .z-caption .z-label,
html body .z-caption .ais-revisi-label,
.ais-revisi-label,
html body .ais-caption-styled .z-caption-cnt,
html body .ais-konfig-grid .z-caption-cnt,
html body .ais-konfig-tabbox .z-caption-cnt {
	color: #0f172a !important;
	font-weight: 700 !important;
}

/* ======================================================================
   PATCH GLOBAL: LEBAR POPUP COMBOBOX ZKOSS PROPORSIONAL
   Agar popup tidak terlalu lebar (membentang satu layar) dan tidak terlalu
   sempit ketika field combobox kecil (mis. di toolbar panel SOP):
   - Saat ZK 5 membuka popup (style width: auto), lebar dibatasi maksimal 340px
   - Lebar minimum popup dijaga 260px (atau selebar field bila field > 260px)
     dan maksimal 340px sehingga teks item dibaca nyaman & proporsional.
   ====================================================================== */
html body .z-combobox-pp[style*="width: auto"],
html body .z-combobox-pp[style*="width:auto"],
html body .z-combobox-rounded-pp[style*="width: auto"],
html body .z-combobox-rounded-pp[style*="width:auto"] {
	max-width: 340px !important;
}

html body .z-combobox-pp,
html body .z-combobox-rounded-pp {
	min-width: min(260px, calc(100vw - 24px)) !important;
	max-width: min(340px, calc(100vw - 24px)) !important;
	height: auto !important;
	max-height: 320px !important;
	max-height: min(320px, 50vh) !important;
	box-sizing: border-box !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
}

html body .z-combobox-pp > .z-combobox-cave,
html body .z-combobox-rounded-pp > .z-combobox-rounded-cave {
	width: 100% !important;
	max-width: 100% !important;
	table-layout: fixed !important;
}

html body .z-combobox-pp .z-comboitem-img,
html body .z-combobox-rounded-pp .z-comboitem-img {
	width: 18px !important;
}

html body .z-combobox-pp .z-comboitem-text,
html body .z-combobox-pp .z-comboitem-inner,
html body .z-combobox-rounded-pp .z-comboitem-text,
html body .z-combobox-rounded-pp .z-comboitem-inner {
	white-space: normal !important;
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
	line-height: 1.35 !important;
	padding-top: 3px !important;
	padding-bottom: 3px !important;
}

/* ======================================================================
   PATCH GLOBAL: LEBAR DATEBOX & POPUP KALENDER ZKOSS PROPORSIONAL
   Agar kotak input tanggal dan popup date picker (.z-datebox-pp) tidak
   melebar mengikuti kolom form (mis. setWidth("90%")) yang menyebabkan
   area kosong lebar di sebelah kanan kalender (215px).
   ====================================================================== */
html body .z-datebox,
html body .z-datebox-rounded {
	max-width: 190px !important;
}

html body .z-datebox .z-datebox-inp,
html body .z-datebox-rounded .z-datebox-rounded-inp,
html body input.z-datebox-inp,
html body input.z-datebox-rounded-inp {
	max-width: calc(100% - 24px) !important;
	box-sizing: border-box !important;
}

html body .z-datebox-pp,
html body .z-datebox-rounded-pp {
	width: 236px !important;
	min-width: 224px !important;
	max-width: min(248px, calc(100vw - 24px)) !important;
	height: auto !important;
	padding: 6px !important;
	box-sizing: border-box !important;
}

html body .z-datebox-pp .z-calendar,
html body .z-datebox-rounded-pp .z-calendar {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 auto !important;
	box-sizing: border-box !important;
}

html body .z-datebox-pp .z-timebox,
html body .z-datebox-rounded-pp .z-timebox {
	max-width: 100% !important;
	box-sizing: border-box !important;
}

html body .z-datebox-shadow,
html body .z-datebox-rounded-shadow {
	max-width: min(248px, calc(100vw - 24px)) !important;
}

/* ======================================================================
   PATCH GLOBAL: KONTRAS BADGE & TOMBOL JUMLAH AKSES/AKTIVITAS E-LEARNING ("N lihat")
   Menjamin badge jumlah akses di TampilanELearningAction.dilihat(...) dan
   sub-badge aksi pertemuan selalu berwarna biru tua gelap (#0c4a6e) di atas
   pil biru langit (#e0f2fe) dengan garis tepi tegas (#0284c7), tidak pernah
   tertimpa menjadi putih oleh aturan tema global/tenant, serta tidak terpotong.
   ====================================================================== */
html body .elearning-action-pill-row,
html body .elearning-action-pill-row tbody,
html body .elearning-action-pill-row tr,
html body .elearning-action-pill-row td,
html body .elearning-action-vbox,
html body .elearning-action-vbox tbody,
html body .elearning-action-vbox tr,
html body .elearning-action-vbox td {
	overflow: visible !important;
	height: auto !important;
	max-height: none !important;
}

html body .elearning-action-vbox td {
	text-align: center !important;
}

html body .z-label.elearning-access-count,
html body .z-label.elearning-lihat-badge,
html body span.elearning-lihat-badge,
html body .z-toolbarbutton.elearning-access-count,
html body .z-toolbarbutton.elearning-access-count .z-toolbarbutton-body,
html body .z-toolbarbutton.elearning-access-count .z-toolbarbutton-cnt,
html body .z-toolbarbutton.elearning-access-count .z-toolbarbutton-cnt span {
	background: #e0f2fe !important;
	background-color: #e0f2fe !important;
	border-color: #0284c7 !important;
	color: #0c4a6e !important;
	-webkit-text-fill-color: #0c4a6e !important;
	text-shadow: none !important;
	opacity: 1 !important;
}

html body .z-label.elearning-access-count,
html body .z-label.elearning-lihat-badge,
html body span.elearning-lihat-badge {
	display: inline-block !important;
	width: auto !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	padding: 2px 8px !important;
	margin-top: 2px !important;
	border: 1px solid #0284c7 !important;
	border-radius: 999px !important;
	line-height: 1.35 !important;
	white-space: nowrap !important;
	cursor: pointer !important;
}

html body .z-label.elearning-access-count:hover,
html body .z-label.elearning-lihat-badge:hover,
html body span.elearning-lihat-badge:hover,
html body .z-toolbarbutton.elearning-access-count:hover,
html body .z-toolbarbutton.elearning-access-count.z-toolbarbutton-over,
html body .z-toolbarbutton.elearning-access-count:hover .z-toolbarbutton-cnt,
html body .z-toolbarbutton.elearning-access-count.z-toolbarbutton-over .z-toolbarbutton-cnt {
	background: #bae6fd !important;
	background-color: #bae6fd !important;
	border-color: #0369a1 !important;
	color: #082f49 !important;
	-webkit-text-fill-color: #082f49 !important;
}

/* ======================================================================
   PATCH GLOBAL: PROTEKSI KONTRAS MENU KEBAB & TOMBOL BERLATAR GELAP/SOLID
   Mencegah teks menu atau tombol memiliki warna yang sama dengan warna
   background-nya (mis. teks gelap #0f172a di atas latar biru #1d4ed8 pada
   item kebab, atau teks biru --ais-theme-primary di atas tombol solid biru).
   ====================================================================== */
html body .z-popup.ais-row-popup,
html body .z-popup.ais-row-popup .z-popup-inner,
html body .z-popup.ais-row-popup .z-popup-cnt {
	background: #ffffff !important;
	background-color: #ffffff !important;
	color: #0f172a !important;
}

html body .z-popup.ais-row-popup .ais-row-popup-item.z-toolbarbutton,
html body .ais-row-popup-item.z-toolbarbutton,
html body .ais-row-popup-item .z-toolbarbutton-body {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	color: #0f172a !important;
	-webkit-text-fill-color: #0f172a !important;
}

html body .z-popup.ais-row-popup .ais-row-popup-item.z-toolbarbutton[style*="display: none"],
html body .z-popup.ais-row-popup .ais-row-popup-item.z-toolbarbutton[style*="display:none"],
html body .z-popup.ais-row-popup .ais-row-popup-item[style*="display: none"],
html body .z-popup.ais-row-popup .ais-row-popup-item[style*="display:none"],
html body .ais-row-popup-item[style*="display: none"],
html body .ais-row-popup-item[style*="display:none"] {
	display: none !important;
}

html body .ais-row-popup-item .z-toolbarbutton-cnt,
html body .ais-row-popup-item .z-toolbarbutton-cnt span,
html body .ais-row-popup-item .z-toolbarbutton-cnt .z-label {
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	color: #0f172a !important;
	-webkit-text-fill-color: #0f172a !important;
	text-shadow: none !important;
}

html body .ais-row-popup-item:hover .z-toolbarbutton-cnt,
html body .ais-row-popup-item.z-toolbarbutton-over .z-toolbarbutton-cnt,
html body .ais-row-popup-item .z-toolbarbutton-cnt:hover {
	background: #eff6ff !important;
	background-color: #eff6ff !important;
	color: #1d4ed8 !important;
	-webkit-text-fill-color: #1d4ed8 !important;
}

html body .ais-row-popup-item:hover .z-toolbarbutton-cnt span,
html body .ais-row-popup-item.z-toolbarbutton-over .z-toolbarbutton-cnt span,
html body .ais-row-popup-item .z-toolbarbutton-cnt:hover span {
	color: #1d4ed8 !important;
	-webkit-text-fill-color: #1d4ed8 !important;
}

/* ======================================================================
   ATURAN MUTLAK 52: KESERAGAMAN WARNA SELURUH MENU KEBAB & TOMBOL (ZKOSS)
   1. Seluruh item di dalam menu kebab/dropdown (.ais-row-popup-item,
      .ais-row-popup-item-danger, .ais-row-popup-item-has-data) wajib memiliki
      warna teks (#0f172a), latar transparan, dan hover (#eff6ff / #1d4ed8)
      yang 100% seragam.
   2. Seluruh tombol di luar menu kebab (.ais-btn, .ais-btn-hijau, .ais-btn-merah,
      .ais-btn-merah-tua, .ais-btn-biru, .ais-form-footer-action,
      .ais-toolbar-direct-btn, maupun tombol dengan inline style warna) wajib
      memiliki warna permukaan netral yang 100% seragam (#ffffff, border #cbd5e1,
      teks gelap #0f172a, hover #eff6ff / border #93c5fd / teks #1d4ed8) dan
      ikon SVG asli tanpa inversi putih.
   ====================================================================== */
html body .ais-row-popup-item-danger.z-toolbarbutton,
html body .ais-row-popup-item-danger .z-toolbarbutton-cnt,
html body .ais-row-popup-item-danger .z-toolbarbutton-cnt span,
html body .ais-row-popup-item-danger .z-toolbarbutton-cnt .z-label,
html body .ais-row-popup-item-has-data.z-toolbarbutton,
html body .ais-row-popup-item-has-data .z-toolbarbutton-cnt,
html body .ais-row-popup-item-has-data .z-toolbarbutton-cnt span,
html body .ais-row-popup-item-has-data .z-toolbarbutton-cnt .z-label {
	color: #0f172a !important;
	-webkit-text-fill-color: #0f172a !important;
}

html body .ais-row-popup-item-has-data .z-toolbarbutton-cnt,
html body .ais-row-popup-item-has-data .z-toolbarbutton-cnt span,
html body .ais-row-popup-item-has-data .z-toolbarbutton-cnt .z-label {
	font-weight: 500 !important;
}

html body .ais-row-popup-item-danger:hover .z-toolbarbutton-cnt,
html body .ais-row-popup-item-danger.z-toolbarbutton-over .z-toolbarbutton-cnt,
html body .ais-row-popup-item-danger .z-toolbarbutton-cnt:hover,
html body .ais-row-popup-item-has-data:hover .z-toolbarbutton-cnt,
html body .ais-row-popup-item-has-data.z-toolbarbutton-over .z-toolbarbutton-cnt,
html body .ais-row-popup-item-has-data .z-toolbarbutton-cnt:hover {
	background: #eff6ff !important;
	background-color: #eff6ff !important;
	color: #1d4ed8 !important;
	-webkit-text-fill-color: #1d4ed8 !important;
}

html body .ais-row-popup-item-danger:hover .z-toolbarbutton-cnt span,
html body .ais-row-popup-item-danger.z-toolbarbutton-over .z-toolbarbutton-cnt span,
html body .ais-row-popup-item-danger .z-toolbarbutton-cnt:hover span,
html body .ais-row-popup-item-has-data:hover .z-toolbarbutton-cnt span,
html body .ais-row-popup-item-has-data.z-toolbarbutton-over .z-toolbarbutton-cnt span,
html body .ais-row-popup-item-has-data .z-toolbarbutton-cnt:hover span {
	color: #1d4ed8 !important;
	-webkit-text-fill-color: #1d4ed8 !important;
}

/* Normalisasi seragam seluruh tombol ZKoss (termasuk yang memiliki inline style warna) */
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#1d4ed8"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #1d4ed8"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background-color:#1d4ed8"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background-color: #1d4ed8"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#2563eb"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #2563eb"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background-color:#2563eb"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background-color: #2563eb"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#0d6efd"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #0d6efd"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#1e40af"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #1e40af"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background-color:#1e40af"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background-color: #1e40af"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#1e3a8a"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #1e3a8a"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background-color:#1e3a8a"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background-color: #1e3a8a"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#0f172a"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #0f172a"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#0ea5e9"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #0ea5e9"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#0284c7"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #0284c7"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#0369a1"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #0369a1"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#0891b2"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #0891b2"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#3b82f6"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #3b82f6"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#059669"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #059669"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background-color:#059669"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background-color: #059669"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#10b981"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #10b981"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background-color:#10b981"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background-color: #10b981"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#16a34a"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #16a34a"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background-color:#16a34a"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background-color: #16a34a"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#198754"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #198754"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#dc2626"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #dc2626"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background-color:#dc2626"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background-color: #dc2626"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#b91c1c"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #b91c1c"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background-color:#b91c1c"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background-color: #b91c1c"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#991b1b"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #991b1b"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#ef4444"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #ef4444"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#4f46e5"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #4f46e5"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background-color:#4f46e5"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background-color: #4f46e5"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#7c3aed"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #7c3aed"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#c2410c"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #c2410c"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#475569"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #475569"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#4CAF50"],
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #4CAF50"],
html body .ais-btn:not(.z-toolbarbutton-disd):not(.z-toolbarbutton-disabled):not([disabled]),
html body .ais-btn-hijau:not(.z-toolbarbutton-disd):not(.z-toolbarbutton-disabled):not([disabled]),
html body .ais-btn-merah:not(.z-toolbarbutton-disd):not(.z-toolbarbutton-disabled):not([disabled]),
html body .ais-btn-merah-tua:not(.z-toolbarbutton-disd):not(.z-toolbarbutton-disabled):not([disabled]),
html body .ais-btn-biru:not(.z-toolbarbutton-disd):not(.z-toolbarbutton-disabled):not([disabled]) {
	background: #ffffff !important;
	background-color: #ffffff !important;
	background-image: none !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 8px !important;
	color: #0f172a !important;
	-webkit-text-fill-color: #0f172a !important;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .08) !important;
}

html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#1d4ed8"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #1d4ed8"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background-color:#1d4ed8"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background-color: #1d4ed8"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#2563eb"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #2563eb"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background-color:#2563eb"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background-color: #2563eb"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#0d6efd"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #0d6efd"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#1e40af"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #1e40af"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background-color:#1e40af"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background-color: #1e40af"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#1e3a8a"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #1e3a8a"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background-color:#1e3a8a"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background-color: #1e3a8a"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#0f172a"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #0f172a"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#0ea5e9"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #0ea5e9"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#0284c7"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #0284c7"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#0369a1"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #0369a1"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#0891b2"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #0891b2"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#3b82f6"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #3b82f6"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#059669"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #059669"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background-color:#059669"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background-color: #059669"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#10b981"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #10b981"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background-color:#10b981"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background-color: #10b981"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#16a34a"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #16a34a"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background-color:#16a34a"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background-color: #16a34a"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#198754"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #198754"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#dc2626"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #dc2626"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background-color:#dc2626"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background-color: #dc2626"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#b91c1c"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #b91c1c"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background-color:#b91c1c"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background-color: #b91c1c"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#991b1b"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #991b1b"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#ef4444"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #ef4444"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#4f46e5"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #4f46e5"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background-color:#4f46e5"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background-color: #4f46e5"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#7c3aed"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #7c3aed"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#c2410c"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #c2410c"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#475569"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #475569"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#4CAF50"] .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #4CAF50"] .z-toolbarbutton-cnt,
html body .ais-btn:not(.z-toolbarbutton-disd):not(.z-toolbarbutton-disabled):not([disabled]) .z-toolbarbutton-body,
html body .ais-btn:not(.z-toolbarbutton-disd):not(.z-toolbarbutton-disabled):not([disabled]) .z-toolbarbutton-cnt,
html body .ais-btn:not(.z-toolbarbutton-disd):not(.z-toolbarbutton-disabled):not([disabled]) .z-toolbarbutton-cnt * {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	color: #0f172a !important;
	-webkit-text-fill-color: #0f172a !important;
	text-shadow: none !important;
	opacity: 1 !important;
}

html body .ais-btn.ais-tbar-icon-white:not(.z-toolbarbutton-disd):not(.z-toolbarbutton-disabled):not([disabled]) img,
html body .ais-btn.ais-tbar-icon-white:not(.z-toolbarbutton-disd):not(.z-toolbarbutton-disabled):not([disabled]):hover img,
html body .ais-btn.ais-tbar-icon-white.z-toolbarbutton-over:not(.z-toolbarbutton-disd):not(.z-toolbarbutton-disabled):not([disabled]) img,
html body .ais-form-footer-action.ais-btn:not(.z-toolbarbutton-disd):not(.z-toolbarbutton-disabled):not([disabled]) img,
html body .ais-form-footer-action.ais-btn:not(.z-toolbarbutton-disd):not(.z-toolbarbutton-disabled):not([disabled]):hover img,
html body .ais-form-footer-action.ais-btn.z-toolbarbutton-over:not(.z-toolbarbutton-disd):not(.z-toolbarbutton-disabled):not([disabled]) img,
html body .z-toolbarbutton.ais-tbar-icon-white img,
html body .z-toolbarbutton[style*="background:#2563eb"] img,
html body .z-toolbarbutton[style*="background: #2563eb"] img,
html body .z-toolbarbutton[style*="background:#1d4ed8"] img,
html body .z-toolbarbutton[style*="background: #1d4ed8"] img,
html body .z-toolbarbutton[style*="background:#3b82f6"] img,
html body .z-toolbarbutton[style*="background: #3b82f6"] img,
html body .z-toolbarbutton[style*="background:#0284c7"] img,
html body .z-toolbarbutton[style*="background: #0284c7"] img,
html body .z-toolbarbutton[style*="background:#059669"] img,
html body .z-toolbarbutton[style*="background: #059669"] img,
html body .z-toolbarbutton[style*="background:#16a34a"] img,
html body .z-toolbarbutton[style*="background: #16a34a"] img,
html body .z-toolbarbutton[style*="background:#198754"] img,
html body .z-toolbarbutton[style*="background: #198754"] img,
html body .z-toolbarbutton[style*="background:#dc2626"] img,
html body .z-toolbarbutton[style*="background: #dc2626"] img,
html body .z-toolbarbutton[style*="background:#ef4444"] img,
html body .z-toolbarbutton[style*="background: #ef4444"] img,
html body .z-toolbarbutton[style*="background:#991b1b"] img,
html body .z-toolbarbutton[style*="background: #991b1b"] img {
	filter: none !important;
	-webkit-filter: none !important;
	opacity: 1 !important;
}

/* Hover seragam untuk seluruh tombol ZKoss */
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#2563eb"]:hover,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#2563eb"].z-toolbarbutton-over,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #2563eb"]:hover,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #2563eb"].z-toolbarbutton-over,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#3b82f6"]:hover,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#3b82f6"].z-toolbarbutton-over,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #3b82f6"]:hover,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #3b82f6"].z-toolbarbutton-over,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#059669"]:hover,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#059669"].z-toolbarbutton-over,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #059669"]:hover,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #059669"].z-toolbarbutton-over,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#16a34a"]:hover,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#16a34a"].z-toolbarbutton-over,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #16a34a"]:hover,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #16a34a"].z-toolbarbutton-over,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#198754"]:hover,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #198754"]:hover,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#dc2626"]:hover,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#dc2626"].z-toolbarbutton-over,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #dc2626"]:hover,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #dc2626"].z-toolbarbutton-over,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#ef4444"]:hover,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #ef4444"]:hover,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#991b1b"]:hover,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#991b1b"].z-toolbarbutton-over,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #991b1b"]:hover,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #991b1b"].z-toolbarbutton-over,
html body .ais-btn:hover:not(.z-toolbarbutton-disd):not(.z-toolbarbutton-disabled):not([disabled]),
html body .ais-btn.z-toolbarbutton-over:not(.z-toolbarbutton-disd):not(.z-toolbarbutton-disabled):not([disabled]),
html body .ais-btn-hijau:hover:not(.z-toolbarbutton-disd):not(.z-toolbarbutton-disabled):not([disabled]),
html body .ais-btn-hijau.z-toolbarbutton-over:not(.z-toolbarbutton-disd):not(.z-toolbarbutton-disabled):not([disabled]),
html body .ais-btn-merah:hover:not(.z-toolbarbutton-disd):not(.z-toolbarbutton-disabled):not([disabled]),
html body .ais-btn-merah.z-toolbarbutton-over:not(.z-toolbarbutton-disd):not(.z-toolbarbutton-disabled):not([disabled]),
html body .ais-btn-merah-tua:hover:not(.z-toolbarbutton-disd):not(.z-toolbarbutton-disabled):not([disabled]),
html body .ais-btn-merah-tua.z-toolbarbutton-over:not(.z-toolbarbutton-disd):not(.z-toolbarbutton-disabled):not([disabled]),
html body .ais-btn-biru:hover:not(.z-toolbarbutton-disd):not(.z-toolbarbutton-disabled):not([disabled]),
html body .ais-btn-biru.z-toolbarbutton-over:not(.z-toolbarbutton-disd):not(.z-toolbarbutton-disabled):not([disabled]) {
	background: #eff6ff !important;
	background-color: #eff6ff !important;
	background-image: none !important;
	border-color: #93c5fd !important;
	color: #1d4ed8 !important;
	-webkit-text-fill-color: #1d4ed8 !important;
	filter: none !important;
	box-shadow: 0 2px 6px rgba(15, 23, 42, .14) !important;
}

html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#2563eb"]:hover .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#2563eb"].z-toolbarbutton-over .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #2563eb"]:hover .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #2563eb"].z-toolbarbutton-over .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#3b82f6"]:hover .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #3b82f6"]:hover .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#059669"]:hover .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#059669"].z-toolbarbutton-over .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #059669"]:hover .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #059669"].z-toolbarbutton-over .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#16a34a"]:hover .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#16a34a"].z-toolbarbutton-over .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #16a34a"]:hover .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #16a34a"].z-toolbarbutton-over .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#198754"]:hover .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #198754"]:hover .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#dc2626"]:hover .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#dc2626"].z-toolbarbutton-over .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #dc2626"]:hover .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #dc2626"].z-toolbarbutton-over .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#ef4444"]:hover .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #ef4444"]:hover .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#991b1b"]:hover .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background:#991b1b"].z-toolbarbutton-over .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #991b1b"]:hover .z-toolbarbutton-cnt,
html body .z-toolbarbutton:not(.ais-row-popup-item)[style*="background: #991b1b"].z-toolbarbutton-over .z-toolbarbutton-cnt,
html body .ais-btn:not(.z-toolbarbutton-disd):not(.z-toolbarbutton-disabled):not([disabled]):hover .z-toolbarbutton-body,
html body .ais-btn.z-toolbarbutton-over:not(.z-toolbarbutton-disd):not(.z-toolbarbutton-disabled):not([disabled]) .z-toolbarbutton-body,
html body .ais-btn:not(.z-toolbarbutton-disd):not(.z-toolbarbutton-disabled):not([disabled]):hover .z-toolbarbutton-cnt,
html body .ais-btn.z-toolbarbutton-over:not(.z-toolbarbutton-disd):not(.z-toolbarbutton-disabled):not([disabled]) .z-toolbarbutton-cnt,
html body .ais-btn:not(.z-toolbarbutton-disd):not(.z-toolbarbutton-disabled):not([disabled]):hover .z-toolbarbutton-cnt *,
html body .ais-btn.z-toolbarbutton-over:not(.z-toolbarbutton-disd):not(.z-toolbarbutton-disabled):not([disabled]) .z-toolbarbutton-cnt * {
	color: #1d4ed8 !important;
	-webkit-text-fill-color: #1d4ed8 !important;
}

/* ======================================================================
   PATCH GLOBAL: BARIS PENCARIAN & TOMBOL TUTUP DI HEADER POPUP MENU NAVIGASI
   Ukuran kompak 28px, sebaris rapi, tanpa ikon ganda yang mendorong teks.
   ====================================================================== */
html body .main-responsive-menu-searchbar {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 5px !important;
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 7px 8px !important;
}

html body .main-responsive-menu-searchbar > tbody,
html body .main-responsive-menu-searchbar > tbody > tr,
html body .main-responsive-menu-searchbar > tbody > tr > td[id$="-frame"],
html body .main-responsive-menu-searchbar table,
html body .main-responsive-menu-searchbar tbody,
html body .main-responsive-menu-searchbar tr {
	display: contents !important;
}

html body .main-responsive-menu-searchbar td.z-hbox-inner,
html body .main-responsive-menu-searchbar .z-hbox-cell {
	display: flex !important;
	align-items: center !important;
	vertical-align: middle !important;
	flex: 0 0 auto !important;
	padding: 0 !important;
	margin: 0 !important;
}

html body .main-responsive-menu-searchbar td.z-hbox-inner:first-child,
html body .main-responsive-menu-searchbar .z-hbox-cell:first-child {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	width: auto !important;
}

html body .main-responsive-menu-searchbar td.z-hbox-sep,
html body .main-responsive-menu-searchbar .z-hbox-sep {
	display: none !important;
	width: 0 !important;
	min-width: 0 !important;
}

html body .main-responsive-menu-search-input,
html body .main-responsive-menu-searchbar .z-textbox {
	display: block !important;
	width: 100% !important;
	min-width: 0 !important;
	height: 28px !important;
	min-height: 28px !important;
	max-height: 28px !important;
	line-height: 26px !important;
	padding: 0 9px !important;
	font-size: 12px !important;
	border-radius: 7px !important;
	box-sizing: border-box !important;
	margin: 0 !important;
}

html body .main-responsive-menu-search-button,
html body .main-responsive-menu-searchbar .main-responsive-menu-search-button.z-toolbarbutton {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 28px !important;
	min-width: 28px !important;
	max-width: 28px !important;
	height: 28px !important;
	min-height: 28px !important;
	max-height: 28px !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 7px !important;
	box-sizing: border-box !important;
}

html body .main-responsive-menu-search-button .z-toolbarbutton-body,
html body .main-responsive-menu-search-button .z-toolbarbutton-cnt {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	min-width: 0 !important;
	height: 100% !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

html body .main-responsive-menu-search-button img,
html body .main-responsive-menu-search-button .z-toolbarbutton-cnt img {
	width: 14px !important;
	height: 14px !important;
	min-width: 14px !important;
	min-height: 14px !important;
	margin: 0 auto !important;
	display: block !important;
	filter: brightness(0) invert(1) !important;
}

html body .main-responsive-menu-popup-close-button,
html body .main-responsive-menu-searchbar .main-responsive-menu-popup-close-button.z-toolbarbutton {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	min-width: 0 !important;
	height: 28px !important;
	min-height: 28px !important;
	max-height: 28px !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

html body .main-responsive-menu-popup-close-button .z-toolbarbutton-body {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 28px !important;
	min-height: 28px !important;
	max-height: 28px !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

html body .main-responsive-menu-popup-close-button .z-toolbarbutton-cnt {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 28px !important;
	min-height: 28px !important;
	max-height: 28px !important;
	min-width: 52px !important;
	padding: 0 10px !important;
	margin: 0 !important;
	line-height: 1 !important;
	font-size: 11.5px !important;
	font-weight: 700 !important;
	border-radius: 7px !important;
	background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
	border: 1px solid rgba(255, 255, 255, .65) !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	text-align: center !important;
	white-space: nowrap !important;
	box-sizing: border-box !important;
	box-shadow: none !important;
}

html body .main-responsive-menu-popup-close-button img,
html body .main-responsive-menu-popup-close-button .z-toolbarbutton-cnt img {
	display: none !important;
}

/* ======================================================================
   COLLAPSIBLE TEXT RENDERER ("Lihat selengkapnya" / "Ciutkan teks")
   ====================================================================== */
html body .ais-collapsible-text,
html body .ais-collapsible-text-full,
html body .ais-collapsible-expanded,
html body .ais-collapsible-expanded .z-label,
html body .ais-collapsible-expanded .z-a,
html body td.z-row-inner .z-row-cnt .ais-collapsible-expanded,
html body td.z-row-inner .z-row-cnt .ais-collapsible-expanded .z-label,
html body td.z-row-inner .z-row-cnt .ais-collapsible-text-full,
html body td.z-cell .z-row-cnt .ais-collapsible-expanded,
html body td.z-cell .z-row-cnt .ais-collapsible-expanded .z-label,
html body td.z-cell .z-row-cnt .ais-collapsible-text-full,
html body td.z-listcell .z-listcell-cnt .ais-collapsible-expanded,
html body td.z-listcell .z-listcell-cnt .ais-collapsible-expanded .z-label,
html body td.z-listcell .z-listcell-cnt .ais-collapsible-text-full {
	white-space: pre-wrap !important;
	overflow-wrap: anywhere !important;
	word-wrap: break-word !important;
	word-break: break-word !important;
	overflow: visible !important;
	text-overflow: clip !important;
	max-width: 100% !important;
	height: auto !important;
}

html body td.z-row-inner:has(.ais-collapsible-expanded),
html body td.z-cell:has(.ais-collapsible-expanded),
html body td.z-listcell:has(.ais-collapsible-expanded),
html body div.z-row-cnt:has(.ais-collapsible-expanded),
html body div.z-row-cnt.z-overflow-hidden:has(.ais-collapsible-expanded),
html body div.z-listcell-cnt:has(.ais-collapsible-expanded),
html body div.z-listcell-cnt.z-overflow-hidden:has(.ais-collapsible-expanded) {
	white-space: normal !important;
	overflow: visible !important;
	text-overflow: clip !important;
	height: auto !important;
	max-height: none !important;
}


/* ======================================================================
   PATCH GLOBAL: KEBAB MENU (tiga titik) RESPONSIF MOBILE & DESKTOP
   Memastikan seluruh area tombol pemicu .ais-row-action-kebab aktif
   menerima klik/tap (tanpa dead-zone) dan popup .z-popup.ais-row-popup
   tidak pernah melampaui lebar layar HP (viewport clamping).
   ====================================================================== */
html body .ais-row-action-kebab,
html body .ais-row-actions .ais-row-action-kebab {
	display: inline-flex !important;
	box-sizing: border-box !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	cursor: pointer !important;
	touch-action: manipulation !important;
	user-select: none !important;
	-webkit-tap-highlight-color: rgba(37, 99, 235, 0.15) !important;
}

html body .ais-row-action-kebab .z-toolbarbutton-body,
html body .ais-row-action-kebab .z-toolbarbutton-cnt,
html body .ais-row-actions .ais-row-action-kebab .z-toolbarbutton-cnt {
	display: flex !important;
	box-sizing: border-box !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 100% !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	cursor: pointer !important;
}

html body .z-popup.ais-row-popup {
	max-width: calc(100vw - 16px) !important;
	box-sizing: border-box !important;
	z-index: 2147483647 !important;
}

@media only screen and (max-width: 820px) {
	html body .ais-row-action-kebab,
	html body .ais-row-actions .ais-row-action-kebab {
		width: 44px !important;
		height: 44px !important;
		min-width: 44px !important;
		min-height: 44px !important;
		padding: 0 !important;
	}
	html body .ais-row-popup-item .z-toolbarbutton-cnt {
		min-height: 44px !important;
		padding: 8px 14px !important;
		font-size: 14px !important;
		touch-action: manipulation !important;
	}
	html body .elearning-action-pill-row {
		display: flex !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
}


/* ======================================================================
 * GLOBAL OVERRIDE: PAGING MODAL / OS MOLD (STANDAR AIS)
 * File ini dimuat paling akhir oleh MyThemeProvider setelah seluruh theme tenant.
 * Memastikan tombol nomor halaman (1, 2, 3...) pada mold "os" tidak merenggang
 * jauh ke samping dan div pembungkus Breeze dinetralisir secara permanen.
 * ====================================================================== */
html body .z-paging {
    background: #ffffff !important;
    border: 1px solid var(--ais-border, #e2e8f0) !important;
    border-radius: 8px !important;
    padding: 4px 12px !important;
    color: #334155 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
/* Standarisasi Paging Mold Default ZK:
   Tabel kontrol navigasi ([<<] [<] | [ 1 ] / 17 | [>] [>>]) selalu rapat dan kompak di sisi kiri,
   tidak merenggang / melebar memenuhi seluruh baris kontainer. */
html body .z-paging > table,
html body .z-paging table.z-paging-table {
    display: inline-table !important;
    width: auto !important;
    max-width: fit-content !important;
    margin: 0 !important;
    border-collapse: separate !important;
    border-spacing: 2px !important;
    float: none !important;
}
html body .z-paging > table td,
html body .z-paging table.z-paging-table td {
    width: auto !important;
    padding: 1px 3px !important;
    vertical-align: middle !important;
}
html body .z-paging table.z-paging-btn,
html body .z-paging table.z-paging-btn tbody,
html body .z-paging table.z-paging-btn tr,
html body .z-paging table.z-paging-btn td {
    width: auto !important;
    border-collapse: collapse !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: table !important;
}
html body .z-paging table.z-paging-btn td.z-paging-btn-m {
    display: table-cell !important;
    vertical-align: middle !important;
}
html body .z-paging table.z-paging-btn td.z-paging-btn-l,
html body .z-paging table.z-paging-btn td.z-paging-btn-r {
    display: none !important;
}
html body .z-paging span.z-paging-sep {
    display: inline-block !important;
    width: 1px !important;
    height: 16px !important;
    margin: 0 6px !important;
    background: #cbd5e1 !important;
    background-image: none !important;
    vertical-align: middle !important;
}
html body .z-paging div.z-paging-info,
html body .z-paging span.z-paging-info {
    position: static !important;
    margin-left: auto !important;
    white-space: nowrap !important;
    text-align: right !important;
}

html body .z-paging-os {
    background: #ffffff !important;
    border: 1px solid var(--ais-border, #e2e8f0) !important;
    border-radius: 8px !important;
    padding: 6px 10px !important;
    box-shadow: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    height: auto !important;
    min-height: 40px !important;
    line-height: normal !important;
    position: relative !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

html body .z-paging-os div.z-paging-os-cnt-l,
html body .z-paging-os div.z-paging-os-cnt-r,
html body .z-paging-os div.z-paging-os-cnt-m,
html body .z-paging-os div.z-paging-os-cnt-seld-l,
html body .z-paging-os div.z-paging-os-cnt-seld-r,
html body .z-paging-os div.z-paging-os-cnt-seld-m,
html body .z-paging-os div.z-paging-os-cnt-l-over {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    vertical-align: middle !important;
}

html body .z-paging-os a.z-paging-os-cnt {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    min-width: 28px !important;
    height: 28px !important;
    line-height: 1 !important;
    text-align: center !important;
    padding: 0 8px !important;
    margin: 0 !important;
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    color: #334155 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    position: static !important;
    top: auto !important;
    transition: all 0.15s ease !important;
}

html body .z-paging-os a.z-paging-os-cnt:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
    text-decoration: none !important;
}

html body .z-paging-os a.z-paging-os-seld,
html body .z-paging-os a.z-paging-os-cnt.z-paging-os-seld {
    background: var(--ais-theme-primary, #1e40af) !important;
    color: #ffffff !important;
    border-color: var(--ais-theme-primary, #1e40af) !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

html body .z-paging-os span,
html body .z-paging-os span.z-paging-info {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    margin-left: auto !important;
    padding-left: 8px !important;
    position: static !important;
    float: none !important;
    height: 28px !important;
    line-height: 1 !important;
}

/* =========================================================================
   STANDARISASI ENTRY KONTROL (TEXTBOX, COMBOBOX, BANDBOX, DATEBOX, TIMEBOX, SPINNER)
   DI DALAM TOOLBAR FILTER & FORMULIR
   Mencegah input dan tombol picker tampil beda tinggi / gepeng / terpotong.
   ========================================================================= */
html body .z-toolbar input.z-textbox,
html body .z-toolbar .z-textbox,
html body .ais-toolbar input.z-textbox,
html body .ais-toolbar .z-textbox {
    min-height: 32px !important;
    height: 32px !important;
    line-height: 30px !important;
    font-size: 12px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 2px 8px !important;
    box-sizing: border-box !important;
}
html body .z-toolbar .z-combobox,
html body .ais-toolbar .z-combobox,
html body .z-toolbar .z-bandbox,
html body .ais-toolbar .z-bandbox,
html body .z-toolbar .z-datebox,
html body .ais-toolbar .z-datebox,
html body .z-toolbar .z-timebox,
html body .ais-toolbar .z-timebox,
html body .z-toolbar .z-spinner,
html body .ais-toolbar .z-spinner,
html body .z-toolbar .z-doublespinner,
html body .ais-toolbar .z-doublespinner,
html body .z-combobox.elearning-periode-combo {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    vertical-align: middle !important;
    height: 32px !important;
    min-height: 32px !important;
    box-sizing: border-box !important;
}
html body .z-toolbar .z-combobox .z-combobox-inp,
html body .ais-toolbar .z-combobox .z-combobox-inp,
html body .z-toolbar .z-bandbox .z-bandbox-inp,
html body .ais-toolbar .z-bandbox .z-bandbox-inp,
html body .z-toolbar .z-datebox .z-datebox-inp,
html body .ais-toolbar .z-datebox .z-datebox-inp,
html body .z-toolbar .z-timebox .z-timebox-inp,
html body .ais-toolbar .z-timebox .z-timebox-inp,
html body .z-toolbar .z-spinner .z-spinner-inp,
html body .ais-toolbar .z-spinner .z-spinner-inp,
html body .z-toolbar .z-doublespinner .z-doublespinner-inp,
html body .ais-toolbar .z-doublespinner .z-doublespinner-inp,
html body .z-combobox.elearning-periode-combo .z-combobox-inp {
    flex: 1 1 auto !important;
    width: calc(100% - 26px) !important;
    max-width: calc(100% - 26px) !important;
    min-width: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    line-height: 28px !important;
    font-size: 12px !important;
    border: 1px solid #cbd5e1 !important;
    border-right: 0 !important;
    border-radius: 6px 0 0 6px !important;
    padding: 2px 8px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}
html body .z-toolbar .z-combobox .z-combobox-btn,
html body .ais-toolbar .z-combobox .z-combobox-btn,
html body .z-toolbar .z-bandbox .z-bandbox-btn,
html body .ais-toolbar .z-bandbox .z-bandbox-btn,
html body .z-toolbar .z-datebox .z-datebox-btn,
html body .ais-toolbar .z-datebox .z-datebox-btn,
html body .z-toolbar .z-timebox .z-timebox-btn,
html body .ais-toolbar .z-timebox .z-timebox-btn,
html body .z-toolbar .z-spinner .z-spinner-btn,
html body .ais-toolbar .z-spinner .z-spinner-btn,
html body .z-toolbar .z-doublespinner .z-doublespinner-btn,
html body .ais-toolbar .z-doublespinner .z-doublespinner-btn,
html body .z-combobox.elearning-periode-combo .z-combobox-btn {
    flex: 0 0 26px !important;
    align-self: stretch !important;
    height: 32px !important;
    min-height: 32px !important;
    line-height: 30px !important;
    width: 26px !important;
    min-width: 26px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #94a3b8 !important;
    border-left: 1px solid #cbd5e1 !important;
    border-radius: 0 6px 6px 0 !important;
    background-color: #eef5ff !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

/* ======================================================================
   PATCH GLOBAL VISIBILITAS IKON, KESELARASAN TINGGI, & KURSOR PICKER ZKOSS
   (COMBOBOX, BANDBOX, DATEBOX, TIMEBOX, SPINNER, DOUBLESPINNER)
   Karena zkoss_popup_menu_fix.css dimuat PALING AKHIR oleh MyThemeProvider
   (setelah css_utama.css dan tema kustom tenant seperti biru_tua.css / ytb.css / asm.css),
   aturan di sini menjamin:
   1. Wrapper picker selalu inline-flex dengan align-items: stretch.
   2. Tinggi input (-inp) dan tombol (-btn) selalu identik (26px di form, 32px di toolbar).
   3. Ikon panah/kalender/jam/pencarian/stepper tidak pernah tertimpa oleh CSS tenant.
   ====================================================================== */
html body .z-combobox,
html body .z-bandbox,
html body .z-datebox,
html body .z-timebox,
html body .z-spinner,
html body .z-doublespinner,
html body .z-combobox-rounded,
html body .z-bandbox-rounded,
html body .z-datebox-rounded,
html body .z-timebox-rounded,
html body .z-spinner-rounded,
html body .z-doublespinner-rounded {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}

html body .z-combobox-inp,
html body .z-bandbox-inp,
html body .z-datebox-inp,
html body .z-timebox-inp,
html body .z-spinner-inp,
html body .z-doublespinner-inp,
html body .z-combobox-rounded-inp,
html body .z-bandbox-rounded-inp,
html body .z-datebox-rounded-inp,
html body .z-timebox-rounded-inp,
html body .z-spinner-rounded-inp,
html body .z-doublespinner-rounded-inp {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 26px !important;
    height: 26px !important;
    line-height: 20px !important;
    margin: 0 !important;
    border-radius: 6px 0 0 6px !important;
    border-right: 0 !important;
    box-sizing: border-box !important;
    cursor: text !important;
    caret-color: #1d4ed8 !important;
}

html body .z-combobox-inp[readonly],
html body .z-bandbox-inp[readonly],
html body .z-datebox-inp[readonly],
html body .z-combobox-rounded-inp[readonly],
html body .z-bandbox-rounded-inp[readonly],
html body .z-datebox-rounded-inp[readonly] {
    cursor: pointer !important;
}

html body .z-combobox .z-combobox-btn,
html body .z-bandbox .z-bandbox-btn,
html body .z-datebox .z-datebox-btn,
html body .z-timebox .z-timebox-btn,
html body .z-spinner .z-spinner-btn,
html body .z-doublespinner .z-doublespinner-btn,
html body .z-combobox-rounded .z-combobox-rounded-btn,
html body .z-bandbox-rounded .z-bandbox-rounded-btn,
html body .z-datebox-rounded .z-datebox-rounded-btn,
html body .z-timebox-rounded .z-timebox-rounded-btn,
html body .z-spinner-rounded .z-spinner-rounded-btn,
html body .z-doublespinner-rounded .z-doublespinner-rounded-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: stretch !important;
    flex: 0 0 24px !important;
    width: 24px !important;
    min-width: 24px !important;
    height: 26px !important;
    min-height: 26px !important;
    line-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    visibility: visible !important;
    opacity: 1 !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    overflow: hidden !important;
    background-color: #eef5ff !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    border: 1px solid #94a3b8 !important;
    border-left: 1px solid #cbd5e1 !important;
    border-radius: 0 6px 6px 0 !important;
}

html body .z-timebox .z-timebox-btn,
html body .z-spinner .z-spinner-btn,
html body .z-doublespinner .z-doublespinner-btn,
html body .z-timebox-rounded .z-timebox-rounded-btn,
html body .z-spinner-rounded .z-spinner-rounded-btn,
html body .z-doublespinner-rounded .z-doublespinner-rounded-btn {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: stretch !important;
}

/* Pertahankan tinggi 32px di dalam Toolbar & Filter Bar (mengalahkan aturan 26px di atas) */
html body .z-toolbar .z-combobox .z-combobox-inp,
html body .ais-toolbar .z-combobox .z-combobox-inp,
html body .z-toolbar .z-bandbox .z-bandbox-inp,
html body .ais-toolbar .z-bandbox .z-bandbox-inp,
html body .z-toolbar .z-datebox .z-datebox-inp,
html body .ais-toolbar .z-datebox .z-datebox-inp,
html body .z-toolbar .z-timebox .z-timebox-inp,
html body .ais-toolbar .z-timebox .z-timebox-inp,
html body .z-toolbar .z-spinner .z-spinner-inp,
html body .ais-toolbar .z-spinner .z-spinner-inp,
html body .z-toolbar .z-doublespinner .z-doublespinner-inp,
html body .ais-toolbar .z-doublespinner .z-doublespinner-inp,
html body .ais-rekap-filter-bar .z-combobox .z-combobox-inp,
html body .ais-rekap-filter-item .z-combobox .z-combobox-inp,
html body .ais-rekap-filter-bar .z-datebox .z-datebox-inp,
html body .ais-rekap-filter-item .z-datebox .z-datebox-inp,
html body .elearning-left-filter-grid .z-combobox.elearning-left-filter-ta .z-combobox-inp,
html body .z-combobox.elearning-periode-combo .z-combobox-inp {
    height: 32px !important;
    min-height: 32px !important;
    line-height: 28px !important;
}

html body .z-toolbar .z-combobox .z-combobox-btn,
html body .ais-toolbar .z-combobox .z-combobox-btn,
html body .z-toolbar .z-bandbox .z-bandbox-btn,
html body .ais-toolbar .z-bandbox .z-bandbox-btn,
html body .z-toolbar .z-datebox .z-datebox-btn,
html body .ais-toolbar .z-datebox .z-datebox-btn,
html body .z-toolbar .z-timebox .z-timebox-btn,
html body .ais-toolbar .z-timebox .z-timebox-btn,
html body .z-toolbar .z-spinner .z-spinner-btn,
html body .ais-toolbar .z-spinner .z-spinner-btn,
html body .z-toolbar .z-doublespinner .z-doublespinner-btn,
html body .ais-toolbar .z-doublespinner .z-doublespinner-btn,
html body .ais-rekap-filter-bar .z-combobox .z-combobox-btn,
html body .ais-rekap-filter-item .z-combobox .z-combobox-btn,
html body .ais-rekap-filter-bar .z-datebox .z-datebox-btn,
html body .ais-rekap-filter-item .z-datebox .z-datebox-btn,
html body .elearning-left-filter-grid .z-combobox.elearning-left-filter-ta .z-combobox-btn,
html body .z-combobox.elearning-periode-combo .z-combobox-btn {
    flex: 0 0 26px !important;
    width: 26px !important;
    min-width: 26px !important;
    height: 32px !important;
    min-height: 32px !important;
    line-height: 30px !important;
}

/* Pertahankan tinggi kompak 22px khusus header kolom penilaian (.ranah-cell) */
html body .ranah-cell .z-combobox .z-combobox-inp {
    height: 22px !important;
    min-height: 22px !important;
    line-height: 18px !important;
}
html body .ranah-cell .z-combobox .z-combobox-btn {
    flex: 0 0 18px !important;
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 22px !important;
    min-height: 22px !important;
}

/* Ikon Jam (Clock) di sisi kiri dalam input Timebox agar identitasnya sebagai Time Picker sangat jelas */
html body .z-timebox .z-timebox-inp,
html body .z-timebox-rounded .z-timebox-rounded-inp {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%232563eb' d='M8 3.5a.5.5 0 0 0-1 0V8a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 7.71V3.5z'/%3E%3Cpath fill='%231e40af' d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: left 7px center !important;
    background-size: 13px 13px !important;
    padding-left: 25px !important;
}

/* 1. Combobox: Panah Dropdown Tegas (termasuk hover/over/clk) */
html body .z-combobox .z-combobox-btn,
html body .z-combobox .z-combobox-btn:hover,
html body .z-combobox .z-combobox-btn-over,
html body .z-combobox .z-combobox-btn-clk,
html body .z-combobox-rounded .z-combobox-rounded-btn,
html body .z-combobox-rounded .z-combobox-rounded-btn:hover,
html body .z-combobox-rounded .z-combobox-rounded-btn-over,
html body .z-combobox-rounded .z-combobox-rounded-btn-clk,
html body .z-toolbar .z-combobox-btn,
html body .ais-toolbar .z-combobox-btn,
html body .ais-rekap-filter-bar .z-combobox .z-combobox-btn,
html body .ais-rekap-filter-item .z-combobox .z-combobox-btn,
html body .ranah-cell .z-combobox-btn,
html body .ecampus-inline-filter .z-combobox-btn,
html body .ecampus-login-tgl .z-combobox-btn {
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 13px 13px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%230f172a' d='M2.8 5.3a1.1 1.1 0 0 1 1.56 0L8 8.94l3.64-3.64a1.1 1.1 0 1 1 1.56 1.56l-4.42 4.42a1.1 1.1 0 0 1-1.56 0L2.8 6.86a1.1 1.1 0 0 1 0-1.56z'/%3E%3C/svg%3E") !important;
}

/* 2. Bandbox: Ikon Lup Pencarian / Lookup Tegas (termasuk hover/over/clk) */
html body .z-bandbox .z-bandbox-btn,
html body .z-bandbox .z-bandbox-btn:hover,
html body .z-bandbox .z-bandbox-btn-over,
html body .z-bandbox .z-bandbox-btn-clk,
html body .z-bandbox-rounded .z-bandbox-rounded-btn,
html body .z-bandbox-rounded .z-bandbox-rounded-btn:hover,
html body .z-bandbox-rounded .z-bandbox-rounded-btn-over,
html body .z-bandbox-rounded .z-bandbox-rounded-btn-clk,
html body .z-toolbar .z-bandbox-btn,
html body .ais-toolbar .z-bandbox-btn,
html body .ecampus-inline-filter .z-bandbox-btn {
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 13px 13px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%230f172a' d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E") !important;
}

/* 3. Datebox: Ikon Kalender Tegas (termasuk hover/over/clk) */
html body .z-datebox .z-datebox-btn,
html body .z-datebox .z-datebox-btn:hover,
html body .z-datebox .z-datebox-btn-over,
html body .z-datebox .z-datebox-btn-clk,
html body .z-datebox-rounded .z-datebox-rounded-btn,
html body .z-datebox-rounded .z-datebox-rounded-btn:hover,
html body .z-datebox-rounded .z-datebox-rounded-btn-over,
html body .z-datebox-rounded .z-datebox-rounded-btn-clk,
html body .z-toolbar .z-datebox-btn,
html body .ais-toolbar .z-datebox-btn,
html body .ais-rekap-filter-bar .z-datebox .z-datebox-btn,
html body .ais-rekap-filter-item .z-datebox .z-datebox-btn {
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 14px 14px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%231e40af' d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 5v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V5H1zm2.5 2h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5zm4 0h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5zm4 0h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5zm-8 3h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5zm4 0h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5zm4 0h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5z'/%3E%3C/svg%3E") !important;
}

/* 4. Timebox, Spinner, Doublespinner: Ikon Stepper Atas-Bawah Tegas */
html body .z-timebox .z-timebox-btn,
html body .z-timebox-rounded .z-timebox-rounded-btn,
html body .z-spinner .z-spinner-btn,
html body .z-doublespinner .z-doublespinner-btn,
html body .z-spinner-rounded .z-spinner-rounded-btn,
html body .z-doublespinner-rounded .z-doublespinner-rounded-btn {
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 12px 14px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%230f172a' d='M8 2.2l4.2 4.6H3.8L8 2.2zm0 11.6L3.8 9.2h8.4L8 13.8z'/%3E%3C/svg%3E") !important;
}

html body .z-timebox .z-timebox-btn:has(.z-timebox-btn-upper),
html body .z-timebox-rounded .z-timebox-rounded-btn:has(.z-timebox-rounded-btn-upper),
html body .z-spinner .z-spinner-btn:has(.z-spinner-btn-upper),
html body .z-doublespinner .z-doublespinner-btn:has(.z-doublespinner-btn-upper),
html body .z-spinner-rounded .z-spinner-rounded-btn:has(.z-spinner-rounded-btn-upper),
html body .z-doublespinner-rounded .z-doublespinner-rounded-btn:has(.z-doublespinner-rounded-btn-upper) {
    background-image: none !important;
}

html body .z-timebox .z-timebox-btn-upper,
html body .z-timebox .z-timebox-btn-upper:hover,
html body .z-timebox .z-timebox-btn-over .z-timebox-btn-upper,
html body .z-timebox .z-timebox-btn-upper-over,
html body .z-timebox .z-timebox-btn-upper-clk,
html body .z-timebox-rounded .z-timebox-rounded-btn-upper,
html body .z-spinner .z-spinner-btn-upper,
html body .z-spinner .z-spinner-btn-upper:hover,
html body .z-spinner .z-spinner-btn-over .z-spinner-btn-upper,
html body .z-spinner .z-spinner-btn-upper-over,
html body .z-spinner .z-spinner-btn-upper-clk,
html body .z-doublespinner .z-doublespinner-btn-upper,
html body .z-doublespinner .z-doublespinner-btn-upper:hover,
html body .z-doublespinner .z-doublespinner-btn-over .z-doublespinner-btn-upper,
html body .z-doublespinner .z-doublespinner-btn-upper-over,
html body .z-doublespinner .z-doublespinner-btn-upper-clk,
html body .z-spinner-rounded .z-spinner-rounded-btn-upper,
html body .z-doublespinner-rounded .z-doublespinner-rounded-btn-upper {
    display: block !important;
    flex: 1 1 50% !important;
    width: 100% !important;
    height: 50% !important;
    min-height: 11px !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    border-bottom: 1px solid #cbd5e1 !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 9px 9px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%230f172a' d='M8 3.5l4.8 5.5H3.2L8 3.5z'/%3E%3C/svg%3E") !important;
}

html body .z-timebox .z-timebox-btn-lower,
html body .z-timebox .z-timebox-btn-lower:hover,
html body .z-timebox .z-timebox-btn-over .z-timebox-btn-lower,
html body .z-timebox .z-timebox-btn-lower-over,
html body .z-timebox .z-timebox-btn-lower-clk,
html body .z-timebox-rounded .z-timebox-rounded-btn-lower,
html body .z-spinner .z-spinner-btn-lower,
html body .z-spinner .z-spinner-btn-lower:hover,
html body .z-spinner .z-spinner-btn-over .z-spinner-btn-lower,
html body .z-spinner .z-spinner-btn-lower-over,
html body .z-spinner .z-spinner-btn-lower-clk,
html body .z-doublespinner .z-doublespinner-btn-lower,
html body .z-doublespinner .z-doublespinner-btn-lower:hover,
html body .z-doublespinner .z-doublespinner-btn-over .z-doublespinner-btn-lower,
html body .z-doublespinner .z-doublespinner-btn-lower-over,
html body .z-doublespinner .z-doublespinner-btn-lower-clk,
html body .z-spinner-rounded .z-spinner-rounded-btn-lower,
html body .z-doublespinner-rounded .z-doublespinner-rounded-btn-lower {
    display: block !important;
    flex: 1 1 50% !important;
    width: 100% !important;
    height: 50% !important;
    min-height: 11px !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 9px 9px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%230f172a' d='M8 12.5L3.2 7h9.6L8 12.5z'/%3E%3C/svg%3E") !important;
}

html body .z-combobox .z-combobox-btn:hover,
html body .z-bandbox .z-bandbox-btn:hover,
html body .z-datebox .z-datebox-btn:hover,
html body .z-timebox .z-timebox-btn:hover,
html body .z-spinner .z-spinner-btn:hover,
html body .z-doublespinner .z-doublespinner-btn:hover,
html body .z-combobox .z-combobox-btn-over,
html body .z-bandbox .z-bandbox-btn-over,
html body .z-datebox .z-datebox-btn-over,
html body .z-timebox .z-timebox-btn-over,
html body .z-spinner .z-spinner-btn-over,
html body .z-doublespinner .z-doublespinner-btn-over,
html body .z-timebox .z-timebox-btn-upper:hover,
html body .z-timebox .z-timebox-btn-lower:hover,
html body .z-spinner .z-spinner-btn-upper:hover,
html body .z-spinner .z-spinner-btn-lower:hover,
html body .z-doublespinner .z-doublespinner-btn-upper:hover,
html body .z-doublespinner .z-doublespinner-btn-lower:hover {
    background-color: #dbeafe !important;
    border-color: #3b82f6 !important;
}

/* ============================================================================
   12. NORMALISASI TOMBOL ZKOSS (span.z-button / .z-button-cm) & FOOTER MODAL
       Mencegah kotak ganda (button di dalam button) dan teks putih di atas
       kotak putih pada seluruh modal dialog ZKoss.
   ============================================================================ */
html body .ais-modal-footer-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

html body .z-button .z-button-tl,
html body .z-button .z-button-tm,
html body .z-button .z-button-tr,
html body .z-button .z-button-cl,
html body .z-button .z-button-cr,
html body .z-button .z-button-bl,
html body .z-button .z-button-bm,
html body .z-button .z-button-br {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
}

html body .z-button .z-button-cm > button,
html body .z-button .z-button-cm button.z-button,
html body span.z-button button {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    font: inherit !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

/* ============================================================================
   13. ATURAN MUTLAK 56: SELURUH MENU DI DALAM KEBAB WAJIB RATA KIRI (ALIGN LEFT)
       Menjamin seluruh item Toolbarbutton maupun Checkbox di dalam popup kebab
       (.z-popup.ais-row-popup) dan Menupopup selalu rata kiri (flex-start / left).
   ============================================================================ */
html body .z-popup.ais-row-popup,
html body .z-popup.ais-row-popup .z-popup-inner,
html body .z-popup.ais-row-popup .z-popup-cnt,
html body .z-popup.ais-row-popup .ais-row-popup-content,
html body .z-popup.ais-row-popup .z-vbox,
html body .z-popup.ais-row-popup .z-vbox td,
html body .z-popup.ais-row-popup .z-vbox tr {
    text-align: left !important;
}

html body .z-popup.ais-row-popup .ais-row-popup-content,
html body .z-popup.ais-row-popup .z-vbox {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
}

html body .z-popup.ais-row-popup .ais-row-popup-item:not([style*="display: none"]):not([style*="display:none"]),
html body .z-popup.ais-row-popup .z-toolbarbutton:not([style*="display: none"]):not([style*="display:none"]) {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 34px !important;
    max-height: none !important;
    text-align: left !important;
    justify-content: flex-start !important;
}

html body .z-popup.ais-row-popup .ais-row-popup-item .z-toolbarbutton-body,
html body .z-popup.ais-row-popup .z-toolbarbutton .z-toolbarbutton-body {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    text-align: left !important;
    justify-content: flex-start !important;
}

html body .z-popup.ais-row-popup .ais-row-popup-item .z-toolbarbutton-cnt,
html body .z-popup.ais-row-popup .z-toolbarbutton .z-toolbarbutton-cnt {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    width: 100% !important;
    min-height: 34px !important;
    height: auto !important;
    padding: 6px 12px !important;
    gap: 8px !important;
    box-sizing: border-box !important;
}

html body .z-popup.ais-row-popup .z-checkbox:not([style*="display: none"]):not([style*="display:none"]) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    width: 100% !important;
    min-height: 34px !important;
    padding: 6px 12px !important;
    gap: 8px !important;
    box-sizing: border-box !important;
}

html body .z-popup.ais-row-popup .z-checkbox .z-checkbox-cnt {
    text-align: left !important;
}

/* ============================================================================
 * MOBILE HEADER CLEANUP & RESPONSIVE DASHBOARD CONTAINMENT (<= 768px)
 * Dimuat paling akhir setelah seluruh CSS tema tenant (biru_tua.css, hijau.css, dsb.)
 * sehingga menjamin:
 * 1. Tidak ada kotak putih (`rgba(255,255,255,0.4)` dari `tr.z-row td.z-row-inner`)
 *    di bawah tombol [☰ Menu] pada header utama mobile.
 * 2. Seluruh dasbor yang ditampilkan di versi mobile bersifat relative/responsive
 *    terhadap ukuran layar mobile tanpa melewati batas kanan viewport.
 * ============================================================================ */
@media only screen and (max-width: 768px) {
    html body .headerHbox tr.z-row,
    html body .headerHbox td.z-row-inner,
    html body .headerHbox .z-cell,
    html body .headerHbox .z-row-cnt,
    html body .main-responsive-header tr.z-row,
    html body .main-responsive-header td.z-row-inner,
    html body .main-responsive-header .z-cell,
    html body .main-responsive-header .z-row-cnt,
    html body .gridHeader tr.z-row,
    html body .gridHeader td.z-row-inner,
    html body .gridHeader .z-cell,
    html body .gridHeader .z-row-cnt,
    html body .main-responsive-header-grid tr.z-row,
    html body .main-responsive-header-grid td.z-row-inner,
    html body .main-responsive-header-grid .z-cell,
    html body .main-responsive-header-grid .z-row-cnt,
    html body tr.z-row.main-responsive-module-row,
    html body .main-responsive-module-row,
    html body tr.z-row.main-responsive-module-row > td.z-row-inner,
    html body .main-responsive-module-row > td.z-row-inner,
    html body .main-responsive-module-row > td > div.z-row-cnt {
        background: transparent !important;
        background-color: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    html body tr.z-row.main-responsive-module-row > td:not(:first-child),
    html body tr.z-row.main-responsive-module-row > td.z-row-inner:nth-child(n+2),
    html body .main-responsive-module-row > td:not(:first-child),
    html body .main-responsive-module-row > td.z-row-inner:nth-child(n+2),
    html body tr.z-row.main-responsive-module-row > td.z-row-inner:empty,
    html body .main-responsive-module-row > td.z-row-inner:empty {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
    }

    html body .main-responsive-module-strip > table > tbody > tr > td.z-hbox-sep,
    html body .main-responsive-module-strip > tbody > tr > td.z-hbox-sep,
    html body .main-responsive-module-strip > table > tbody > tr > td:empty,
    html body .main-responsive-module-strip > tbody > tr > td:empty,
    html body .main-responsive-module-strip > table > tbody > tr > td:has(> .z-toolbarbutton[style*="display: none"]),
    html body .main-responsive-module-strip > table > tbody > tr > td:has(> .z-toolbarbutton[style*="display:none"]),
    html body .main-responsive-module-strip > tbody > tr > td:has(> .z-toolbarbutton[style*="display: none"]),
    html body .main-responsive-module-strip > tbody > tr > td:has(> .z-toolbarbutton[style*="display:none"]) {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        flex: 0 0 0px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    /* Kontainer dasbor relative / responsive mengikuti lebar viewport mobile */
    html body .main-responsive-tabpanels,
    html body .main-responsive-tabpanels .z-tabpanel,
    html body .main-responsive-tabpanels .z-tabpanel-cnt,
    html body .main-responsive-tabpanels .z-window,
    html body .main-responsive-tabpanels .z-window-embedded,
    html body .main-responsive-tabpanels .z-window-embedded-cnt,
    html body .main-responsive-tabpanels .z-window-Embedded-cnt,
    html body .main-responsive-tabpanels .z-borderlayout,
    html body .main-responsive-tabpanels .z-center,
    html body .main-responsive-tabpanels .z-center-body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    html body .main-responsive-tabpanels table.z-vbox,
    html body .z-tabpanel table.z-vbox,
    html body .z-center-body table.z-vbox,
    html body .z-window-modal table.z-vbox,
    html body .z-panelchildren table.z-vbox,
    html body .z-groupbox-cnt table.z-vbox {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed !important;
        box-sizing: border-box !important;
    }

    html body .main-responsive-tabpanels table.z-vbox > tbody > tr > td,
    html body .z-tabpanel table.z-vbox > tbody > tr > td,
    html body .z-center-body table.z-vbox > tbody > tr > td,
    html body .z-panelchildren table.z-vbox > tbody > tr > td,
    html body .z-groupbox-cnt table.z-vbox > tbody > tr > td {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    html body .ais-ce-portallayout,
    html body .z-portallayout {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        gap: 10px !important;
    }

    html body .ais-ce-portalchildren,
    html body .z-portalchildren {
        display: block !important;
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 4px 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    html body .main-responsive-tabpanels .z-panel,
    html body .main-responsive-tabpanels .z-panel-body,
    html body .main-responsive-tabpanels .z-panelchildren,
    html body .main-responsive-tabpanels .z-groupbox,
    html body .main-responsive-tabpanels .z-groupbox-3d,
    html body .main-responsive-tabpanels .z-groupbox-cnt,
    html body .main-responsive-tabpanels .z-groupbox-3d-cnt,
    html body .ais-dashboard-studi-container,
    html body .ais-dashboard-studi-header-card,
    html body .ais-dashboard-hero-banner,
    html body .ais-dashboard-modern-groupbox,
    html body .ais-dashboard-portal-panel,
    html body .ais-dashboard-kpi-card,
    html body .ais-dashboard-header-wrap,
    html body .ais-dashboard-narrative-grid {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    html body .main-responsive-tabpanels div[style*="min-width:260px"],
    html body .main-responsive-tabpanels div[style*="min-width: 260px"],
    html body .main-responsive-tabpanels div[style*="min-width:220px"],
    html body .main-responsive-tabpanels div[style*="min-width: 220px"],
    html body .main-responsive-tabpanels div[style*="min-width:210px"],
    html body .main-responsive-tabpanels div[style*="min-width: 210px"],
    html body .main-responsive-tabpanels div[style*="min-width:240px"],
    html body .main-responsive-tabpanels div[style*="min-width: 240px"],
    html body .main-responsive-tabpanels div[style*="min-width:280px"],
    html body .main-responsive-tabpanels div[style*="min-width: 280px"],
    html body .main-responsive-tabpanels div[style*="min-width:300px"],
    html body .main-responsive-tabpanels div[style*="min-width: 300px"],
    html body .main-responsive-tabpanels div[style*="min-width:360px"],
    html body .main-responsive-tabpanels div[style*="min-width: 360px"] {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}