/**
 * nisea.css — Global design tokens & utilities (Nisea design system)
 *
 * Fondasi CSS global (dimuat di application/views/include/header.php, jadi
 * berlaku di SEMUA halaman termasuk POS). Semua class baru sengaja diberi
 * prefix "ns-" supaya TIDAK menimpa class bawaan Bootstrap/AdminLTE yang
 * sudah dipakai luas di app ini (.btn-primary, .rounded-lg, .shadow-lg, dst).
 *
 * Belum ada retrofit ke view/komponen manapun di tahap ini — token & utility
 * di file ini baru dipakai bertahap di sesi-sesi berikutnya.
 */

@import url("../../fonts/css/elmsSans.css");
@import url("../../fonts/css/figtree.css");

:root {
	/* ===== Warna "swappable" — bisa diganti per-outlet/client nanti ===== */
	--ns-color-primary: #132E63;
	--ns-color-primary-light: #2148A0;
	--ns-color-primary-dark: #0B1F45;
	--ns-color-info: #4CB1FF;
	--ns-color-info-dark: #1E93E0;
	--ns-color-accent: #F29326;
	--ns-color-accent-dark: #CC7710;
	--ns-color-light: #2596BE;
	--ns-color-light-dark: #1B7495;
	--ns-color-success: #16A34A;
	--ns-color-success-dark: #15803D;
	--ns-color-danger: #DC2626;
	--ns-color-danger-dark: #B91C1C;
	--ns-color-warning: #F59E0B;
	--ns-color-warning-dark: #B45309;
	--ns-color-dark: #040B18;
	--ns-color-icy: #E9F5FC;

	/* ===== Warna brand Nisea tetap — dipakai eksplisit utk elemen branding, ===== */
	/* ===== BUKAN default aplikasi (menyusul arahan pemakaian selanjutnya)  ===== */
	--nisea-primary: #132E63;
	--nisea-info: #4CB1FF;
	--nisea-accent: #F29326;
	--nisea-light: #2596BE;

	/* ===== Radius & shadow ===== */
	/* Radius standar tunggal app-wide (2026-08-29): dulu ada --ns-radius-lg (12px)
	   terpisah utk modal/card, sekarang diratakan -- SEMUA elemen kotak (modal,
	   card, tombol, input, tabel, dst) pakai --ns-radius-btn ini. Lingkaran (50%)
	   dan pill (999px) TIDAK termasuk, itu bentuk yang disengaja bukan sekadar
	   radius sudut. */
	--ns-radius-btn: 8px;
	/* Radius kecil (2026-08-29) -- khusus elemen mini spt badge/chip (~20-24px
	   tinggi: .ns-badge, .ns-total-transaksi, chip select2 multiple). Radius
	   btn (8px) di elemen sekecil itu keliatan kelengkungannya kebesaran
	   dibanding proporsi elemen -- sama alasannya kenapa .ns-checkbox-info
	   (16px) pakai 4px, bukan 8px. */
	--ns-radius-sm: 4px;
	--ns-shadow-lg: 0 10px 25px -5px rgba(19, 46, 99, .18), 0 4px 10px -4px rgba(19, 46, 99, .12);
	/* Shadow neobrutalism (hard offset) -- recipe dipakai berulang di modal/panel
	   (.ns-modal, .app-panel, dst), diekstrak ke variabel biar satu sumber. */
	--ns-shadow-solid: 6px 6px 0 var(--ns-color-dark);

	/* ===== Font ===== */
	--ns-font-sans: 'Figtree', 'Elms Sans', 'Source Sans Pro', Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
	font-family: var(--ns-font-sans);
}

/* ============================================================
   UTILITIES (prefix ns- — tidak menimpa .rounded-lg/.shadow-lg bawaan Bootstrap)
   ============================================================ */

.ns-rounded-lg {
	border-radius: var(--ns-radius-btn);
}

.ns-shadow-lg {
	box-shadow: var(--ns-shadow-lg);
}

.ns-text-primary {
	color: var(--ns-color-primary) !important;
}

.ns-text-info {
	color: var(--ns-color-info) !important;
}

/* ============================================================
   STANDARISASI INPUT — text, number, textarea, select, select2
   AdminLTE bawaan set border-radius: 0 (kotak) di .form-control/
   .form-control-sm/.form-control-lg dan di select2-bootstrap4
   theme (.select2-selection). Disamakan ke var(--ns-radius-btn) --
   token radius tunggal app-wide, semua elemen rounded pakai nilai
   yang sama. Berlaku global (semua modul termasuk POS) — modul
   yang butuh radius beda silakan override lokal dengan !important
   seperti pola yang sudah ada.
   ============================================================ */

.form-control,
.form-control-sm,
.form-control-lg,
.select2-container--bootstrap4 .select2-selection {
	border-radius: var(--ns-radius-sm);
}

/* Ukuran diseragamkan (2026-08-29): SEMUA text/number/textarea/select ikut
   dimensi .form-control-sm (paling umum dipakai di app) -- .form-control
   polos & .form-control-lg (nyaris tak dipakai, cuma 3 baris di rental.php)
   diturunkan ke situ juga, biar tinggi baris form rata di semua halaman
   tanpa perlu ganti class di tiap view. */
.form-control,
.form-control-lg {
	height: calc(1.8rem + 0px);
	padding: 0.28rem 0.5rem;
	font-size: 0.87rem;
}

/* Fix teks/placeholder ketarik ke bawah (tidak center): browser vertical-
   center teks input berdasarkan content-box (tinggi dikurangi padding),
   BUKAN line-height (line-height terbukti tidak berpengaruh sama sekali ke
   posisi teks di <input>). Padding atas dikecilkan & bawah dibesarkan
   sedikit supaya area teksnya naik. Berlaku ke ketiga ukuran karena
   sekarang dimensinya disamakan (lihat blok di atas). */
.form-control,
.form-control-sm,
.form-control-lg {
	padding-top: 0.2rem;
	padding-bottom: 0.36rem;
}

/* Border neo-brutalism v2 (2026-08-29): percobaan pertama (2026-08-17,
   border 2px solid dark + fokus ganti warna di semua input) di-revert saat
   itu karena "too much" -- waktu itu tombol/badge/modal/tab masih default
   Bootstrap, jadi input yang sendirian neo-brutalism kerasa berat sebelah.
   Direvisit SETELAH tombol/badge/modal/tab ikut neo-brutalism (2026-08-28/
   29): dicoba lagi, sempat ditipiskan ke 1.5px tapi balik ke 2px penuh biar
   konsisten sama border tombol/badge/modal (semua 2px). Fokus TETAP tanpa
   glow/box-shadow tambahan, cuma warna border yang berubah. */
.form-control,
.form-control-sm,
.form-control-lg,
.select2-container--bootstrap4 .select2-selection {
	border: 2px solid var(--ns-color-dark);
}

.form-control:focus,
.form-control-sm:focus,
.form-control-lg:focus {
	border-color: var(--ns-color-info);
	box-shadow: none;
}

/* Readonly (2026-08-29, v2): sempat dikasih bg abu-abu #e9ecef biar beda
   dari input aktif, tapi kerasa gelap/berat digabung sama border 2px dark
   -- balik ke putih (sama seperti input normal), border tetap yang jadi
   penanda utama. */
.form-control[readonly] {
	background-color: #fff;
}

/* Addon input-group (2026-08-29) -- generalisasi dari yang sebelumnya cuma
   berlaku di dalam .ns-modal, sekarang berlaku global. Dipakai luas utk
   trigger popup pencarian (icon "..."/ellipsis di samping field kontak/
   barang/dst). Radius sudut dalam yang nempel ke input TETAP 0 -- itu
   sudah diatur otomatis oleh selector Bootstrap sendiri yang lebih
   spesifik (.input-group > .input-group-append > .input-group-text dkk),
   di sini cuma override radius default (utk sudut luar) + border supaya
   nyambung sama border 2px dark input di sebelahnya. Margin overlap
   dinaikkan dari -1px (bawaan Bootstrap, cocok utk border 1px) ke -2px
   supaya border dobel gak keliatan sebagai garis tipis nyempil di sambungan. */
.input-group-text {
	border: 2px solid var(--ns-color-dark);
	border-radius: var(--ns-radius-sm);
}

.input-group-prepend {
	margin-right: -2px;
}

.input-group-append {
	margin-left: -2px;
}

/* Trigger popup pencarian (2026-08-29) -- addon yang BENERAN diklik utk
   buka modal cari kontak/barang/referensi/dst, ditandai "role=button" di
   markup-nya (konvensi yang sudah konsisten dipakai di 85+ file, lihat
   pola "<div class='input-group-append' role='button'><div
   class='input-group-text'><i class='fa fa-ellipsis-h'></i></div></div>").
   Scoped ke [role="button"] SENGAJA supaya TIDAK ikut ke addon yang
   sekadar label/satuan statis (bukan tombol), yang tetap pakai gaya
   .input-group-text default abu-abu di atas. */
.input-group-append[role="button"] .input-group-text,
.input-group-prepend[role="button"] .input-group-text {
	background: var(--ns-color-info);
	color: #fff;
	cursor: pointer;
}

.input-group-append[role="button"] .input-group-text i,
.input-group-prepend[role="button"] .input-group-text i {
	color: #fff;
}

/* Separator dari-sampai date range (2026-08-29) -- "/" bergaya sama kayak
   tombol kalender di sebelahnya (kotak bg biru info, teks putih), bukan
   teks label abu-abu biasa. Modal filter yg makainya (lihat
   table-pembelian-tunai.js) sudah dilebarin ke ns-modal-md supaya 2 input
   tanggal + separator + tombol kalender gak keteker/terpotong.
   Markup-nya SENGAJA cuma pakai class "input-group-append" (samain persis
   dgn #dtglrange di kanan), BUKAN "input-group-prepend input-group-append"
   dobel -- kombo dobel itu bikin margin-right:-2px (dari .input-group-prepend)
   DAN margin-left:-2px (dari .input-group-append) sama-sama kepasang di
   elemen yg sama, jadi border kanan-kiri overlap gak simetris/rapih
   dibanding tombol kalender yg cuma overlap sebelah kiri. */
