/* ==========================================================================
   Modal Konfirmasi Nisea (.ns-modal-confirm)
   Modal generik untuk konfirmasi aksi (hapus/void/dll): putih polos, tanpa
   header & footer, border dark tebal + shadow solid neobrutalism (SAMA
   persis recipe .ns-modal/.app-panel -- disatukan 2026-08-27, sebelumnya
   cuma modifier opsional ".ns-modal-confirm-neo" yang dipisah di nisea.css;
   sekarang default-nya sendiri sudah neo, modifier itu jadi tidak perlu lagi
   dipasang di elemen baru), icon bulat border, 2 tombol stacked w-100.
   Dikendalikan lewat Component_Confirm() di assets/dist/js/modul/component.js.
   ========================================================================== */

.ns-modal-confirm.modal {
	/* Fix center vertikal Bootstrap .modal-dialog-centered di mobile — .modal
	   bawaan pakai height:100% yang di browser mobile bisa beda dari viewport
	   yang BENAR-BENAR kelihatan saat address bar sedang muncul/animasi. */
	height: 100vh;
	height: 100dvh;
}

.ns-modal-confirm .modal-dialog {
	max-width: 340px;
	/* Bootstrap cuma bikin .modal-dialog auto-margin (center horizontal) di
	   breakpoint >=576px (margin:1.75rem auto); di bawah itu marginnya
	   0.5rem rata (BUKAN auto), jadi begitu ada max-width custom yang lebih
	   sempit dari layar (kasus kita, 340px), sisa ruangnya numpuk semua di
	   kanan — dialog kelihatan mepet ke kiri di HP. Dipaksa auto di sini
	   supaya center horizontal di lebar layar berapa pun. */
	margin-left: auto;
	margin-right: auto;
}

.ns-modal-confirm .modal-content {
	border: 2.5px solid var(--ns-color-dark);
	border-radius: var(--ns-radius-btn);
	box-shadow: var(--ns-shadow-solid);
	overflow: hidden;
	font-family: var(--ns-font-sans);
}

.ns-modal-confirm .modal-body {
	padding: 28px 24px 24px;
	background: #fff;
	border: none;
	text-align: center;
}

.ns-modal-confirm-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	font-size: 26px;
	margin-bottom: 14px;
	background: #fff;
	border: 2px solid var(--ns-color-dark);
}

.ns-modal-confirm-icon.is-primary { color: var(--ns-color-primary); }
.ns-modal-confirm-icon.is-danger  { color: var(--ns-color-danger); }
.ns-modal-confirm-icon.is-warning { color: var(--ns-color-warning); }
.ns-modal-confirm-icon.is-info    { color: var(--ns-color-info-dark); }
.ns-modal-confirm-icon.is-success { color: var(--ns-color-success); }

.ns-modal-confirm-title {
	color: var(--ns-color-dark);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 2px;
}

.ns-modal-confirm-desc {
	color: rgba(4, 11, 24, .55);
	font-size: 12.5px;
	line-height: 1.5;
	margin: 0 0 20px;
}

.ns-modal-confirm-desc:empty {
	display: none;
	margin: 0;
}

.ns-modal-confirm-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ns-modal-confirm-actions .ns-btn {
	width: 100%;
	height: 38px;
	font-size: 13px;
	border: 2px solid var(--ns-color-dark);
	box-shadow: none;
}

.ns-modal-confirm-actions .ns-btn-danger {
	background: var(--ns-color-danger);
}

.ns-modal-confirm-cancel {
	width: 100%;
	height: 38px;
	background: #fff;
	color: var(--ns-color-dark);
	border: 2px solid var(--ns-color-dark);
	border-radius: var(--ns-radius-btn);
	font-size: 13px;
	font-weight: 600;
	box-shadow: none;
	transition: background-color .15s ease;
}

.ns-modal-confirm-cancel:hover,
.ns-modal-confirm-cancel:focus {
	background-color: var(--ns-color-icy);
	color: var(--ns-color-dark);
}