/* custom.css — penyesuaian SIBEKAL di atas tema HUD.
   Dimuat SETELAH app.min.css (lihat partials/head.ejs). */

/* ------------------------------------------------------------------
 * Kartu kaca (glassmorphism): latar transparan + blur.
 * backdrop-filter butuh elemen yang benar-benar transparan di belakangnya,
 * jadi background bawaan kartu HUD ditimpa dengan lapisan putih tipis.
 * ------------------------------------------------------------------ */
.card {
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, 0.10);
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}

.card .card-header {
	background: rgba(255, 255, 255, 0.04);
	border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Kotak login ikut efek kaca */
.login .login-content {
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 0.5rem;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
	padding: 2.5rem;
}

/* Alert di atas kartu ikut selaras */
.alert {
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

/* ------------------------------------------------------------------
 * Sidebar
 * ------------------------------------------------------------------ */
#sidebar.app-sidebar {
	background: rgba(255, 255, 255, 0.03);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	border-right: 1px solid rgba(255, 255, 255, 0.08);
}

/* Panel profil pengguna di atas menu */
.sidebar-profile {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 16px 14px 8px;
	padding: 12px 14px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 12px;
}

.sidebar-profile-avatar {
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.35rem;
	color: #3cd6a3;
	background: rgba(36, 157, 121, 0.15);
	border: 1px solid rgba(60, 214, 163, 0.35);
	border-radius: 10px;
}

.sidebar-profile-name {
	font-weight: 600;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.9);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 160px;
}

.sidebar-profile-role {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.72rem;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}

.sidebar-role-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #3cd6a3;
	box-shadow: 0 0 6px rgba(60, 214, 163, 0.9);
}

/* Item menu: rounded + hover + transisi */
.app-sidebar .menu > .menu-item > .menu-link {
	margin: 2px 12px;
	padding: 9px 12px;
	border-radius: 10px;
	transition: background 0.18s ease, color 0.18s ease;
}

.app-sidebar .menu > .menu-item > .menu-link:hover {
	background: rgba(255, 255, 255, 0.06);
}

/* Ikon menu dalam kotak rounded */
.app-sidebar .menu > .menu-item > .menu-link .menu-icon {
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 9px;
	margin-right: 12px;
	transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

/* Item aktif: gradasi hijau + garis aksen + ikon menyala */
.app-sidebar .menu > .menu-item.active > .menu-link {
	background: linear-gradient(90deg, rgba(36, 157, 121, 0.28), rgba(36, 157, 121, 0.04));
	color: #fff;
}

.app-sidebar .menu > .menu-item.active > .menu-link .menu-icon {
	color: #3cd6a3;
	background: rgba(36, 157, 121, 0.18);
	border-color: rgba(60, 214, 163, 0.45);
	box-shadow: 0 0 10px rgba(60, 214, 163, 0.25);
}

/* Judul seksi menu */
.app-sidebar .menu .menu-header {
	display: flex;
	align-items: center;
	gap: 10px;
	letter-spacing: 3px;
	font-size: 0.66rem;
	color: rgba(255, 255, 255, 0.35);
	padding: 18px 26px 6px;
}

.app-sidebar .menu .menu-header::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.14), transparent);
}

/* ------------------------------------------------------------------
 * Kotak checklist satuan (form Rencana Distribusi)
 * ------------------------------------------------------------------ */
.satuan-box {
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 10px;
	padding: 8px 16px 8px 14px;
	background: rgba(255, 255, 255, 0.04);
	transition: border-color 0.15s ease, background 0.15s ease;
}

.satuan-box .form-check {
	margin-bottom: 0;
}

.satuan-box .form-check-input,
.satuan-box .form-check-label {
	cursor: pointer;
}

.satuan-box.aktif {
	border-color: rgba(60, 214, 163, 0.55);
	background: rgba(36, 157, 121, 0.14);
}

.satuan-box.aktif .form-check-label {
	color: #fff;
}

/* ------------------------------------------------------------------
 * Daftar jenis pada Grafik Utama gudang (master-detail donat)
 * ------------------------------------------------------------------ */
#daftarJenisDonut .list-group-item {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.10);
	color: rgba(255, 255, 255, 0.85);
	transition: background 0.15s ease, border-color 0.15s ease;
}

#daftarJenisDonut .list-group-item:hover {
	background: rgba(255, 255, 255, 0.08);
}

#daftarJenisDonut .list-group-item.active {
	background: rgba(36, 157, 121, 0.25);
	border-color: rgba(60, 214, 163, 0.55);
	color: #fff;
}