.input-daterange-sep .input-group-text {
	background: var(--ns-color-info);
	color: #fff;
	font-weight: 700;
	/* Font Awesome nge-reset line-height iconnya ke 1 (lihat .fa di
	   fontawesome-free), sedangkan teks "/" polos di sini masih pakai
	   line-height default Bootstrap .input-group-text (1.5) -- box-nya jadi
	   lebih tinggi drpd tombol kalender di sebelah kanan (yg isinya <i>
	   ikon) walau sama-sama .input-group-text. Disamakan manual ke 1. */
	line-height: 1;
}

/* ============================================================
   TOMBOL TIMBUL/GRADASI — .ns-btn
   Pola mengikuti gaya yang sudah ada di POS (pos-penjualan-tunai.css):
   filled gradient 135deg, tanpa border, teks putih, shadow lembut.
   ============================================================ */

.ns-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 34px;
	padding: 0 16px;
	border: none;
	border-radius: var(--ns-radius-btn);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	font-family: var(--ns-font-sans);
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--ns-shadow-lg);
	transition: opacity .15s ease, transform .05s ease;
}

.ns-btn:hover {
	opacity: .92;
}

.ns-btn:active {
	transform: translateY(1px);
}

.ns-btn:disabled,
.ns-btn.disabled {
	opacity: .4;
	pointer-events: none;
}

/* Ditukar (2026-08-17, permintaan eksplisit): "primary" .ns-btn sekarang tint
   sky blue (var(--ns-color-info)), "info" jadi navy (var(--ns-color-primary))
   -- kebalikan dari nama tokennya sendiri. Cuma di komponen .ns-btn ini,
   TIDAK mengubah token --ns-color-primary/--ns-color-info global (dipakai
   luas di luar tombol -- border, badge, teks, dst -- swap di situ akan
   mengubah banyak hal yg tidak diminta). */
.ns-btn-primary {
	background: linear-gradient(135deg, var(--ns-color-info), var(--ns-color-info-dark));
}

.ns-btn-info {
	background: linear-gradient(135deg, var(--ns-color-primary), var(--ns-color-primary-dark));
}

.ns-btn-accent {
	background: linear-gradient(135deg, var(--ns-color-accent), var(--ns-color-accent-dark));
}

.ns-btn-light {
	background: linear-gradient(135deg, var(--ns-color-light), var(--ns-color-light-dark));
}

.ns-btn-success {
	background: linear-gradient(135deg, var(--ns-color-success), var(--ns-color-success-dark));
}

.ns-btn-danger {
	background: linear-gradient(135deg, var(--ns-color-danger), var(--ns-color-danger-dark));
}

.ns-btn-warning {
	background: linear-gradient(135deg, var(--ns-color-warning), var(--ns-color-warning-dark));
}

/* ============================================================
   LOADER — "nisea loading state" bersama (kotak lompat neo-brutalism),
   dipakai lintas halaman (login, dasbor shell, portal, pilih-perusahaan).
   Sumber asal: dasbor.css, disalin ke sini supaya jadi komponen global
   tanpa menyentuh dasbor.css.
   Markup:
   <div class="loader-wrap d-none no-print">
     <div class="ns-loading-dots"><span></span><span></span><span></span><span></span></div>
   </div>

   2026-08-31: ganti dari dots bulat + gelombang halus (soft UI) ke kotak
   solid + border/shadow tegas (neo-brutalism, konsisten sama .ns-badge/
   .ns-total-transaksi). Background overlay-nya juga diganti dari navy
   transparan ke --ns-color-icy SOLID -- tapi cuma utk .loader-wrap yang
   isinya .ns-loading-dots (lewat :has()), krn .loader-wrap yang sama juga
   dipakai loader LAMA (.loader > .box-1.box) di puluhan halaman lain yang
   TIDAK ikut di-retrofit di sini -- jangan disatukan tanpa sengaja.
   ============================================================ */

.loader-wrap {
	background: rgba(19, 46, 99, 0.72);
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99999;
}

.loader-wrap:has(.ns-loading-dots) {
	background: var(--ns-color-icy);
}

.loader-wrap .ns-loading-dots {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.ns-loading-dots {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 16px;
	height: 34px;
}

.ns-loading-dots span {
	display: inline-block;
	width: 16px;
	height: 16px;
	border-radius: var(--ns-radius-sm);
	background-color: var(--ns-color-info);
	border: 2px solid var(--ns-color-dark);
	box-shadow: 3px 3px 0 var(--ns-color-dark);
	animation: ns-loading-dots-wave 0.9s infinite;
}

.ns-loading-dots span:nth-child(1) { animation-delay: 0s; }
.ns-loading-dots span:nth-child(2) { animation-delay: 0.12s; }
.ns-loading-dots span:nth-child(3) { animation-delay: 0.24s; }
.ns-loading-dots span:nth-child(4) { animation-delay: 0.36s; }

/* timing-function di-set per keyframe (step-end) supaya gerakannya patah/
   instan antar posisi, bukan melengkung halus ala ease-in-out. */
@keyframes ns-loading-dots-wave {
	0% { transform: translateY(0); animation-timing-function: step-end; }
	30% { transform: translateY(-14px); animation-timing-function: step-end; }
	60% { transform: translateY(0); animation-timing-function: step-end; }
	100% { transform: translateY(0); }
}

/* Loader inline (2026-09-08) — variant .loader-wrap yang di-scope ke SATU
   panel/container (bukan full-layar viewport) buat AJAX yang bisa lambat
   tapi tidak perlu ngeblok seluruh halaman (mis. Statistik & Laporan di
   Portal). Parent WAJIB `position: relative` (diset per-halaman, bukan di
   sini, supaya tidak nyenggol container lain yang belum butuh). Resep
   visual sama persis .loader-wrap:has(.ns-loading-dots) (bg icy + kotak
   lompat), cuma positioning-nya absolute ke parent, bukan fixed ke viewport.
   Markup:
   <div class="ns-loading-inline d-none">
     <div class="ns-loading-dots"><span></span><span></span><span></span><span></span></div>
   </div> */
.ns-loading-inline {
	position: absolute;
	inset: 0;
	background: var(--ns-color-icy);
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: inherit;
}

/* Loader overlay + kotak pesan (2026-09-24) — navy transparan full-layar,
   kotak putih neo-brutalism berisi .ns-loading-dots + teks proses. Dipindah
   dari modal-pos-printer.php (.pospr-loading-*) supaya bisa dipakai juga
   SEBELUM konten modal Setup Printer ter-load (loading "Membuka setup
   printer..." dari POS & POS Service) -- tampilan buka/simpan/pairing sama.
   Tampilkan dengan class .show.
   Markup:
   <div class="ns-loading-overlay" aria-hidden="true">
     <div class="ns-loading-overlay-box">
       <div class="ns-loading-dots"><span></span><span></span><span></span><span></span></div>
       <p>Memproses...</p>
     </div>
   </div> */
.ns-loading-overlay {
	position: fixed;
	inset: 0;
	z-index: 200020;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(19, 46, 99, 0.72);
	backdrop-filter: blur(2px);
}
.ns-loading-overlay.show { display: flex; }
.ns-loading-overlay-box {
	background: #fff;
	border: 2px solid var(--ns-color-dark);
	border-radius: var(--ns-radius-btn);
	padding: 28px 32px;
	min-width: 220px;
	text-align: center;
	box-shadow: var(--ns-shadow-solid);
}
.ns-loading-overlay-box .ns-loading-dots {
	margin-bottom: 14px;
}
.ns-loading-overlay-box p {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--ns-color-primary);
}

/* Popup SweetAlert neo-brutalism (2026-09-24) — resep sama popup Catatan Item
   & Simpan Order POS: border 3px solid dark, shadow solid, header flat berwarna
   tanpa ikon bulat, tombol flat border-2px tanpa gradient. Dipakai lewat
   customClass Swal (popup/actions/confirmButton/cancelButton) + markup html:
   <div class="ns-swal-head [is-danger]"><h3>Judul</h3><p>Sub</p></div>
   <div class="ns-swal-body">...</div>
   atau utk alert singkat:
   <div class="ns-swal-body"><div class="ns-swal-msg"><span class="ns-swal-icon [is-danger]"><i ...></i></span><p>Pesan</p></div></div>
   Varian tombol confirm = class terpisah (Swal lama tdk split spasi di customClass). */