/* ------------------------------------------------------------------
 * Area grafik dashboard
 * ------------------------------------------------------------------ */
.chart-empty {
	min-height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.45);
	font-size: 0.9rem;
}

/* ------------------------------------------------------------------
 * Kontrol expand responsive DataTables (lingkaran +/-) pada tabel
 * penukaran: beri ruang kiri agar tidak menimpa teks, dan tengahkan
 * vertikal lingkarannya.
 * ------------------------------------------------------------------ */
#datatablePenukaran tbody td,
#datatablePenukaran thead th,
#datatableKembalian tbody td,
#datatableKembalian thead th {
	vertical-align: middle;
}

#datatablePenukaran tbody td:first-child,
#datatablePenukaran thead th:first-child,
#datatableKembalian tbody td:first-child,
#datatableKembalian thead th:first-child {
	text-align: center;
}

#datatablePenukaran .form-check-input,
#datatableKembalian .form-check-input {
	margin: 0;
	vertical-align: middle;
}

#datatablePenukaran tbody td.dtr-control,
#datatableKembalian tbody td.dtr-control {
	position: relative;
	padding-left: 2.6rem;
}

#datatablePenukaran tbody td.dtr-control::before,
#datatableKembalian tbody td.dtr-control::before {
	top: 50%;
	transform: translateY(-50%);
	left: 0.8rem;
	margin-top: 0;
}

/* ------------------------------------------------------------------
 * Bento grid — Dashboard utama
 * Petak berukuran seragam (1x1) yang bisa melebar (.bento-c2) dan/atau
 * meninggi (.bento-r2) untuk membentuk susunan "bento box". Turun ke 2
 * kolom di <lg, 1 kolom (semua petak kembali span 1) di <md.
 * ------------------------------------------------------------------ */
.bento-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 1.5rem;
}

.bento-grid > .card {
	margin-bottom: 0;
	height: 100%;
}

.bento-c2 {
	grid-column: span 2;
}

.bento-r2 {
	grid-row: span 2;
}

.bento-grid .card-body {
	display: flex;
	flex-direction: column;
}

@media (max-width: 1199.98px) {
	.bento-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767.98px) {
	.bento-grid {
		grid-template-columns: 1fr;
	}

	.bento-grid .bento-c2,
	.bento-grid .bento-r2 {
		grid-column: span 1;
		grid-row: span 1;
	}
}

/* Petak stat kecil (1x1): angka besar + ikon, isi rata tengah vertikal. */
.bento-stat {
	justify-content: center;
}

.bento-stat .bento-stat-icon {
	font-size: 1.5rem;
}

.bento-stat .bento-stat-value {
	font-size: 1.9rem;
	font-weight: 700;
	line-height: 1.2;
}

/* Petak stat yang bisa diklik (link ke halaman terkait). */
a.bento-stat-link {
	text-decoration: none;
	color: inherit;
	display: block;
	transition: transform .15s, border-color .15s, box-shadow .15s;
}
a.bento-stat-link:hover {
	color: inherit;
	transform: translateY(-2px);
	border-color: var(--bs-theme);
	box-shadow: 0 6px 20px rgba(0,0,0,.28);
}
a.bento-stat-link .bento-stat-value { color: var(--bs-theme); }