.ns-swal-popup {
	border-radius: var(--ns-radius-btn) !important;
	border: 3px solid var(--ns-color-dark) !important;
	padding: 0 !important;
	max-width: 380px !important;
	box-shadow: var(--ns-shadow-solid) !important;
	overflow: hidden;
	font-family: var(--ns-font-sans);
}
.ns-swal-popup .swal2-content,
.ns-swal-popup .swal2-html-container {
	margin: 0 !important;
	padding: 0 !important;
}
.ns-swal-head {
	text-align: left;
	padding: 16px 20px;
	background: var(--ns-color-info);
}
.ns-swal-head.is-danger { background: var(--ns-color-danger); }
.ns-swal-head h3 {
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	margin: 0 0 2px;
}
.ns-swal-head p {
	font-size: 11px;
	color: rgba(255, 255, 255, .85);
	margin: 0;
}
.ns-swal-body {
	padding: 16px 20px;
	text-align: left;
	background: #fff;
}
.ns-swal-label {
	font-size: 11px;
	font-weight: 700;
	color: #6c757d;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin: 0 0 8px;
}
.ns-swal-msg {
	display: flex;
	align-items: center;
	gap: 14px;
}
.ns-swal-msg p {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--ns-color-dark);
	line-height: 1.4;
}
.ns-swal-icon {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--ns-color-dark);
	border-radius: var(--ns-radius-btn);
	box-shadow: 3px 3px 0 var(--ns-color-dark);
	background: var(--ns-color-info);
	color: #fff;
	font-size: 16px;
}
.ns-swal-icon.is-danger { background: var(--ns-color-danger); }
.ns-swal-icon.is-warning { background: var(--ns-color-warning); }
.ns-swal-actions {
	gap: 10px !important;
	margin: 0 !important;
	width: 100% !important;
	padding: 12px 20px !important;
	background: var(--ns-color-icy) !important;
	border-top: 2px solid var(--ns-color-dark) !important;
	flex-wrap: nowrap !important;
}
.ns-swal-confirm,
.ns-swal-confirm-danger,
.ns-swal-confirm-success,
.ns-swal-cancel {
	border: 2px solid var(--ns-color-dark) !important;
	border-radius: var(--ns-radius-btn) !important;
	padding: 11px 20px !important;
	margin: 0 !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	cursor: pointer;
	box-shadow: none !important;
	transition: filter .12s ease, transform .12s ease;
}
.ns-swal-confirm,
.ns-swal-confirm-danger,
.ns-swal-confirm-success {
	flex: 1.4;
	color: #fff !important;
	background: var(--ns-color-info) !important;
}
.ns-swal-confirm-danger { background: var(--ns-color-danger) !important; }
.ns-swal-confirm-success { background: var(--ns-color-success) !important; }
.ns-swal-confirm:hover,
.ns-swal-confirm-danger:hover,
.ns-swal-confirm-success:hover { filter: brightness(.95); }
.ns-swal-cancel {
	flex: 1;
	background: #fff !important;
	color: var(--ns-color-dark) !important;
}
.ns-swal-cancel:hover { background: #eef1f6 !important; }
.ns-swal-confirm:active,
.ns-swal-confirm-danger:active,
.ns-swal-confirm-success:active,
.ns-swal-cancel:active { transform: translateY(1px); }

/* Baris opsi (label + checkbox) di dalam popup */
.ns-swal-opt {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	padding: 10px 12px;
	margin: 0;
	border: 2px solid var(--ns-color-dark);
	border-radius: var(--ns-radius-sm);
	background: #fff;
	transition: background .12s ease;
}
.ns-swal-opt + .ns-swal-opt { margin-top: 8px; }
.ns-swal-opt:hover { background: var(--ns-color-icy); }
.ns-swal-opt span {
	font-size: 13px;
	font-weight: 700;
	color: var(--ns-color-dark);
}
.ns-swal-opt.is-off {
	opacity: .45;
	pointer-events: none;
}

/* Checkbox neo-brutalism — fill sky saat dicentang, ikon centang PUTIH
   (accent-color bawaan browser milih warna centang sendiri & jadi gelap
   di atas sky, jadi digambar manual lewat SVG). */
.ns-check {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	margin: 0;
	flex-shrink: 0;
	border: 2px solid var(--ns-color-dark);
	border-radius: 4px;
	background-color: #fff;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 12px 12px;
	cursor: pointer;
	transition: background-color .12s ease;
}
.ns-check:checked {
	background-color: var(--ns-color-info);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
}
.ns-check:disabled {
	opacity: .45;
	cursor: not-allowed;
}
.ns-check:focus-visible {
	outline: 2px solid var(--ns-color-info);
	outline-offset: 2px;
}

/* ============================================================
   HEADER MODUL — caption "eyebrow" + tombol icon expand-on-hover
   Dipakai bertahap mulai dari modul Produksi (STK_Produksi,
   STK_Mutasi_Produksi) sebelum di-retrofit ke modul lain.
   Class lama (.header-subtitle, .header-actions .btn, .btn-separator
   di table-page-new.css) sengaja TIDAK disentuh — komponen di bawah
   ini hanya aktif kalau class ns- eksplisit dipasang di markup.
   ============================================================ */

/* Caption kecil di atas judul modul (mis. "Produksi") — warna info */
.header-title .ns-header-eyebrow {
	color: var(--ns-color-info);
}

/* Dropdown "..." di caption eyebrow (buat balik ke daftar tabel) — resep
   border+shadow solid disamakan persis dengan dropdown topbar dashboard
   (".main-header .dropdown-menu", dasbor.css), radius pakai token standar
   app-wide var(--ns-radius-btn) (2026-08-29). */
.ns-header-eyebrow .dropdown-menu {
	border: 2.5px solid var(--ns-color-dark);
	border-radius: var(--ns-radius-btn);
	box-shadow: 5px 5px 0 var(--ns-color-dark);
	padding: 8px;
}

.ns-header-eyebrow .dropdown-item {
	border-radius: var(--ns-radius-sm);
}

/* Icon folder item "Daftar ..." — chip kotak rounded bg info + icon putih,
   resep sama persis .main-header .dropdown-item-icon (dasbor.css). */
.ns-header-eyebrow .dropdown-item-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	margin-right: 6px;
	background: var(--ns-color-info);
	color: #ffffff !important;
	border-radius: 5px;
	font-size: .6rem;
}

/* Tombol icon-only, gaya neobrutalism (border 2px dark, warna solid, TANPA
   shadow secara default -- recipe disamakan dgn .app-btn di nisea-portal.css).
   Label teks baru muncul saat hover/focus. Mau versi "timbul" (hard offset
   shadow) tinggal tambah class .ns-btn-expand-shadow, bukan default lagi. */
.ns-btn-expand {
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 10px;
	border: 2px solid var(--ns-color-dark);
	border-radius: var(--ns-radius-btn);
	color: #fff;
	font-weight: 600;
	font-size: 13px;
	font-family: var(--ns-font-sans);
	line-height: 1;
	cursor: pointer;
	overflow: hidden;
	white-space: nowrap;
	box-shadow: none;
	text-shadow: none;
	transition: filter .12s ease, transform .12s ease, box-shadow .12s ease;
}

.ns-btn-expand i {
	font-size: 14px;
	flex: 0 0 auto;
}

.ns-btn-expand .ns-btn-label {
	display: inline-block;
	max-width: 0;
	margin-left: 0;
	opacity: 0;
	overflow: hidden;
	white-space: nowrap;
	transition: max-width .25s ease, margin-left .25s ease, opacity .2s ease .05s;
}

.ns-btn-expand:hover .ns-btn-label,
.ns-btn-expand:focus .ns-btn-label,
.ns-btn-expand:focus-within .ns-btn-label {
	max-width: 220px;
	margin-left: 7px;
	opacity: 1;
}

/* Varian "terbuka" — label selalu tampil, tidak nunggu hover (dipakai utk Tambah) */
.ns-btn-expand.ns-btn-expand-open .ns-btn-label {
	max-width: 220px;
	margin-left: 7px;
	opacity: 1;
}

.ns-btn-expand:hover,
.ns-btn-expand:focus {
	color: #fff;
	outline: none;
	filter: brightness(.94);
}

.ns-btn-expand:active {
	transform: translateY(1px);
}

.ns-btn-expand:disabled,
.ns-btn-expand.disabled {
	opacity: .4;
	pointer-events: none;
	box-shadow: none;
}

.ns-btn-expand-primary {
	background: var(--ns-color-primary);
}

.ns-btn-expand-info {
	background: var(--ns-color-info);
}

.ns-btn-expand-danger {
	background: var(--ns-color-danger);
}

.ns-btn-expand-accent {
	background: var(--ns-color-accent);
}

.ns-btn-expand-success {
	background: var(--ns-color-success);
}

/* Varian opt-in "timbul" -- hard offset shadow neobrutalism (recipe sama
   .app-btn), dipasang manual lewat class tambahan ".ns-btn-expand-shadow"
   kalau memang mau efek shadow (BUKAN default lagi). */
.ns-btn-expand-shadow {
	box-shadow: 3px 3px 0 var(--ns-color-dark);
}

.ns-btn-expand-shadow:hover,
.ns-btn-expand-shadow:focus {
	filter: none;
	transform: translate(-1px, -1px);
	box-shadow: 4px 4px 0 var(--ns-color-dark);
}

.ns-btn-expand-shadow:active {
	transform: translate(1px, 1px);
	box-shadow: 1px 1px 0 var(--ns-color-dark);
}

/* ============================================================
   TABS — .ns-tabs
   Tab-bar reusable, recipe sama badge navbar Portal (.app-id-badge) DITAMBAH
   hard shadow neo-brutalism (2026-08-29, sebelumnya TANPA shadow): border 2px
   dark, radius 8px, bg putih, box-shadow 3px 3px 0 dark (skala kecil, sama
   dgn .ns-total-transaksi -- bukan 6px 6px seperti .app-panel yang kartu
   besar). Tab-tab disekat garis tipis (sama seperti .app-id-sep). Tab aktif
   pakai warna info -- varian ini khusus dipakai di tab internal panel, mis.
   Konfigurasi Portal. .portal-navtab-list (dashboard_portal.css) disamakan
   persis (shadow + warna active info) supaya kedua tab-bar di Portal
   konsisten.
   Opt-in: tambah class "ns-tabs" di elemen ".nav" (Bootstrap nav-tabs
   biasa, tetap pakai data-toggle="tab" bawaan, ini murni restyle).
   ============================================================ */

.ns-tabs {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0;
	list-style: none;
	height: 34px;
	background: #ffffff;
	border: 2px solid var(--ns-color-dark);
	border-radius: var(--ns-radius-btn);
	box-shadow: 3px 3px 0 var(--ns-color-dark);
	/* overflow-x:auto (bukan hidden) -- kalau total lebar nav-item melebihi
	   container (mis. 4 tab di layar sempit), tab yang kelebihan dulunya
	   KEPOTONG tanpa cara mengaksesnya (overflow:hidden). Sekarang bisa
	   digeser/swipe ke kanan. overflow-y tetap hidden supaya border-radius
	   atas/bawah tidak ikut acak-acakan pas discroll. */
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
	/* Kalau parent-nya flex column (align-items:stretch bawaan, mis.
	   .portal-perusahaan-menu-panel) elemen ini ikut di-stretch memenuhi lebar
	   parent meskipun display-nya sendiri inline-flex -- inline-flex cuma
	   ngatur children DI DALAM .ns-tabs, bukan lebar .ns-tabs sebagai flex-item
	   di parent-nya. align-self:flex-start supaya lebarnya beneran ngepas isi. */
	align-self: flex-start;
}

.ns-tabs .nav-item {
	margin: 0;
	display: flex;
}

.ns-tabs .nav-item + .nav-item {
	border-left: 1px solid rgba(4, 11, 24, 0.15);
}

.ns-tabs .nav-link {
	color: var(--ns-color-dark) !important;
	opacity: 0.6;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0;
	padding: 0 1.1rem;
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: none !important;
	cursor: pointer;
	height: 100%;
	display: inline-flex;
	align-items: center;
	transition: background 0.12s ease, color 0.12s ease, opacity 0.12s ease;
}

.ns-tabs .nav-link:hover {
	opacity: 0.9;
}

.ns-tabs .nav-link.active {
	opacity: 1;
	background: var(--ns-color-info) !important;
	color: #ffffff !important;
}

/* ============================================================
   BADGE — .ns-badge
   Neo-brutalism (2026-08-28, sebelumnya versi "tipis" bg-tint+dot): bg SOLID
   warna variant, teks putih, border 2px solid dark, TANPA shadow. ::before
   sekarang render icon FontAwesome solid (bukan dot polos lagi) lewat
   content:var(--ns-badge-icon) + font-family "Font Awesome 5 Free" weight
   900 -- markup pemanggil (banyak dibuat dinamis dari JS render row
   DataTables) tetap tidak perlu ikut diubah, cukup 1 elemen
   <span class="ns-badge ns-badge-{variant}">teks</span> seperti sebelumnya.
   Icon per variant dipilih dari MAKNA warna itu sendiri (bukan teks label
   spesifik, krn 1 warna dipakai utk banyak label beda arti di seluruh app --
   mis. ns-badge-warning dipakai utk "Nonaktif" MAUPUN "Tunda"/"Diproses"):
   success=selesai/aktif/positif -> check, danger=ditolak/void/negatif ->
   times, warning=perlu perhatian/tertunda -> exclamation, info=netral/
   informasional -> info, light=nonaktif/netral -> minus. primary/accent
   belum ada pemakaian status di app manapun saat ini (dicek 2026-08-28) --
   icon-nya cuma placeholder netral, tidak mengikat makna apapun.

   Icon TIDAK selalu dipakai (feedback user 2026-08-28) -- cuma relevan utk
   badge yang menyatakan STATUS (aktif/nonaktif, tampil/tidak, dst). Badge
   kategorisasi polos (mis. "Tipe" Internal/Klien) pakai modifier tambahan
   ".ns-badge-plain" biar ::before-nya kosong. Rule warna: apa pun yang
   maknanya NEGATIF (nonaktif, tidak tampil, ditolak, dst) SELALU pakai
   ns-badge-danger (merah) -- ns-badge-warning/light bukan untuk itu, warna
   itu dipakai utk makna lain (tertunda/netral).
   ============================================================ */

.ns-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 20px;
	padding: 0 8px;
	border: 2px solid var(--ns-color-dark);
	border-radius: var(--ns-radius-sm);
	background: var(--ns-badge-bg);
	color: #ffffff;
	font-weight: 700;
	font-size: 11px;
	font-family: var(--ns-font-sans);
	line-height: 1;
	white-space: nowrap;
	text-shadow: none;
	box-shadow: none;
}

.ns-badge::before {
	content: var(--ns-badge-icon);
	flex: 0 0 auto;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 10px;
	line-height: 1;
	color: #ffffff;
}

.ns-badge-plain::before {
	content: none;
}

.ns-badge-primary {
	--ns-badge-bg: var(--ns-color-primary);
	--ns-badge-icon: "\f111"; /* fa-circle -- belum ada pemakaian, placeholder netral */
}

.ns-badge-info {
	--ns-badge-bg: var(--ns-color-info);
	--ns-badge-icon: "\f129"; /* fa-info */
}

.ns-badge-accent {
	--ns-badge-bg: var(--ns-color-accent);
	--ns-badge-icon: "\f005"; /* fa-star -- belum ada pemakaian, placeholder netral */
}

.ns-badge-light {
	--ns-badge-bg: var(--ns-color-light);
	--ns-badge-icon: "\f068"; /* fa-minus, nonaktif/netral */
}

.ns-badge-success {
	--ns-badge-bg: var(--ns-color-success);
	--ns-badge-icon: "\f00c"; /* fa-check */
}

.ns-badge-danger {
	--ns-badge-bg: var(--ns-color-danger);
	--ns-badge-icon: "\f00d"; /* fa-times */
}

.ns-badge-warning {
	--ns-badge-bg: var(--ns-color-warning);
	--ns-badge-icon: "\f12a"; /* fa-exclamation */
}

/* ".ns-total-transaksi" -- badge ringkasan di toolbar tabel (table-penjualan-
   tunai.js/table-pembelian-tunai.js/table-terima-barang-tunai.js, semuanya
   insertAfter(".dataTables_info") dgn markup sama). SENGAJA DIPISAH total dari
   ".ns-badge" (bukan lagi dipasang bareng ".ns-badge ns-badge-info" di markup)
   -- 2026-08-28: sempat numpang base ".ns-badge" tapi ke-reset "tanpa shadow"
   begitu base-nya diubah jadi neo-brutalism polos, padahal komponen ini memang
   didesain butuh hard shadow-nya sendiri. Dipisah supaya perubahan gaya badge
   status (warna/icon/shadow) TIDAK PERNAH ikut menyeret komponen ini lagi,
   dan sebaliknya. Icon pakai <i class="fas fa-receipt"> asli di markup JS
   (bukan ::before) krn komponen ini berdiri sendiri, tidak ada dot bawaan
   yang perlu dimatikan. */
.ns-total-transaksi {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	background: var(--ns-color-info);
	color: #ffffff;
	border: 2px solid var(--ns-color-dark);
	border-radius: var(--ns-radius-sm);
	box-shadow: 3px 3px 0 var(--ns-color-dark);
	font-weight: 700;
	font-size: 12px;
	font-family: var(--ns-font-sans);
	line-height: 1;
	white-space: nowrap;
}

.ns-total-transaksi i {
	font-size: 11px;
}

/* ============================================================
   DOT — .ns-dot (+ .ns-dot-success/-warning/-info/-danger)
   Indikator status ringkas, dot polos tanpa teks/badge pill — dipakai
   lintas halaman table & form (mis. kolom nomor di tabel Penerimaan
   Hasil Produksi, indikator status di caption header Stok Opname).
   Base .ns-dot cuma ngatur bentuk/ukuran, warnanya dari modifier class.
   ============================================================ */

.ns-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	vertical-align: middle;
}

.ns-dot-success {
	background-color: var(--ns-color-success);
}

.ns-dot-warning {
	background-color: var(--ns-color-warning);
}

.ns-dot-info {
	background-color: var(--ns-color-info);
}

.ns-dot-danger {
	background-color: var(--ns-color-danger);
}

/* Jarak dot ke caption header (mis. #statusIndicator di form Stok Opname) --
   .ns-dot dasar sengaja tanpa margin krn juga dipakai nempel di kolom tabel. */
.ns-dot.ml-caption {
	margin-left: 8px;
}

/* Varian ikon (bukan dot polos) utk indikator status yg butuh bentuk lebih
   jelas dari sekadar titik warna, mis. centang "sudah diterima" -- warnanya
   tetap dari token yg sama, cuma ganti dari background-color (dot) ke color
   (ikon/glyph FontAwesome). */
.ns-icon-success {
	color: var(--ns-color-success);
}

.ns-icon-warning {
	color: var(--ns-color-warning);
}

.ns-icon-info {
	color: var(--ns-color-info);
}

.ns-icon-danger {
	color: var(--ns-color-danger);
}

/* ============================================================
   ALERT — .ns-alert
   Alternatif ringan utk .alert-info bawaan (varian solid AdminLTE
   terlalu gelap/berat utk pesan info non-blocking di dalam modal).
   ============================================================ */

.ns-alert {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 8px 12px;
	border-radius: var(--ns-radius-btn);
	font-size: 12px;
	line-height: 1.5;
	font-family: var(--ns-font-sans);
}

.ns-alert i {
	margin-top: 2px;
	flex: 0 0 auto;
}

.ns-alert-info {
	background: rgba(76, 177, 255, .12);
	color: var(--ns-color-primary);
}

.ns-alert-info i {
	color: var(--ns-color-info-dark);
}

/* ============================================================
   TOMBOL TAMBAH BARIS — .ns-btn-dashed
   Utk aksi "tambah baris" di dalam form dinamis. Nama class dipertahankan
   (.ns-btn-dashed, dipakai 7 file) walau sekarang TIDAK dashed lagi
   (2026-08-29, permintaan user: solid bg info + border solid neo-
   brutalism seperti tombol lain, tanpa shadow) -- rename class butuh
   ubah 7 view, tidak worth it cuma buat penamaan.
   ============================================================ */