/* Kartu slide jumlah item per gudang: transisi memudar saat berganti. */
.stok-slide { transition: opacity .22s ease; }
.stok-slide.memudar { opacity: 0; }
.stok-slide .stok-slide-gudang {
	font-size: .95rem; line-height: 1.2; margin-bottom: .1rem; color: var(--bs-body-color);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stok-slide .bento-stat-value { font-size: 1.6rem; }
.stok-slide .stok-slide-nama {
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Daftar insight "Resume Analisis" & "Aktivitas Terakhir". */
.insight-list,
.aktivitas-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.insight-list li,
.aktivitas-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.insight-list li:last-child,
.aktivitas-list li:last-child {
	border-bottom: none;
}

.insight-list .insight-icon {
	flex-shrink: 0;
	margin-top: 2px;
}

.aktivitas-list .aktivitas-waktu {
	flex-shrink: 0;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.45);
	font-size: 0.78rem;
}

/* ===== Tabel responsif: menumpuk jadi kartu di layar HP (<=767px) ===== */
@media (max-width: 767.98px) {
	table.tabel-responsif thead { display: none; }
	table.tabel-responsif,
	table.tabel-responsif > tbody { display: block; width: 100%; }
	table.tabel-responsif > tbody > tr:not(.collapse) {
		display: block;
		border: 1px solid var(--bs-border-color-translucent, rgba(255,255,255,.15));
		border-radius: .6rem;
		margin-bottom: .6rem;
		padding: .5rem .75rem;
		background: rgba(255,255,255,.02);
	}
	table.tabel-responsif > tbody > tr.collapse:not(.show) { display: none; }
	table.tabel-responsif > tbody > tr.collapse.show { display: block; }
	table.tabel-responsif > tbody > tr > td {
		display: block;
		border: none !important;
		padding: .3rem 0;
		text-align: left;
		white-space: normal;
		max-width: 100%;
	}
	table.tabel-responsif > tbody > tr > td::before {
		content: attr(data-label);
		display: block;
		font-weight: 700;
		font-size: .66rem;
		text-transform: uppercase;
		letter-spacing: .03em;
		color: rgba(255,255,255,.5);
		margin-bottom: .15rem;
	}
	table.tabel-responsif > tbody > tr > td[colspan]::before,
	table.tabel-responsif > tbody > tr > td[data-label=""]::before,
	table.tabel-responsif > tbody > tr > td:not([data-label])::before { content: none; }
	/* baris aksi (form collapse) tampil penuh tanpa kartu ganda */
	table.tabel-responsif > tbody > tr.collapse > td { padding: 0; }
}

/* ==========================================================================
   Badge notifikasi pada item menu sidebar (mis. "Barang Masuk").
   Muncul di ujung kanan menu-link (menu-text pakai flex:1 sehingga badge
   terdorong ke kanan). Dipakai role Admin Gudang & Mabesad untuk menandai
   pengadaan yang menunggu tindakan mereka.
   ========================================================================== */
#sidebar .menu-item .menu-link .menu-badge-notif {
	flex: 0 0 auto;
	margin-left: .5rem;
	min-width: 1.15rem;
	height: 1.15rem;
	padding: 0 .35rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: .68rem;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	background: #dc3545;
	border-radius: 999px;
	box-shadow: 0 0 0 2px rgba(220,53,69,.25);
}

/* ==========================================================================
   Kolom "Aksi" berbasis IKON (tanpa teks) — tombol persegi seukuran, sebaris,
   tidak menumpuk. Dipakai di tabel Manajemen Akun (views/akun.ejs) dsb.
   ========================================================================== */
.aksi-ikon {
	display: inline-flex;
	flex-wrap: nowrap;
	gap: .35rem;
	justify-content: flex-end;
	align-items: center;
}
.aksi-ikon .btn-aksi {
	width: 2rem;
	height: 2rem;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	flex: 0 0 auto;
}
.aksi-ikon .btn-aksi > i { font-size: 1rem; margin: 0; }
.aksi-ikon form { display: inline-flex; margin: 0; }
/* Di tampilan kartu (mobile) baris aksi rata kiri mengikuti sel lain. */
@media (max-width: 767.98px) {
	table.tabel-responsif .aksi-ikon { justify-content: flex-start; }
}

/* ==========================================================================
   SPOTLIGHT — pencarian item stok lintas-gudang (trigger di sidebar + modal).
   ========================================================================== */