.ns-btn-dashed {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	padding: 10px 16px;
	border: 2px solid var(--ns-color-dark);
	border-radius: var(--ns-radius-btn);
	background: var(--ns-color-info);
	color: #fff;
	font-weight: 600;
	font-size: 13px;
	font-family: var(--ns-font-sans);
	cursor: pointer;
	box-shadow: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.ns-btn-dashed:hover,
.ns-btn-dashed:focus {
	background: var(--ns-color-info-dark);
	color: #fff;
	outline: none;
}

.ns-btn-dashed:active {
	transform: translateY(1px);
}

/* ============================================================
   TOMBOL ICON KECIL — .ns-icon-btn
   Utk aksi baris tunggal (hapus, dst) di dalam tabel/list dinamis.
   Tinggi disamakan dgn .form-control-sm (calc(1.8rem + 0px)) supaya
   sejajar rapi dengan input di baris yang sama.
   ============================================================ */

.ns-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(1.8rem + 2px);
	height: calc(1.8rem + 2px);
	border: none;
	border-radius: var(--ns-radius-btn);
	background: transparent;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.ns-icon-btn-danger {
	color: #fff;
	background: linear-gradient(135deg, var(--ns-color-danger), var(--ns-color-danger-dark));
}

.ns-icon-btn-danger:hover {
	filter: brightness(.92);
	color: #fff;
}

.ns-icon-btn-success {
	color: #fff;
	background: linear-gradient(135deg, var(--ns-color-success), var(--ns-color-success-dark));
}

.ns-icon-btn-success:hover {
	filter: brightness(.92);
	color: #fff;
}

.ns-icon-btn-info {
	color: #fff;
	background: linear-gradient(135deg, var(--ns-color-info), var(--ns-color-info-dark));
}

.ns-icon-btn-info:hover {
	filter: brightness(.92);
	color: #fff;
}

/* ============================================================
   TOMBOL HAPUS BARIS TABEL DETAIL — .btn-delrow
   Dipakai ~48 modul transaksi/master (icon fa-minus) buat hapus baris
   tabel detail dinamis. Direstyle (2026-08-29) jadi standalone icon
   POLOS: TANPA border, TANPA background (percobaan pertama dikasih
   border kotak, user minta dihapus -- cukup icon merah telanjang,
   sama kayak tampilan lama "-" sebelum direstyle).
   Glyph icon-nya diganti dari "-" (fa-minus, kurang jelas maksudnya)
   ke "X" (fa-times) MURNI lewat CSS content override, tanpa ubah
   markup/JS di 48 file. POS (penjualan-tunai.js) pakai icon beda
   (fa-trash, bukan fa-minus) jadi otomatis TIDAK kena glyph-swap ini;
   border/bg-nya sendiri sengaja di-freeze balik ke lama khusus di
   pos-penjualan-tunai.css (konvensi "POS di-exclude" sesi ini).
   ============================================================ */
.btn-delrow {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: calc(1.8rem + 2px);
	height: calc(1.8rem + 2px);
	padding: 0 !important;
	border: none !important;
	border-radius: var(--ns-radius-sm);
	background: transparent !important;
}

.btn-delrow:hover {
	background: rgba(220, 38, 38, .08) !important;
}

.btn-delrow .fa-minus {
	color: var(--ns-color-danger) !important;
}

.btn-delrow .fa-minus::before {
	content: "\f00d";
}

/* ============================================================
   OPTION TILE — .ns-option-tile
   Tombol pilihan berbentuk card baris (ikon kiri + judul/keterangan)
   utk modal pilih aksi, mis. modal Pilih Cetak (Struk/PDF/WhatsApp/
   Email) di cetak-modal.js. Pembungkus: .ns-option-list (tumpuk
   vertikal). Opsi yang belum tersedia: attr disabled + .is-soon.
   Gaya neo-brutalism: border 2px dark + hard shadow 3px (resep sama
   .ns-btn-expand-shadow), radius kecil (--ns-radius-sm).
   ============================================================ */

.ns-option-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	/* ruang utk hard shadow card terakhir supaya tidak kepotong */
	padding: 0 3px 3px 0;
}

.ns-option-tile {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 10px 14px;
	border: 2px solid var(--ns-color-dark);
	border-radius: var(--ns-radius-sm);
	background: #fff;
	box-shadow: 3px 3px 0 var(--ns-color-dark);
	text-align: left;
	cursor: pointer;
	transition: background-color .12s ease, transform .12s ease, box-shadow .12s ease;
}

/* Ikon dalam chip kotak bg info (resep chip ikon dropdown eyebrow) */
.ns-option-tile .ns-option-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border: 2px solid var(--ns-color-dark);
	border-radius: var(--ns-radius-sm);
	background: var(--ns-color-info);
	color: #fff;
	font-size: 17px;
}

.ns-option-tile .ns-option-text {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

.ns-option-tile .ns-option-title {
	font-size: 14px;
	font-weight: 700;
	color: var(--ns-color-dark);
	font-family: var(--ns-font-sans);
}

.ns-option-tile .ns-option-desc {
	font-size: 12px;
	color: #6B7280;
	font-family: var(--ns-font-sans);
}

.ns-option-tile .ns-option-arrow {
	flex: 0 0 auto;
	font-size: 12px;
	color: var(--ns-color-dark);
}

.ns-option-tile:hover,
.ns-option-tile:focus-visible {
	outline: none;
	background: var(--ns-color-icy);
	transform: translate(-1px, -1px);
	box-shadow: 4px 4px 0 var(--ns-color-dark);
}

.ns-option-tile:active {
	transform: translate(1px, 1px);
	box-shadow: 1px 1px 0 var(--ns-color-dark);
}

/* Opsi belum tersedia — flat (tanpa shadow), pudar, tidak bisa diklik
   (pointer-events off -> hover/klik mati total), badge SOON. Cursor
   not-allowed dipasang di wrapper .ns-option-soon-wrap krn elemen dgn
   pointer-events:none tidak bisa menampilkan cursor sendiri. */
.ns-option-soon-wrap {
	cursor: not-allowed;
}

.ns-option-tile.is-soon {
	pointer-events: none;
	background: #F3F4F6;
	box-shadow: none;
	transform: none;
}

.ns-option-tile.is-soon .ns-option-icon {
	background: #D1D5DB;
}

.ns-option-tile.is-soon .ns-option-title,
.ns-option-tile.is-soon .ns-option-desc {
	color: #9CA3AF;
}

.ns-option-tile .ns-option-badge {
	flex: 0 0 auto;
	padding: 2px 8px;
	border: 2px solid var(--ns-color-dark);
	border-radius: var(--ns-radius-sm);
	background: var(--ns-color-accent);
	color: #fff;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .08em;
	font-family: var(--ns-font-sans);
}

/* Panel pilih penerima (WhatsApp/Email) di modal Pilih Cetak — baris
   label + .ns-check, resep sama .ns-swal-opt. */
.ns-recipient-head {
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ns-color-dark);
	font-family: var(--ns-font-sans);
}

.ns-recipient-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 10px 12px;
	border: 2px solid var(--ns-color-dark);
	border-radius: var(--ns-radius-sm);
	background: #fff;
	cursor: pointer;
	transition: background .12s ease;
}

.ns-recipient-row + .ns-recipient-row {
	margin-top: 8px;
}

.ns-recipient-row:hover {
	background: var(--ns-color-icy);
}

.ns-recipient-row.is-locked {
	cursor: default;
}

.ns-recipient-row.is-locked:hover {
	background: #fff;
}

/* Owner selalu ikut terkirim -- checkbox dicentang+disabled tapi tetap
   tampil tegas (bukan pudar spt .ns-check:disabled biasa). */
.ns-recipient-row.is-locked .ns-check:disabled {
	opacity: 1;
	cursor: default;
}

.ns-recipient-row.is-off {
	opacity: .45;
	cursor: not-allowed;
}

.ns-recipient-row.is-off:hover {
	background: #fff;
}

.ns-recipient-row .ns-recipient-text {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
	font-family: var(--ns-font-sans);
}

.ns-recipient-row .ns-recipient-label {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--ns-color-dark);
}

.ns-recipient-row .ns-recipient-value {
	font-size: 12px;
	color: #6B7280;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ns-recipient-row .ns-recipient-tag {
	flex: 0 0 auto;
	padding: 1px 6px;
	border: 2px solid var(--ns-color-dark);
	border-radius: var(--ns-radius-sm);
	background: var(--ns-color-icy);
	color: var(--ns-color-dark);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
}

/* ============================================================
   SELECT2 — recolor aksen ke palet Nisea
   Theme select2-bootstrap4 dipakai global di seluruh app; di sini
   cuma warna aksen (fokus, panah, opsi terpilih) yang diganti ke
   palet Nisea. Ukuran/padding bawaan theme SENGAJA tidak disentuh
   supaya tidak ada layout yang bergeser di halaman lain.
   ============================================================ */

.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b {
	border-top-color: var(--ns-color-info);
}

/* Fix bug tema select2-bootstrap4 (2026-08-29): selector aslinya (di
   select2-bootstrap4.css) ".input-group-prepend ~ .select2-container...
   .select2-selection" pakai general sibling combinator -- nyala ke SEMUA
   select2 yang punya .input-group-prepend di sibling manapun SEBELUMNYA
   dalam parent yang sama, bukan cuma yang benar2 satu input-group sama
   prepend itu. Specificity-nya (3 class) lebih tinggi dari override radius
   kita di atas (2 class), jadi menang & bikin sudut kiri select2 gak
   ke-radius (lancip) walau select2-nya gak nempel prepend apapun secara
   visual. Dipaksa balik ke radius token di sini. */
.input-group-prepend ~ .select2-container--bootstrap4 .select2-selection {
	border-top-left-radius: var(--ns-radius-sm);
	border-bottom-left-radius: var(--ns-radius-sm);
}

/* Fix border select2 disabled (2026-08-29) -- kejadian saat buka transaksi
   tersimpan, form dibuka dulu dalam mode "lihat" (semua input di-disable
   sampai user klik tombol Ubah). select2-bootstrap4.css sendiri punya rule
   ".select2-container--bootstrap4.select2-container--disabled .select2-
   selection { border-color:#ced4da }" -- 3 class, lebih spesifik dari
   baseline border kita (.select2-container--bootstrap4 .select2-selection,
   2 class) di atas, jadi menang walau nisea.css dimuat belakangan
   (specificity ngalahin urutan load). Akibatnya select2 disabled balik ke
   abu-abu tipis bawaan plugin, beda sendiri dari .form-control disabled
   lain yang sudah ikut border neo-brutalism. Ditambal dgn selector sama
   spesifiknya (3 class) di sini. */
.select2-container--bootstrap4.select2-container--disabled .select2-selection {
	border-color: var(--ns-color-dark);
}

/* Fix placeholder select2 (mis. "Cari Bahan...") turun/tidak center:
   theme set line-height:2rem khusus utk .select2-selection__placeholder,
   beda sendiri dari .select2-selection__rendered (1.7rem) yang jadi
   acuan tinggi box — disamakan supaya placeholder & value terpilih
   center di posisi yang sama. */
.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder {
	line-height: 1.7rem;
}

/* Fokus disamakan (2026-08-29) dgn baseline .form-control:focus -- border
   ganti ke var(--ns-color-info) saja, TANPA glow, bukan lagi navy+ring
   seperti sebelumnya. */
.select2-container--bootstrap4.select2-container--focus .select2-selection {
	border-color: var(--ns-color-info);
	box-shadow: none;
}

.select2-container--bootstrap4 .select2-results__option--highlighted,
.select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected=true] {
	background-color: var(--ns-color-info);
	color: #fff;
}

/* ============================================================
   MODAL — .ns-modal
   Standar modal umum aplikasi (di luar POS, yang sudah punya gaya
   modal sendiri). Opt-in lewat class "ns-modal" di elemen ".modal"
   supaya modal lama yang belum di-retrofit tidak ikut berubah.
   Mulai dipakai dari modal filter modul Produksi, akan digulirkan
   bertahap ke modal lain di aplikasi.
   ============================================================ */