/* Trigger di sidebar (paling atas) */
.spotlight-trigger {
	width: 100%;
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem .75rem;
	border: 1px solid rgba(255,255,255,.14);
	border-radius: .5rem;
	background: rgba(255,255,255,.05);
	color: rgba(255,255,255,.75);
	font-size: .8rem;
	transition: border-color .15s, background .15s;
}
.spotlight-trigger:hover { border-color: var(--bs-theme); background: rgba(255,255,255,.09); color: #fff; }
.spotlight-trigger .spotlight-trigger-text { flex: 1; text-align: left; }
.spotlight-trigger .spotlight-kbd {
	font-size: .68rem; padding: .1rem .35rem; border-radius: .3rem;
	background: rgba(255,255,255,.12); color: rgba(255,255,255,.6);
}

/* Dialog di dekat atas layar ala spotlight */
.spotlight-dialog { margin-top: 7vh; }
.spotlight-dialog .modal-content { overflow: hidden; }

/* Baris pencarian (header modal) */
.spotlight-search {
	display: flex; align-items: center; gap: .65rem;
	padding: .85rem 1.1rem;
	border-bottom: 1px solid var(--bs-border-color-translucent);
}
.spotlight-search > .bi { font-size: 1.2rem; color: var(--bs-theme); }
.spotlight-input {
	flex: 1; border: 0; background: transparent; outline: none;
	color: var(--bs-body-color); font-size: 1.1rem; padding: .1rem 0;
}
.spotlight-input::placeholder { color: rgba(255,255,255,.35); }

.spotlight-body { padding: 0; max-height: 68vh; }
.spotlight-body > .row { min-height: 320px; }
.spotlight-results-col { border-right: 1px solid var(--bs-border-color-translucent); }
.spotlight-hint { padding: 1rem 1.1rem; font-size: .8rem; color: rgba(255,255,255,.5); }
.spotlight-results { max-height: 62vh; overflow-y: auto; }
.spotlight-empty { padding: 1rem 1.1rem; font-size: .85rem; }

/* Baris hasil */
.spotlight-item {
	width: 100%; display: flex; align-items: center; gap: .75rem;
	padding: .6rem 1.1rem; border: 0; background: transparent; text-align: left;
	border-bottom: 1px solid rgba(255,255,255,.05); color: var(--bs-body-color);
}
.spotlight-item:hover { background: rgba(255,255,255,.05); }
.spotlight-item.active { background: color-mix(in srgb, var(--bs-theme) 18%, transparent); }
.spotlight-item-main { flex: 1; min-width: 0; }
.spotlight-item-nama { font-weight: 600; }
.spotlight-item-sub { font-size: .72rem; color: rgba(255,255,255,.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spotlight-item-stok { text-align: right; flex-shrink: 0; }
.spotlight-item-jumlah { font-weight: 700; font-size: 1rem; line-height: 1; }
.spotlight-item-satuan { font-size: .68rem; color: rgba(255,255,255,.45); }

/* Kartu profil (detail) */
.spotlight-detail { padding: 1.1rem 1.25rem; max-height: 62vh; overflow-y: auto; }
.spotlight-detail-empty { text-align: center; padding: 3rem 1rem; }
.spotlight-detail-head { margin-bottom: .85rem; }
.spotlight-detail-jenis { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bs-theme); font-weight: 700; }
.spotlight-detail-nama { font-size: 1.25rem; font-weight: 700; line-height: 1.2; }

.spotlight-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: .85rem 0; }
.spotlight-stat { background: rgba(255,255,255,.05); border-radius: .5rem; padding: .6rem .4rem; text-align: center; }
.spotlight-stat-num { font-size: 1.35rem; font-weight: 700; line-height: 1; }
.spotlight-stat-lbl { font-size: .68rem; color: rgba(255,255,255,.5); margin-top: .2rem; }

.spotlight-detail-sub { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: rgba(255,255,255,.5); font-weight: 700; margin: 1rem 0 .5rem; }

/* Bar sebaran per gudang */
.spotlight-bars { display: flex; flex-direction: column; gap: .4rem; }
.spotlight-bar-row { display: grid; grid-template-columns: 40% 1fr auto; align-items: center; gap: .5rem; }
.spotlight-bar-label { font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spotlight-bar-track { height: 8px; background: rgba(255,255,255,.08); border-radius: 4px; overflow: hidden; }
.spotlight-bar-fill { height: 100%; background: var(--bs-theme); border-radius: 4px; }
.spotlight-bar-val { font-size: .78rem; font-weight: 600; min-width: 3ch; text-align: right; }

/* Chip ukuran / lot */
.spotlight-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.spotlight-chip { font-size: .75rem; padding: .2rem .5rem; border-radius: 1rem; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); }
.spotlight-chip-uk { font-weight: 700; color: var(--bs-theme); }

@media (max-width: 991.98px) {
	.spotlight-results-col { border-right: 0; border-bottom: 1px solid var(--bs-border-color-translucent); }
	.spotlight-results { max-height: 34vh; }
	.spotlight-detail { max-height: 40vh; }
}

/* ==========================================================================
   DASHBOARD: Tugas Anda + Timeline Pipeline + Toast notifikasi.
   ========================================================================== */
.kartu-tugas .card-body { padding-top: 1rem; }

/* Timeline pipeline: strip tahap alur distribusi */
.pipeline {
	display: flex;
	align-items: flex-start;
	gap: 0;
	overflow-x: auto;
	padding: .25rem 0 .5rem;
}
.pipeline-stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .35rem;
	min-width: 84px;
	flex: 0 0 auto;
	text-align: center;
}
.pipeline-dot {
	width: 2.4rem; height: 2.4rem;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	font-weight: 700; font-size: .95rem;
	background: rgba(255,255,255,.06);
	border: 2px solid rgba(255,255,255,.14);
	color: rgba(255,255,255,.65);
}
.pipeline-stage.ada .pipeline-dot { color: #fff; border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.1); }
.pipeline-stage.milik-saya .pipeline-dot {
	background: var(--bs-theme);
	border-color: var(--bs-theme);
	color: var(--bs-theme-color, #000);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--bs-theme) 25%, transparent);
	animation: pulseTugas 2s ease-in-out infinite;
}
@keyframes pulseTugas { 0%,100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--bs-theme) 25%, transparent); } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--bs-theme) 8%, transparent); } }
.pipeline-label { font-size: .68rem; color: rgba(255,255,255,.6); line-height: 1.1; max-width: 84px; }
.pipeline-stage.milik-saya .pipeline-label { color: var(--bs-theme); font-weight: 700; }
.pipeline-conn { flex: 1 1 auto; min-width: 16px; height: 2px; background: rgba(255,255,255,.14); margin-top: 1.2rem; }