.ns-modal .modal-content {
	border: 3px solid var(--ns-color-dark);
	border-radius: var(--ns-radius-btn);
	/* Shadow neobrutalism (hard offset, bukan soft blur var(--ns-shadow-lg)
	   lama) -- recipe sama .app-panel di dashboard_portal.css. */
	box-shadow: var(--ns-shadow-solid);
	overflow: hidden;
	font-family: var(--ns-font-sans);
}

/* Ukuran modal — tinggal tambah class ns-modal-sm/md/lg/xl di ".modal" */
.ns-modal-sm .modal-dialog {
	max-width: 380px;
}

.ns-modal-md .modal-dialog {
	max-width: 520px;
}

.ns-modal-lg .modal-dialog {
	max-width: 720px;
}

.ns-modal-xl .modal-dialog {
	max-width: 960px;
}

.ns-modal .modal-header {
	align-items: center;
	gap: 12px;
	padding: 20px 20px;
	/* Flat, tanpa gradasi (beda dari sebelumnya) -- warna info/sky blue.
	   !important WAJIB (2026-08-29): markup #modal shared punya class
	   "bg-ybm" bawaan (background:#428bca !important, lihat adminlte.css)
	   yang TIDAK PERNAH dilepas oleh puluhan caller yang cuma nambahin
	   ".ns-modal" ke #modal tanpa remove "bg-ybm" -- importance menang
	   duluan sebelum specificity dibandingkan, jadi tanpa !important di
	   sini declaration ini SELALU kalah lawan bg-ybm (walau specificity-nya
	   lebih tinggi, 2 class vs 1), header kelihatan biru tua #428bca,
	   bukan sky info. */
	background: var(--ns-color-info) !important;
	border-bottom: none;
}

/* Header modal SENGAJA tanpa ikon bulat lagi (dulu .ns-modal-icon) -- cuma
   judul + tombol tutup, biar lebih ringkas. Class ".ns-modal-icon" masih
   ditinggal di sini (display:none) jaga-jaga ada markup lama yang belum
   sempat dibersihkan, tapi jangan dipakai lagi di modal baru. */
.ns-modal-icon {
	display: none;
}

.ns-modal-heading {
	flex: 1 1 auto;
	min-width: 0;
}

.ns-modal-eyebrow {
	display: block;
	color: rgba(255, 255, 255, .75);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
}

.ns-modal-eyebrow:empty {
	display: none;
}

.ns-modal .modal-title {
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	margin-top: 1px;
}

.ns-modal .close {
	margin: 0;
	padding: 0;
	color: #fff;
	opacity: .75;
	text-shadow: none;
	font-weight: 400;
	font-size: 22px;
	line-height: 1;
	transition: opacity .15s ease;
}

.ns-modal .close:hover,
.ns-modal .close:focus {
	color: #fff;
	opacity: 1;
}

.ns-modal .modal-body {
	padding: 20px;
	background: #fff;
	border: none;
	max-height: 60vh;
	overflow-y: auto;
	font-size: 13px;
}

/* Form sejajar — label kiri (lebar tetap), input kanan (mengisi sisa) */
.ns-modal .modal-body .form-group {
	display: flex;
	align-items: center;
	gap: 22px;
	margin-bottom: 14px;
}

.ns-modal .modal-body .form-group > label {
	flex: 0 0 110px;
	color: var(--ns-color-primary);
	font-weight: 400;
	font-size: 12.5px;
	margin-bottom: 0;
}

.ns-modal .modal-body .form-group > .input-group,
.ns-modal .modal-body .form-group > select,
.ns-modal .modal-body .form-group > .form-control {
	flex: 1 1 auto;
	min-width: 0;
}

.ns-modal .modal-body .form-control,
.ns-modal .modal-body .custom-select,
.ns-modal .modal-body select,
.ns-modal .modal-body .input-group-text {
	font-size: 12.5px;
}

/* Select2 render teksnya lewat span terpisah (.select2-selection__rendered),
   bukan di elemen <select> asli -- font-size di atas tidak ke-inherit ke situ,
   jadi placeholder/opsi terpilih tampil lebih besar drpd input lain di modal.
   Disamakan di sini (scoped ke .ns-modal saja, bukan global -- lihat komentar
   "Ukuran/padding bawaan theme SENGAJA tidak disentuh" di section SELECT2
   supaya halaman lain yang belum pakai .ns-modal tidak ikut bergeser). */
.ns-modal .select2-container--bootstrap4 .select2-selection__rendered,
.ns-modal .select2-container--bootstrap4 .select2-selection__placeholder {
	font-size: 12.5px;
}

.ns-modal .modal-footer {
	padding: 10px 20px;
	/* Icy-white (bukan abu netral lama) -- senada bg sidebar/section lain di Portal. */
	background: var(--ns-color-icy);
	border: none;
	border-top: 2px solid var(--ns-color-dark);
	gap: 2px;
}

/* Keterangan kontekstual di footer sebelah kiri (mis. "Lisensi aktif s/d
   MM/YYYY") -- reusable, tinggal taruh sebagai child pertama ".modal-footer"
   sebelum tombol-tombol aksi. "margin-right:auto" yang mendorongnya ke kiri
   sementara tombol tetap flex-end di kanan (bukan ganti justify-content
   ".modal-footer" ke space-between, supaya modal yang tidak punya note ini
   footernya tetap rapat ke kanan seperti biasa). Kosongkan lewat JS
   (.empty()) kalau tidak ada keterangan -- otomatis collapse (:empty). */
.ns-modal-footer-note {
	margin-right: auto;
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-weight: 600;
	color: var(--ns-color-primary);
	min-width: 0;
}

.ns-modal-footer-note:empty {
	display: none;
}

.ns-modal-footer-note i {
	font-size: 11px;
	color: var(--ns-color-info-dark);
	flex: 0 0 auto;
}

/* Tombol footer direstyling ikut bahasa neobrutalism .ns-btn-expand (border
   2px dark, warna solid, tanpa shadow default) -- CSS-only override di sini
   (bukan ganti class markup tiap modal ke .ns-btn-expand satu-satu, supaya
   modal lama yang belum disentuh tetap ikut seragam otomatis). */
.ns-modal .modal-footer .btn,
.ns-modal .modal-footer .ns-btn {
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 14px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	border-radius: var(--ns-radius-btn);
	border: 2px solid var(--ns-color-dark);
	box-shadow: none !important;
	text-shadow: none;
	transition: filter .12s ease, transform .12s ease;
}

.ns-modal .modal-footer .btn-light {
	background: #ffffff;
	color: var(--ns-color-dark);
}

.ns-modal .modal-footer .btn-light:hover {
	background-color: #eef1f6;
}

.ns-modal .modal-footer .ns-btn {
	background: var(--ns-color-info);
	opacity: 1;
}

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

.ns-modal .modal-footer .ns-btn-primary,
.ns-modal .modal-footer .ns-btn-info {
	background: var(--ns-color-info);
}

.ns-modal .modal-footer .btn:hover,
.ns-modal .modal-footer .ns-btn:hover {
	filter: brightness(.95);
	opacity: 1;
}

.ns-modal .modal-footer .btn:active,
.ns-modal .modal-footer .ns-btn:active {
	transform: translateY(1px);
}

/* Badge item terpilih di select2 multiple — dipakai GLOBAL (2026-08-29,
   sebelumnya cuma di dalam .ns-modal, form biasa di luar modal balik ke
   pill abu-abu default tema select2-bootstrap4). Gaya neo-brutalism spt
   .ns-badge: bg SOLID sky (var(--ns-color-info), bukan gradasi -- gradasi
   dianggap gak setema dgn neo-brutalism yang lain), border 2px dark, TANPA
   shadow. Selector sengaja PERSIS sama specificity-nya (3-class) dgn
   selector tema select2-bootstrap4 asli -- menang lewat urutan load CSS
   (nisea.css dimuat SESUDAH select2-bootstrap4.css di header.php), bukan
   lewat prefix ".ns-modal" lagi. */
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
	display: flex;
	align-items: center;
	height: 20px;
	margin-top: 3px;
	margin-right: 5px;
	padding: 0 8px 0 4px;
	border: 2px solid var(--ns-color-dark);
	border-radius: var(--ns-radius-sm);
	background: var(--ns-color-info);
	box-shadow: none;
	color: #fff;
	font-weight: 600;
	font-size: 11px;
	font-family: var(--ns-font-sans);
	line-height: 1;
	cursor: default;
	float: left;
}

.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
	color: rgba(255, 255, 255, .75);
	font-weight: 400;
	font-size: 13px;
	margin-right: 4px;
	margin-left: 0;
	padding: 0 2px;
	float: left;
}

.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover {
	color: #fff;
}

/* ============================================================
   MODAL KONFIRMASI — ".ns-modal-confirm-neo" DIHAPUS 2026-08-27
   Base ".ns-modal-confirm" (modal-konfirmasi-nisea.css) sekarang SUDAH
   neobrutalism (border dark + shadow solid) secara default -- modifier
   "-neo" ini dulu perlu krn base-nya masih shadow lama, sekarang tidak
   perlu ditambahkan lagi di modal baru. Class "ns-modal-confirm-neo" yang
   masih nempel di markup lama (dasbor.php/portal.php/pilih_perusahaan.php)
   dibiarkan (harmless, tidak match apa pun lagi) -- lihat modal-konfirmasi-
   nisea.css untuk source of truth stylingnya sekarang.
   ============================================================ */

/* ============================================================
   SWEETALERT NISEA — .ns-swal-popup
   Versi ringkas (bukan ns-modal) untuk popup SweetAlert2 (prompt kecil
   di luar shell dasbor.php, mis. modal input diskon %). Sengaja TANPA
   bar header solid seperti .ns-modal — cukup satu ikon bulat di tengah
   atas (.ns-swal-icon-top), karena judul sudah terwakili oleh label
   input di body. Body ditulis manual di dalam opsi "html", sementara
   area tombol tetap pakai actions bawaan SweetAlert2 (distyle lewat
   customClass.actions/confirmButton/cancelButton) supaya alur promise
   inputValidator/preConfirm tetap jalan seperti biasa.
   ============================================================ */

.ns-swal-popup {
	padding: 0 !important;
	width: 360px !important;
	border: 3px solid var(--ns-color-primary);
	border-radius: var(--ns-radius-btn);
	box-shadow: var(--ns-shadow-lg);
	font-family: var(--ns-font-sans);
	overflow: hidden;
}