/* Kartu tugas (action item) */
.tugas-item {
	display: flex; align-items: center; gap: .65rem;
	padding: .6rem .75rem; height: 100%; width: 100%;
	border: 1px solid rgba(255,255,255,.1); border-left-width: 3px;
	border-radius: .55rem; text-decoration: none; color: var(--bs-body-color);
	background: rgba(255,255,255,.03); transition: background .15s, border-color .15s;
	font: inherit; text-align: left; cursor: pointer;
}
.tugas-item:hover { background: rgba(255,255,255,.07); color: var(--bs-body-color); }
.tugas-ikon { font-size: 1.25rem; flex: 0 0 auto; width: 1.75rem; text-align: center; }
.tugas-teks { flex: 1; min-width: 0; }
.tugas-label { font-weight: 600; font-size: .85rem; line-height: 1.15; }
.tugas-sub { font-size: .7rem; color: rgba(255,255,255,.5); }
.tugas-jumlah {
	flex: 0 0 auto; min-width: 1.6rem; height: 1.6rem; padding: 0 .4rem;
	display: inline-flex; align-items: center; justify-content: center;
	font-weight: 700; border-radius: 1rem; background: var(--bs-theme); color: var(--bs-theme-color, #000);
}
.tugas-warning { border-left-color: var(--bs-warning); } .tugas-warning .tugas-ikon { color: var(--bs-warning); }
.tugas-info    { border-left-color: var(--bs-info); }    .tugas-info .tugas-ikon    { color: var(--bs-info); }
.tugas-primary { border-left-color: var(--bs-theme); }   .tugas-primary .tugas-ikon { color: var(--bs-theme); }

/* Toast notifikasi (pojok kanan bawah) */
#tugasToastWrap {
	position: fixed; right: 1rem; bottom: 1rem; z-index: 1090;
	display: flex; flex-direction: column; gap: .5rem; max-width: min(92vw, 360px);
}
.tugas-toast {
	display: flex; align-items: flex-start; gap: .6rem;
	background: var(--bs-body-bg, #1a1d24); color: var(--bs-body-color);
	border: 1px solid var(--bs-border-color-translucent); border-left: 3px solid var(--bs-theme);
	border-radius: .6rem; padding: .7rem .8rem; box-shadow: 0 8px 28px rgba(0,0,0,.4);
	text-decoration: none; animation: toastMasuk .25s ease-out;
}
@keyframes toastMasuk { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.tugas-toast .bi { color: var(--bs-theme); font-size: 1.15rem; }
.tugas-toast .tt-judul { font-weight: 700; font-size: .85rem; }
.tugas-toast .tt-teks { font-size: .75rem; color: rgba(255,255,255,.65); }
.tugas-toast .tt-close { margin-left: auto; background: none; border: 0; color: rgba(255,255,255,.5); font-size: 1rem; line-height: 1; cursor: pointer; }

/* Search bar CARI STOK (mobile) — tampil langsung di atas konten. Fitur utama. */
.cari-bar-mobile {
	width: 100%;
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 0 0 1rem;
	padding: .7rem 1rem;
	border: 1px solid rgba(255,255,255,.18);
	border-radius: 999px;
	background: rgba(255,255,255,.06);
	color: rgba(255,255,255,.55);
	font-size: .95rem;
	text-align: left;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.cari-bar-mobile:active { background: rgba(255,255,255,.1); }
.cari-bar-mobile > .bi { color: var(--bs-theme); font-size: 1.15rem; }
.cari-bar-mobile .cari-bar-teks { flex: 1; }