.ns-swal-popup .swal2-html-container {
	margin: 0;
	padding: 0;
}

.ns-swal-icon-top {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 24px auto 4px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--ns-color-primary-light), var(--ns-color-primary));
	color: #fff;
	font-size: 20px;
	box-shadow: var(--ns-shadow-lg);
}

.ns-swal-body {
	padding: 12px 20px 20px;
	text-align: left;
}

.ns-swal-body .form-group {
	display: flex;
	align-items: center;
	gap: 22px;
	margin-bottom: 0;
}

.ns-swal-body .form-group>label {
	flex: 0 0 90px;
	color: var(--ns-color-primary);
	font-weight: 400;
	margin-bottom: 0;
}

.ns-swal-body .form-group>input {
	flex: 1 1 auto;
	min-width: 0;
}

/* Pesan "input tidak valid" bawaan SweetAlert2 (.swal2-validation-message)
   pakai margin negatif & warna abu-abu default yang meleset dari popup
   custom ini (padding 0, radius, overflow hidden) — jadi terlihat patah/
   kotak. Override supaya ikut palet & bentuk ns-swal-popup. */
.ns-swal-popup .swal2-validation-message {
	margin: 0 20px 14px;
	padding: 9px 12px;
	background: rgba(220, 38, 38, .08);
	color: var(--ns-color-danger-dark);
	font-size: 12.5px;
	font-weight: 600;
	border-radius: var(--ns-radius-btn);
}

.ns-swal-popup .swal2-validation-message::before {
	background-color: var(--ns-color-danger);
}

.ns-swal-popup .swal2-actions {
	margin: 0;
	width: 100%;
	max-width: 100%;
	justify-content: flex-end;
	gap: 8px;
	padding: 10px 20px;
	background: #F8FAFC;
	border-top: 1px solid rgba(19, 46, 99, .08);
}

.ns-swal-actions .btn {
	height: 30px;
	display: inline-flex;
	align-items: center;
	padding: 0 14px;
	font-size: 12px;
	line-height: 1;
	margin: 0;
}

.ns-swal-actions .btn-light {
	border: 1px solid rgba(19, 46, 99, .14);
	border-radius: var(--ns-radius-btn);
	font-weight: 600;
	box-shadow: none;
	text-shadow: none;
}

.ns-swal-actions .btn-light:hover {
	background-color: #eef1f6;
}

.ns-swal-actions .ns-btn {
	height: 30px;
	padding: 0 14px;
	font-size: 12px;
}

/* ============================================================
   TAB PILL — .ns-tab-pills / .ns-tab-pill
   Dipakai utk grup tab kecil (mis. halaman Konfigurasi) yang bukan
   nav-tabs Bootstrap biasa. Wrapper pakai bg info-nisea tipis (formula
   sama dgn .ns-alert-info), tab aktif pakai gradasi info (sama dgn
   .ns-badge-info/.ns-btn-expand-info), tab nonaktif teks polos primary.
   ============================================================ */

.ns-tab-pills {
	display: inline-flex;
	gap: 6px;
	padding: 4px;
	border-radius: var(--ns-radius-btn);
	background: rgba(76, 177, 255, .12);
}

.ns-tab-pill {
	border: none;
	background: transparent;
	color: var(--ns-color-primary);
	font-weight: 600;
	font-size: 13px;
	font-family: var(--ns-font-sans);
	padding: 6px 16px;
	border-radius: var(--ns-radius-btn);
	cursor: pointer;
	text-shadow: none;
	transition: background-color .15s ease, color .15s ease;
}

.ns-tab-pill:hover {
	color: var(--ns-color-info-dark);
}

.ns-tab-pill.active {
	background: linear-gradient(135deg, var(--ns-color-info), var(--ns-color-info-dark));
	color: #fff;
	box-shadow: var(--ns-shadow-lg);
}

.ns-tab-pill.active:hover {
	color: #fff;
}

/* ============================================================
   KONFIGURASI KATEGORI PRODUKSI — daftar kategori + toggle
   (application/views/modul/transaksi/persediaan/form-config-produksi.php)
   Sengaja bukan <table> supaya lega dibaca. Header disatukan sebagai
   baris sticky DI DALAM kontainer scroll yang sama dengan baris data
   (bukan elemen terpisah di luar) supaya kolom checkbox selalu presisi
   sejajar dengan label header — kalau dipisah, scrollbar vertikal di
   kontainer data (muncul saat kategori banyak) mengurangi lebar
   kontennya sedikit sementara header di luar tidak ikut berkurang,
   jadi kolomnya geser. Lebar kolom checkbox pakai white-space:nowrap
   supaya label "Produk Setengah Jadi" tidak wrap dan bikin header
   kelihatan berantakan.
   ============================================================ */

.produksi-kategori-list {
	max-height: 320px;
	overflow-y: auto;
	overflow-x: hidden;
	border: 1px solid #eef1f6;
	border-radius: var(--ns-radius-btn);
}

.produksi-kategori-head {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 14px;
	background: #F8FAFC;
	border-bottom: 1px solid #eef1f6;
	font-size: 11px;
	font-weight: 600;
	color: #8a94a6;
}

.produksi-kategori-head-opsi {
	display: flex;
	flex: 0 0 auto;
	gap: 18px;
}

.produksi-kategori-head-opsi span {
	display: inline-block;
	width: 132px;
	text-align: center;
	white-space: nowrap;
}

.produksi-kategori-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 14px;
	border-bottom: 1px solid #eef1f6;
}

.produksi-kategori-row:last-child {
	border-bottom: none;
}

.produksi-kategori-row:nth-child(even) {
	background: #FAFBFD;
}

.produksi-kategori-nama {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ns-color-primary);
	text-transform: capitalize;
}

.produksi-kategori-opsi {
	display: flex;
	flex: 0 0 auto;
	gap: 18px;
}

.produksi-kategori-opsi label {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 132px;
	margin-bottom: 0;
	cursor: pointer;
}

.produksi-kategori-opsi input[type="checkbox"] {
	width: 15px;
	height: 15px;
	margin: 0;
	accent-color: var(--ns-color-primary);
	cursor: pointer;
}

/* Checkbox standar nisea — warna info, dipakai utk state selesai/centang baris (mis. Stok Opname).
   Ukuran & bentuk sama seperti checkbox native accent-color biasa (16px, rounded), cuma warna
   digambar manual (appearance:none) supaya centangnya DIJAMIN putih -- accent-color native
   menyerahkan warna centang ke algoritma kontras browser, yg bisa jadi gelap kalau base
   colornya terang seperti --ns-color-info ini. */
.ns-checkbox-info {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	margin: 0;
	border: 1.5px solid var(--ns-color-info);
	border-radius: 4px;
	background-color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.ns-checkbox-info:checked {
	background-color: var(--ns-color-info);
	border-color: var(--ns-color-info);
}

/* Centang digambar via flex-centering (bukan left/top manual) supaya presisi di tengah
   terlepas dari ketebalan border -- translateY kecil cuma koreksi optik krn bentuk "L"
   hasil rotate 45deg secara visual sedikit lebih berat ke bawah dari titik pusatnya. */
.ns-checkbox-info:checked::after {
	content: "";
	width: 4px;
	height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) translateY(-1px);
}

/* Radio standar nisea — recipe PERSIS sama .ns-checkbox-info (solid + outline
   + tanpa shadow), cuma bentuknya bulat (border-radius:50%) dan tandanya dot
   putih di tengah, bukan centang. */
.ns-radio {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	margin: 0;
	border: 1.5px solid var(--ns-color-info);
	border-radius: 50%;
	background-color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.ns-radio:checked {
	background-color: var(--ns-color-info);
	border-color: var(--ns-color-info);
}

.ns-radio:checked::after {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #fff;
}

/* ============================================================
   UPLOAD BOX — .ns-upload-box / .ns-upload-box-add
   Kotak upload gambar dinamis (mis. lampiran struk Terima Barang
   Tunai) — persegi neo-brutalism (border solid dark + shadow solid),
   resep sama dgn .portal-company-info-logo-slot (portal > konfigurasi
   > info perusahaan). Kotak itu sendiri yang jadi trigger file picker
   (klik langsung gambarnya, bukan tombol terpisah) - lihat
   _wireLampiranEvents() di terima-barang-tunai.js. Kotak "+"
   (.ns-upload-box-add) dipakai sebagai slot terakhir yang selalu ada,
   tempat menambah slot gambar baru secara dinamis lewat JS.
   ============================================================ */

.ns-upload-slot {
	width: 140px;
	margin: 0 18px 18px 0;
	position: relative;
}

.ns-upload-box {
	width: 140px;
	height: 140px;
	border: 2px solid var(--ns-color-dark);
	border-radius: var(--ns-radius-btn);
	box-shadow: var(--ns-shadow-solid);
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
	cursor: pointer;
}

.ns-upload-box .ns-upload-preview {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.ns-upload-box-add {
	cursor: pointer;
	color: var(--ns-color-info);
	font-size: 26px;
	transition: background-color .15s ease;
}

.ns-upload-box-add:hover {
	background: rgba(76, 177, 255, .08);
}

/* Tombol Hapus & Buka (tab lampiran) — sama persis gaya & posisinya
   (icon polos, tanpa bg/border/lingkaran), cuma dicerminkan kiri-kanan:
   Buka di pojok kiri-atas warna info, Hapus di pojok kanan-atas warna
   danger. */
.ns-upload-remove,
.ns-upload-view {
	position: absolute;
	top: 4px;
	width: 20px;
	height: 20px;
	border: none;
	background: transparent;
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.ns-upload-remove {
	right: 4px;
	color: var(--ns-color-danger);
}

.ns-upload-view {
	left: 4px;
	color: var(--ns-color-info);
}

.ns-btn-upload-outline:hover,
.ns-btn-upload-outline:focus {
	background: rgba(76, 177, 255, .08);
	outline: none;
}

/* ============================================================
   SWITCH — .ns-switch
   Toggle aktif/nonaktif neo-brutalism: border solid dark, TANPA
   shadow. Track sky (--ns-color-info) saat aktif, merah
   (--ns-color-danger) saat nonaktif. Reusable di tabel/modal mana
   pun (dipakai pertama kali di Data Bank/Data eWallet Portal).
   Markup: <label class="ns-switch"><input type="checkbox">
   <span class="ns-switch-track"></span><span class="ns-switch-thumb">
   </span></label> -- label membungkus input langsung, tidak perlu
   for/id pasangan.
   ============================================================ */

.ns-switch {
	position: relative;
	display: inline-block;
	width: 38px;
	height: 22px;
	flex-shrink: 0;
	vertical-align: middle;
	cursor: pointer;
}

.ns-switch input {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 2;
}

.ns-switch-track {
	position: absolute;
	inset: 0;
	box-sizing: border-box;
	border: 2px solid var(--ns-color-dark);
	border-radius: 999px;
	background: var(--ns-color-danger);
	transition: background-color .15s ease;
}

.ns-switch-thumb {
	position: absolute;
	top: 4px;
	left: 4px;
	width: 14px;
	height: 14px;
	box-sizing: border-box;
	border-radius: 50%;
	background: #fff;
	border: 1.5px solid var(--ns-color-dark);
	transition: transform .15s ease;
	pointer-events: none;
}

.ns-switch input:checked ~ .ns-switch-track {
	background: var(--ns-color-info);
}

.ns-switch input:checked ~ .ns-switch-thumb {
	transform: translateX(16px);
}

.ns-switch input:disabled ~ .ns-switch-track,
.ns-switch input:disabled ~ .ns-switch-thumb {
	opacity: .45;
}

.ns-switch input:disabled,
.ns-switch:has(input:disabled) {
	cursor: not-allowed;
}

/* ============================================================
   IMAGE UPLOAD SLOT — .ns-img-upload-slot / .ns-img-upload-slot-wide
   Kotak upload gambar single (klik untuk ganti), border solid dark,
   shadow-solid neo-brutalism -- resep persis
   .portal-company-info-logo-slot(-wide) di Info Perusahaan
   (dashboard_portal.css), DIGENERALISASI jadi reusable di input
   gambar mana pun. Versi persegi (default, 72x72) & persegi panjang
   (.ns-img-upload-slot-wide, 160x72). Overlay kamera tampil saat
   hover (tanpa perlu class "is-editing" ekstra -- selalu klik-able).
   Markup: <label class="ns-img-upload-slot" for="fileInputId">
   <img src="..." alt=""><span class="ns-img-upload-overlay">
   <i class="fas fa-camera"></i></span></label>
   <input type="file" id="fileInputId" class="d-none" accept="image/*">
   ============================================================ */

.ns-img-upload-slot {
	position: relative;
	flex: 0 0 auto;
	width: 72px;
	height: 72px;
	border-radius: var(--ns-radius-btn);
	border: 2px solid var(--ns-color-dark);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	box-shadow: var(--ns-shadow-solid);
	cursor: pointer;
}

.ns-img-upload-slot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ns-img-upload-slot-wide {
	width: 160px;
}

.ns-img-upload-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(4, 11, 24, .55);
	color: #fff;
	font-size: 18px;
	opacity: 0;
	transition: opacity .12s ease;
}

.ns-img-upload-slot:hover .ns-img-upload-overlay {
	opacity: 1;
}

/* ============================================================
   ACCORDION — .ns-accordion
   Dropdown/collapse sederhana ala nisea (bukan card AdminLTE
   collapsed-card, bukan Bootstrap data-toggle="collapse").
   Toggle murni lewat JS (class "open" pada .ns-accordion-item),
   dipakai pertama kali di tab Kredensial (Setup Program).
   ============================================================ */

.ns-accordion {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ns-accordion-item {
	border: 1px solid rgba(19, 46, 99, .12);
	border-radius: var(--ns-radius-btn);
	overflow: hidden;
	background: #fff;
}

.ns-accordion-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	cursor: pointer;
	background: rgba(76, 177, 255, .08);
	user-select: none;
	transition: background-color .15s ease;
}

.ns-accordion-header:hover {
	background: rgba(76, 177, 255, .16);
}

.ns-accordion-title {
	flex: 1 1 auto;
	color: var(--ns-color-primary);
	font-weight: 700;
	font-size: 13px;
}

.ns-accordion-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--ns-color-info), var(--ns-color-info-dark));
	color: #fff;
	font-size: 12px;
	flex: 0 0 auto;
}

.ns-accordion-caret {
	color: var(--ns-color-primary);
	font-size: 13px;
	transition: transform .18s ease;
	flex: 0 0 auto;
}

.ns-accordion-item.open .ns-accordion-caret {
	transform: rotate(180deg);
}

.ns-accordion-body {
	display: none;
	padding: 16px;
	border-top: 1px solid rgba(19, 46, 99, .08);
}

.ns-accordion-item.open .ns-accordion-body {
	display: block;
}

/* Form sejajar di dalam accordion — pola sama dengan .ns-modal .form-group */
.ns-accordion-body .form-group {
	display: flex;
	align-items: center;
	gap: 22px;
	margin-bottom: 14px;
}

.ns-accordion-body .form-group > label {
	flex: 0 0 150px;
	color: var(--ns-color-primary);
	font-weight: 400;
	margin-bottom: 0;
}

.ns-accordion-body .form-group.align-items-start > label {
	margin-top: 6px;
}

.ns-accordion-body .form-group > .form-control,
.ns-accordion-body .form-group > select {
	flex: 1 1 auto;
	min-width: 0;
}

.ns-checkbox-info:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

/* Varian neo-brutalism dari .ns-accordion (2026-08-27) -- dipakai di konteks Portal
   (border tebal, flat, tanpa gradient/shadow blur) yang beda gaya dari .ns-accordion
   dasar (Setup Program/Kredensial, gaya "soft" lama). Modifier class ditambah di
   ".ns-accordion" itu sendiri, sama pola dgn .ns-modal-confirm + .ns-modal-confirm-neo. */
.ns-accordion-neo .ns-accordion-item {
	border: 2px solid var(--ns-color-dark);
	border-radius: var(--ns-radius-btn);
	background: #ffffff;
}

.ns-accordion-neo .ns-accordion-header {
	background: #ffffff;
	padding: 14px 16px;
}

.ns-accordion-neo .ns-accordion-header:hover {
	background: rgba(4, 11, 24, 0.05);
}

.ns-accordion-neo .ns-accordion-title {
	color: var(--ns-color-dark);
	font-weight: 700;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.ns-accordion-neo .ns-accordion-icon {
	background: var(--ns-color-info);
	border-radius: var(--ns-radius-btn);
}

.ns-accordion-neo .ns-accordion-caret {
	color: var(--ns-color-dark);
}

.ns-accordion-neo .ns-accordion-body {
	border-top: 2px solid var(--ns-color-dark);
}

/* ============================================================
   DATEPICKER — restyle popup bootstrap-datepicker (2026-08-29)
   Plugin bawaan (assets/plugins/datepicker/datepicker3.css) 100% warna
   default Bootstrap lama (biru #428bca/#357ebd, hover/active abu-abu
   translucent). Di-override warna aksennya ke palet nisea + border neo-
   brutalism, TANPA sentuh file plugin-nya (supaya gampang update plugin
   nanti). Selector disamakan PERSIS sama grouping asli plugin biar semua
   state (hover/focus/disabled) ikut ke-cover, bukan cuma base-nya.
   ============================================================ */

.datepicker.dropdown-menu {
	border: 2px solid var(--ns-color-dark);
	border-radius: var(--ns-radius-btn);
	box-shadow: var(--ns-shadow-solid);
	padding: 6px;
}

.datepicker table tr td,
.datepicker table tr th {
	border-radius: var(--ns-radius-sm);
}

.datepicker th.datepicker-switch,
.datepicker th.prev,
.datepicker th.next {
	color: var(--ns-color-primary);
	font-weight: 700;
}

.datepicker th.prev:hover,
.datepicker th.next:hover,
.datepicker th.datepicker-switch:hover,
.datepicker thead tr:first-child th:hover,
.datepicker tfoot tr th:hover {
	background: rgba(76, 177, 255, .12);
}

.datepicker table tr td.day:hover,
.datepicker table tr td.day.focused {
	background: rgba(76, 177, 255, .15);
}

.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover {
	color: var(--ns-color-dark);
	background: rgba(242, 147, 38, .18);
	border-color: var(--ns-color-accent);
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.selected,
.datepicker table tr td.selected:hover,
.datepicker table tr td.range,
.datepicker table tr td.range:hover {
	color: #fff !important;
	background: var(--ns-color-info) !important;
	border-color: var(--ns-color-info-dark) !important;
	text-shadow: none !important;
}

.datepicker table tr td span.active,
.datepicker table tr td span.active:hover {
	color: #fff;
	background-color: var(--ns-color-info) !important;
	border-color: var(--ns-color-info-dark) !important;
	text-shadow: none;
}

/* Range dari-sampai digabung jadi 1 unit visual (2026-08-29) -- 2 input
   terpisah (.input-daterange input) ditempel jadi 1 input-group tanpa
   celah, radius cuma di ujung luar, dgn separator mdash di tengah.
   Pakai :first-of-type/:last-of-type (BUKAN :first-child/:last-child) --
   input kedua (#tglsampai) bukan last-child karena masih ada tombol
   kalender (#dtglrange) setelahnya, jadi :last-child gak pernah kena dan
   #tglsampai kebawa radius+border default (dobel border sama separator
   di sebelahnya). :last-of-type tetap kena karena cuma mengecek sesama
   elemen <input>, ngabaikan sibling non-input. */
.input-daterange input {
	text-align: center;
	border-radius: 0 !important;
}

.input-daterange input:first-of-type {
	border-top-left-radius: var(--ns-radius-sm) !important;
	border-bottom-left-radius: var(--ns-radius-sm) !important;
}

.input-daterange input:last-of-type {
	border-top-right-radius: var(--ns-radius-sm) !important;
	border-bottom-right-radius: var(--ns-radius-sm) !important;
	border-left: none !important;
}

.input-daterange .input-group-addon {
	border: 2px solid var(--ns-color-dark);
	border-left: none;
	border-right: none;
	background-color: #f1f5f9;
	color: var(--ns-color-primary);
	font-weight: 600;
}