/* ==================================================================
   Frida Plastik POS — Theme
   Lapisan tampilan modern di atas Bootstrap 2 + template lama.
   Dimuat paling akhir agar menimpa gaya bawaan.
   ================================================================== */

:root {
	/* Brand */
	--brand: #d6453b;
	--brand-600: #bb382f;
	--brand-700: #9c2e27;
	--brand-50: #fdf1f0;
	--brand-100: #f9dcd9;

	/* Netral hangat */
	--bg: #f6f5f3;
	--surface: #ffffff;
	--surface-2: #faf9f7;
	--surface-3: #f1efec;
	--border: #e7e4e0;
	--border-strong: #d5d0ca;
	--text: #1f1d1b;
	--text-2: #57524d;
	--muted: #8a847d;

	/* Status */
	--success: #2f8a57;
	--success-50: #ebf6ef;
	--warning: #a8681a;
	--warning-50: #fdf4e4;
	--info: #346a8c;
	--info-50: #eaf2f7;
	--slate: #33414b;

	/* Bentuk */
	--radius-lg: 14px;
	--radius: 10px;
	--radius-sm: 8px;
	--radius-xs: 6px;
	--shadow-sm: 0 1px 2px rgba(60, 40, 30, .06);
	--shadow: 0 1px 2px rgba(60, 40, 30, .05), 0 4px 14px rgba(60, 40, 30, .06);
	--shadow-lg: 0 10px 40px rgba(50, 30, 20, .16), 0 2px 6px rgba(50, 30, 20, .08);
	--ring: 0 0 0 3px rgba(214, 69, 59, .22);

	--font: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
	--ease: cubic-bezier(.2, .8, .2, 1);

	/* Lapisan */
	--z-header: 1030;
	--z-mega: 1035;
	--z-drawer: 1045;
	--z-modal: 1050;
}

/* ------------------------------------------------------------------
   Dasar
   ------------------------------------------------------------------ */
html { scroll-behavior: smooth; scrollbar-gutter: stable; }

body,
body.app,
body.auth {
	background: var(--bg);
	color: var(--text);
	font: 14px/1.55 var(--font);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

p { font: inherit; font-size: 14px; line-height: 1.6; }

input, button, select, textarea,
.navbar .brand, .btn, .dropdown-menu, .modal, .tooltip, .popover { font-family: var(--font); }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font);
	color: var(--text);
	font-weight: 700;
	letter-spacing: -.01em;
	text-rendering: optimizeLegibility;
}
h1 { font-size: 26px; line-height: 1.2; letter-spacing: -.02em; }
h2 { font-size: 21px; line-height: 1.25; }
h3 { font-size: 17px; line-height: 1.3; }
h4 { font-size: 15px; line-height: 1.35; }

a { color: var(--brand-600); transition: color .15s var(--ease); }
a:hover, a:focus { color: var(--brand-700); }

hr { border-top-color: var(--border); border-bottom: 0; margin: 16px 0; }

strong, b { font-weight: 700; }

.muted, .text-muted { color: var(--muted) !important; }
.tabular, .table td, .uang-belanja, .uang-belanja-sans { font-variant-numeric: tabular-nums; }

::selection { background: var(--brand-100); color: var(--text); }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

kbd, .kbd {
	display: inline-block;
	min-width: 20px;
	padding: 1px 6px;
	font: 600 11.5px/18px var(--font);
	color: var(--text-2);
	text-align: center;
	background: var(--surface);
	border: 1px solid var(--border-strong);
	border-bottom-width: 2px;
	border-radius: var(--radius-xs);
	vertical-align: 1px;
}

.skip-link {
	position: absolute;
	top: -60px;
	left: 16px;
	z-index: 2000;
	padding: 10px 16px;
	background: var(--text);
	color: #fff;
	border-radius: var(--radius-sm);
	font-weight: 600;
}
.skip-link:focus { top: 12px; color: #fff; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
	html { scroll-behavior: auto; }
}

/* ------------------------------------------------------------------
   Header aplikasi + mega-menu
   ------------------------------------------------------------------ */
.app-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background: rgba(255, 255, 255, .94);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid var(--border);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset;
}
.app-header::before {
	content: "";
	display: block;
	height: 3px;
	background: var(--brand);
}

.app-header__bar {
	display: flex;
	align-items: center;
	gap: 16px;
	height: 60px;
}

.app-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
	color: var(--text);
	text-decoration: none !important;
	max-width: 220px;
}
.app-brand:hover, .app-brand:focus { color: var(--text); }
.app-brand__mark {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: 10px;
	background: var(--brand);
	color: #fff;
	font-weight: 800;
	font-size: 14px;
	letter-spacing: -.02em;
	box-shadow: 0 2px 6px rgba(214, 69, 59, .35);
}
.app-brand__mark--logo { width: 38px; height: 38px; padding: 0; background: transparent; box-shadow: none; }
.app-brand__mark--logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.app-brand__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.app-brand__text strong {
	font-size: 14.5px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.app-brand__text small { font-size: 11.5px; color: var(--muted); font-weight: 500; }

.app-nav { flex: 1; min-width: 0; }
.app-nav__list {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.app-nav__item { position: relative; }

.app-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 38px;
	padding: 0 11px;
	border: 0;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--text-2);
	font: 600 13.5px/1 var(--font);
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none !important;
	transition: background-color .15s var(--ease), color .15s var(--ease);
}
.app-nav__link [class^="icon-"], .app-nav__link [class*=" icon-"] { font-size: 14px; color: var(--muted); transition: color .15s; }
.app-nav__link:hover, .app-nav__link:focus, .app-nav__item.is-open > .app-nav__link {
	background: var(--surface-3);
	color: var(--text);
}
.app-nav__link.is-active { color: var(--brand-600); background: var(--brand-50); }
.app-nav__link.is-active [class^="icon-"], .app-nav__link.is-active [class*=" icon-"] { color: var(--brand); }
.app-nav__caret { font-size: 10px !important; margin-left: -1px; transition: transform .2s var(--ease); }
.app-nav__item.is-open .app-nav__caret { transform: rotate(180deg); }

.mega {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	z-index: var(--z-mega);
	width: 560px;
	max-width: calc(100vw - 32px);
	padding: 8px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s linear .18s;
}
.mega--wide { width: 760px; }
.mega--right { left: auto; right: 0; }
.app-nav__item.is-open > .mega {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s;
}
.mega__intro {
	padding: 10px 12px 12px;
	margin-bottom: 4px;
	border-bottom: 1px solid var(--border);
}
.mega__title { margin: 0 0 2px; font-weight: 700; font-size: 14px; color: var(--text); }
.mega__intro p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.mega__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px;
	margin: 0;
	padding: 4px 0 0;
	list-style: none;
}
.mega--wide .mega__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mega__item {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 10px;
	border-radius: var(--radius);
	color: var(--text);
	text-decoration: none !important;
	transition: background-color .15s var(--ease);
}
.mega__item:hover, .mega__item:focus { background: var(--surface-2); color: var(--text); }
.mega__item.is-active { background: var(--brand-50); }
.mega__icon {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: 9px;
	background: var(--surface-3);
	color: var(--text-2);
	font-size: 15px;
	transition: background-color .15s, color .15s;
}
.mega__item:hover .mega__icon, .mega__item.is-active .mega__icon { background: var(--brand-100); color: var(--brand-600); }
.mega__item--danger .mega__label { color: var(--brand-600); }
.mega__body { display: flex; flex-direction: column; min-width: 0; }
.mega__label { font-weight: 600; font-size: 13.5px; line-height: 1.3; }
.mega__label .icon-external-link { font-size: 11px; color: var(--muted); margin-left: 3px; }
.mega__desc { margin-top: 2px; font-size: 12.5px; color: var(--muted); line-height: 1.4; }

/* User menu */
.app-user { position: relative; margin-left: auto; flex: none; }
.app-user__btn {
	display: flex;
	align-items: center;
	gap: 9px;
	height: 42px;
	padding: 0 8px 0 4px;
	border: 1px solid transparent;
	border-radius: 12px;
	background: transparent;
	cursor: pointer;
	transition: background-color .15s, border-color .15s;
}
.app-user__btn:hover, .app-user.is-open .app-user__btn { background: var(--surface-2); border-color: var(--border); }
.app-avatar {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--slate);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
}
.app-user__meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; max-width: 130px; }
.app-user__name { font-weight: 600; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.app-user__role { font-size: 11.5px; color: var(--muted); }
.app-user__menu {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	z-index: var(--z-mega);
	width: 240px;
	padding: 6px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s linear .18s;
}
.app-user.is-open .app-user__menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.app-user__head { padding: 10px 12px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.app-user__head strong { display: block; font-size: 13.5px; }
.app-user__head span { font-size: 12px; color: var(--muted); }
.app-user__menu a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border-radius: var(--radius-sm);
	color: var(--text);
	font-weight: 500;
	text-decoration: none;
}
.app-user__menu a:hover { background: var(--surface-2); }
.app-user__menu a.is-danger { color: var(--brand-600); }
.app-user__menu a.is-danger:hover { background: var(--brand-50); }

.app-nav-toggle {
	display: none;
	width: 40px;
	height: 40px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--text);
	font-size: 16px;
	cursor: pointer;
}

/* Layar laptop: ringkas agar semua menu muat dalam satu baris */
/* Kontainer Bootstrap 2 selalu 1170px di layar ≥1200px, berapa pun lebar monitornya */
@media (min-width: 1200px) {
	.app-header__bar { gap: 12px; }
	.app-nav { flex: 1 1 auto; }
	.app-nav__list { flex-wrap: nowrap; }
	.app-nav__link { padding: 0 9px; gap: 5px; font-size: 13px; }
	.app-nav__link > [class^="icon-"]:first-child { display: none; }
	.app-brand { max-width: 170px; }
	.app-user__meta { max-width: 96px; }
}

/* Navigasi mobile / tablet */
@media (max-width: 1199px) {
	/* backdrop-filter membuat elemen fixed di dalamnya ikut terkurung — matikan di layar kecil */
	.app-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface); }
	.app-nav-toggle { display: grid; place-items: center; order: -1; }
	.app-user__meta { display: none; }
	.app-nav {
		position: fixed;
		top: 63px;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: var(--z-drawer);
		padding: 12px 16px 32px;
		background: var(--surface);
		overflow-y: auto;
		overscroll-behavior: contain;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
	}
	body.nav-open .app-nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
	body.nav-open { overflow: hidden; }
	.app-nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
	.app-nav__link { width: 100%; height: 46px; font-size: 15px; padding: 0 12px; }
	.app-nav__caret { margin-left: auto !important; }
	.mega, .mega--wide {
		position: static;
		width: auto;
		max-width: none;
		padding: 0 0 8px 8px;
		border: 0;
		box-shadow: none;
		display: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: none;
	}
	.app-nav__item.is-open > .mega { display: block; }
	.mega__intro { display: none; }
	.mega__grid, .mega--wide .mega__grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
	.app-brand__text small { display: none; }
	.app-brand { max-width: 170px; }
}

/* ------------------------------------------------------------------
   Kepala halaman (judul + penjelasan)
   ------------------------------------------------------------------ */
.page-head {
	padding: 22px 0 4px;
}
.crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-bottom: 6px;
	font-size: 12.5px;
	color: var(--muted);
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.crumbs .icon-angle-right { font-size: 11px; opacity: .7; }
.page-head__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head h1 { margin: 0; font-size: 24px; }
.page-head__desc { margin: 4px 0 0; max-width: 68ch; color: var(--text-2); font-size: 14px; text-wrap: pretty; }
.page-help-toggle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 34px;
	padding: 0 12px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--surface);
	color: var(--text-2);
	font: 600 13px/1 var(--font);
	cursor: pointer;
	transition: background-color .15s, border-color .15s;
}
.page-help-toggle:hover, .page-help-toggle[aria-expanded="true"] { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); }
.page-help-toggle [class^="icon-"] { color: var(--info); }
.page-help {
	margin-top: 14px;
	padding: 14px 18px 14px 16px;
	background: var(--info-50);
	border: 1px solid #d5e4ee;
	border-radius: var(--radius);
	color: #29475b;
}
.page-help[hidden] { display: none; }
.page-help__title { margin: 0 0 6px; font-weight: 700; font-size: 13px; }
.page-help ol { margin: 0 0 0 18px; }
.page-help li { margin: 3px 0; font-size: 13.5px; line-height: 1.5; }

.page-head--compact { padding: 14px 0 0; }
.page-head--compact h1 { font-size: 20px; }
.page-head--compact .page-head__desc { font-size: 13px; }

/* ------------------------------------------------------------------
   Area konten & kartu (.widget)
   ------------------------------------------------------------------ */
.main { padding: 18px 0 56px; }
.main-inner { padding: 0; }

.widget {
	margin-bottom: 24px;
	overflow: visible;
	background: transparent;
}

.widget-header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 12px;
	height: auto;
	min-height: 54px;
	line-height: 1.3;
	padding: 10px 18px !important;
	background: var(--surface) !important;
	filter: none !important;
	border: 1px solid var(--border);
	border-bottom-color: var(--border);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	box-sizing: border-box;
}
.widget-header h3 {
	position: static;
	display: inline-block;
	margin: 0;
	font-size: 15.5px;
	font-weight: 700;
	color: var(--text);
	line-height: 1.3;
	text-shadow: none;
}
.widget-header > a { text-decoration: none; color: inherit; }
.widget-header [class^="icon-"], .widget-header [class*=" icon-"] {
	margin: 0;
	font-size: 15px;
	color: var(--muted);
}
.widget-header .pull-right, .widget-header .btn.pull-right { float: none; margin-left: auto; }
.widget-header .btn { margin-top: 0 !important; }
.widget-header h4 { margin: 0 !important; font-size: 13.5px; font-weight: 600; color: var(--text-2); }

.widget-content {
	padding: 20px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	zoom: normal;
}
.widget-header + .widget-content {
	border-top: 0;
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.widget-nopad .widget-content, .widget-table .widget-content { padding: 0; }

/* Kartu generik baru */
.card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}
.card__head {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 14px 18px;
	border-bottom: 1px solid var(--border);
}
.card__head h2, .card__head h3 { margin: 0; font-size: 15.5px; }
.card__head .card__actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.card__body { padding: 18px; }
.card__foot { padding: 12px 18px; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.toolbar__spacer { flex: 1; }

.note {
	display: flex;
	gap: 10px;
	padding: 12px 14px;
	border-radius: var(--radius);
	background: var(--surface-2);
	border: 1px solid var(--border);
	color: var(--text-2);
	font-size: 13.5px;
}
.note [class^="icon-"] { margin-top: 2px; color: var(--info); }
.note--warning { background: var(--warning-50); border-color: #f1dfbd; color: #6d4a17; }
.note--warning [class^="icon-"] { color: var(--warning); }
.note--danger { background: var(--brand-50); border-color: var(--brand-100); color: var(--brand-700); }
.note--danger [class^="icon-"] { color: var(--brand); }

/* ------------------------------------------------------------------
   Tombol
   ------------------------------------------------------------------ */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 8px 14px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 20px;
	color: var(--text);
	text-shadow: none;
	background: var(--surface);
	background-image: none !important;
	filter: none !important;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	box-shadow: 0 1px 0 rgba(60, 40, 30, .04);
	vertical-align: middle;
	transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s, box-shadow .15s, transform .1s;
}
.btn:hover, .btn:focus {
	color: var(--text);
	background: var(--surface-2);
	border-color: #c6c0b9;
	text-decoration: none;
	background-position: 0 0;
}
.btn:active, .btn.active { transform: translateY(1px); box-shadow: none; background-color: var(--surface-3); }
.btn:focus { outline: 0; }
.btn:focus-visible { box-shadow: var(--ring); outline: 0; }
.btn.disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.btn [class^="icon-"], .btn [class*=" icon-"] { margin: 0; font-size: 14px; }

.btn-primary, .btn-primary:hover, .btn-primary:focus,
.btn-success, .btn-success:hover, .btn-success:focus,
.btn-info, .btn-info:hover, .btn-info:focus,
.btn-warning, .btn-warning:hover, .btn-warning:focus,
.btn-inverse, .btn-inverse:hover, .btn-inverse:focus { color: #fff; }

.btn-primary { background-color: var(--brand); border-color: var(--brand-600); box-shadow: 0 1px 2px rgba(156, 46, 39, .25); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--brand-600); border-color: var(--brand-700); }
.btn-primary:active, .btn-primary.active { background-color: var(--brand-700); }

.btn-success { background-color: var(--success); border-color: #277549; }
.btn-success:hover, .btn-success:focus { background-color: #277549; border-color: #1f5f3b; }
.btn-success:active { background-color: #1f5f3b; }

.btn-info { background-color: var(--slate); border-color: #27323a; }
.btn-info:hover, .btn-info:focus { background-color: #27323a; border-color: #1d262c; }
.btn-info:active { background-color: #1d262c; }

.btn-warning { background-color: #c47e22; border-color: #a8681a; }
.btn-warning:hover, .btn-warning:focus { background-color: #a8681a; border-color: #8c5615; }

.btn-danger { color: var(--brand-600); background-color: var(--brand-50); border-color: var(--brand-100); box-shadow: none; }
.btn-danger:hover, .btn-danger:focus { color: #fff; background-color: var(--brand); border-color: var(--brand-600); }
.btn-danger:active { background-color: var(--brand-700); color: #fff; }

.btn-inverse { background-color: #2b2724; border-color: #1f1c1a; }
.btn-inverse:hover, .btn-inverse:focus { background-color: #1f1c1a; }

.btn-link { border-color: transparent; background: transparent; box-shadow: none; color: var(--brand-600); }
.btn-link:hover { background: transparent; border-color: transparent; text-decoration: underline; color: var(--brand-700); }

.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-3); border-color: transparent; }

.btn-large { padding: 11px 20px; font-size: 15px; border-radius: 10px; }
.btn-small { padding: 5px 10px; font-size: 12.5px; line-height: 18px; }
.btn-mini { padding: 2px 8px; font-size: 12px; line-height: 16px; border-radius: var(--radius-xs); }
.btn-block { display: flex; width: 100%; box-sizing: border-box; }

/* Tombol polos yang tidak memakai kelas .btn (mis. tombol import lama) */
button:not(.btn):not(.close):not([class*="app-"]):not(.page-help-toggle):not([class*="swal"]):not([class*="dt-"]):not(.navbar-toggle):not(.dropdown-toggle):not(.qty-btn):not(.chip):not([class*="ei-"]):not(.pos-meta__ganti):not(.ganti-umum) {
	padding: 7px 13px;
	font: 600 13px/20px var(--font);
	color: var(--text);
	background: var(--surface);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background-color .15s, border-color .15s;
}
button:not(.btn):not(.close):not([class*="app-"]):not(.page-help-toggle):not([class*="swal"]):not([class*="dt-"]):not(.navbar-toggle):not(.dropdown-toggle):not(.qty-btn):not(.chip):not([class*="ei-"]):not(.pos-meta__ganti):not(.ganti-umum):hover { background: var(--surface-2); }

/* ------------------------------------------------------------------
   Formulir
   ------------------------------------------------------------------ */
label, .control-label { font-weight: 600; font-size: 13px; color: var(--text-2); }

select,
textarea,
input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"],
input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"],
input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"],
.uneditable-input {
	height: 20px;
	padding: 8px 11px;
	font-size: 14px;
	line-height: 20px;
	color: var(--text);
	background-color: var(--surface);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	box-shadow: none;
	transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background-color .15s;
}
textarea { height: auto; }
select { height: 38px; padding: 0 10px; line-height: 38px; }
select[multiple], select[size] { height: auto; }

input:focus, textarea:focus, select:focus,
input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus,
input[type="date"]:focus, input[type="email"]:focus, input[type="search"]:focus, input[type="tel"]:focus,
textarea:focus, .uneditable-input:focus {
	border-color: var(--brand);
	outline: 0;
	box-shadow: var(--ring);
}

input[readonly], select[readonly], textarea[readonly],
input[disabled], select[disabled], textarea[disabled] {
	background-color: var(--surface-3);
	color: var(--text-2);
	cursor: default;
}

input[type="radio"], input[type="checkbox"] { accent-color: var(--brand); width: 16px; height: 16px; margin-top: 2px; }
input[type="file"] { height: auto; line-height: normal; font-size: 13.5px; }
input::placeholder, textarea::placeholder { color: #aaa39c; }

.help-block, .help-inline { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.help-block { margin-top: 6px; }

.control-group { margin-bottom: 16px; }
.form-horizontal .control-group { margin-bottom: 16px; }
.form-horizontal .control-label { padding-top: 9px; }
.form-actions {
	padding: 16px 20px;
	margin: 20px 0 0;
	background: var(--surface-2);
	border-top: 1px solid var(--border);
	border-radius: 0 0 var(--radius) var(--radius);
}
.control-group.error .control-label, .control-group.error .help-block, .control-group.error .help-inline { color: var(--brand-600); }
.control-group.error input, .control-group.error select, .control-group.error textarea { border-color: var(--brand); }

legend { font-size: 15px; font-weight: 700; color: var(--text); border-bottom-color: var(--border); line-height: 1.4; padding-bottom: 8px; margin-bottom: 16px; }
fieldset + fieldset { margin-top: 12px; }

/* Grup input (BS2) — sudut menyambung */
.input-append, .input-prepend { margin-bottom: 0; }
.input-append input, .input-append select, .input-append .uneditable-input { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-prepend input, .input-prepend select, .input-prepend .uneditable-input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.input-prepend.input-append input, .input-prepend.input-append select { border-radius: 0; }
.input-append .add-on, .input-prepend .add-on {
	height: 20px;
	padding: 8px 11px;
	line-height: 20px;
	background: var(--surface-3);
	border-color: var(--border-strong);
	color: var(--text-2);
	text-shadow: none;
}
.input-append .add-on, .input-append .btn, .input-prepend .add-on, .input-prepend .btn { display: inline-block; vertical-align: top; margin-left: -1px; }
.input-append .btn, .input-prepend .btn { padding-top: 8px; padding-bottom: 8px; }
.input-prepend .add-on:first-child, .input-prepend .btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); margin-left: 0; margin-right: -1px; }
.input-append .add-on:last-child, .input-append .btn:last-child, .input-append .btn-group:last-child > .dropdown-toggle { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.input-prepend.input-append .add-on:first-child, .input-prepend.input-append .btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-prepend.input-append .add-on:last-child, .input-prepend.input-append .btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* ------------------------------------------------------------------
   Tabel & DataTables
   ------------------------------------------------------------------ */
.table { margin-bottom: 16px; }
.table th, .table td {
	padding: 10px 12px;
	line-height: 1.45;
	border-top: 1px solid var(--border);
	vertical-align: middle;
}
.table th,
.table-bordered th,
.table thead th {
	background: var(--surface-2) !important;
	filter: none !important;
	color: var(--text-2);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: none;
	white-space: nowrap;
}
.table thead th { border-bottom: 1px solid var(--border) !important; vertical-align: middle; }
.table-bordered { border-color: var(--border); border-radius: var(--radius); border-collapse: separate; }
.table-bordered th, .table-bordered td { border-left-color: var(--border); }
.table-bordered thead:first-child tr:first-child > th:first-child { border-top-left-radius: var(--radius); }
.table-bordered thead:first-child tr:first-child > th:last-child { border-top-right-radius: var(--radius); }
.table-bordered tbody:last-child tr:last-child > td:first-child { border-bottom-left-radius: var(--radius); }
.table-bordered tbody:last-child tr:last-child > td:last-child { border-bottom-right-radius: var(--radius); }
.table-striped tbody > tr:nth-child(odd) > td, .table-striped tbody > tr:nth-child(odd) > th { background-color: var(--surface-2); }
.table-hover tbody tr:hover > td, .table tbody tr:hover > td { background-color: #fbf8f5; }
.table-condensed th, .table-condensed td { padding: 7px 10px; }

table.dataTable { border-collapse: separate !important; width: 100% !important; margin: 8px 0 !important; }
table.dataTable thead th, table.dataTable thead td {
	padding: 11px 12px !important;
	border-bottom: 1px solid var(--border) !important;
	background-color: var(--surface-2) !important;
}
table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc { padding-right: 24px !important; }
table.dataTable tbody td { padding: 10px 12px !important; border-top: 1px solid var(--border); }
table.dataTable tbody tr { background-color: var(--surface) !important; }
table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd { background-color: var(--surface-2) !important; }
table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.display tbody tr.even > .sorting_1,
table.dataTable.order-column tbody tr > .sorting_1 { background-color: transparent !important; }
table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover,
table.dataTable.display tbody tr:hover > .sorting_1 { background-color: #fbf6f2 !important; }
table.dataTable.no-footer { border-bottom: 1px solid var(--border) !important; }
table.dataTable tbody tr.selected { background-color: var(--brand-50) !important; }
.dataTables_wrapper { font-size: 13.5px; color: var(--text-2); }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { margin-bottom: 10px; color: var(--text-2); }
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label { font-weight: 500; font-size: 13px; }
.dataTables_wrapper .dataTables_filter input {
	width: 220px;
	margin-left: 8px !important;
	padding-left: 32px !important;
	background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238a847d' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 10px center;
}
.dataTables_wrapper .dataTables_length select { width: auto; height: 34px; line-height: 34px; margin: 0 4px; padding: 0 8px; }
.dataTables_wrapper .dataTables_info { padding-top: 14px !important; color: var(--muted); font-size: 12.5px; }
.dataTables_wrapper .dataTables_paginate { padding-top: 10px !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
	min-width: 18px;
	margin-left: 3px !important;
	padding: 5px 10px !important;
	border: 1px solid transparent !important;
	border-radius: var(--radius-sm) !important;
	background: transparent !important;
	color: var(--text-2) !important;
	font-weight: 600;
	font-size: 13px;
	box-shadow: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	background: var(--surface-3) !important;
	border-color: var(--border) !important;
	color: var(--text) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
	background: var(--brand) !important;
	border-color: var(--brand-600) !important;
	color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover { opacity: .45; background: transparent !important; border-color: transparent !important; cursor: default; }
.dataTables_wrapper .dataTables_processing {
	height: auto !important;
	padding: 10px 16px !important;
	margin-top: -22px !important;
	background: var(--surface) !important;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	color: var(--text-2);
	font-weight: 600;
	font-size: 13px;
}
.dataTables_wrapper .dataTables_scroll { border-radius: var(--radius); }
.dataTables_wrapper .dataTables_scrollBody { border-bottom: 1px solid var(--border) !important; }
.dataTables_empty { padding: 32px 12px !important; color: var(--muted); text-align: center; }
table.dataTable td.dt-right, table.dataTable th.dt-right { text-align: right; }
table.dataTable td.dt-center, table.dataTable th.dt-center { text-align: center; }

/* Pagination (dataTables.bootstrap & BS2) */
.pagination ul, .pagination { box-shadow: none; border-radius: 0; }
.pagination ul > li > a, .pagination ul > li > span,
.pagination > li > a, .pagination > li > span {
	margin-left: 3px;
	padding: 5px 11px;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-sm) !important;
	color: var(--text-2);
	background: var(--surface);
	line-height: 20px;
}
.pagination ul > .active > a, .pagination > .active > a { background: var(--brand) !important; border-color: var(--brand-600) !important; color: #fff !important; }

/* ------------------------------------------------------------------
   Badge, label, alert
   ------------------------------------------------------------------ */
.badge, .label {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 9px;
	font-size: 12px;
	font-weight: 600;
	line-height: 18px;
	color: var(--text-2);
	text-shadow: none;
	white-space: nowrap;
	background-color: var(--surface-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-xs);
	vertical-align: middle;
}
a.badge, a.label { text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, transform .1s; }
a.badge:hover, a.label:hover { color: var(--text); background-color: #e8e5e1; text-decoration: none; }
a.badge:active, a.label:active { transform: translateY(1px); }

.badge-success, .label-success { color: #23673f; background-color: var(--success-50); border-color: #cfe8d8; }
a.badge-success:hover, a.label-success:hover { color: #fff; background-color: var(--success); border-color: var(--success); }
.badge-warning, .label-warning { color: #7d4c12; background-color: var(--warning-50); border-color: #f0dfbc; }
a.badge-warning:hover, a.label-warning:hover { color: #fff; background-color: #c47e22; border-color: #c47e22; }
.badge-important, .label-important, .badge-danger, .label-danger { color: var(--brand-700); background-color: var(--brand-50); border-color: var(--brand-100); }
a.badge-important:hover, a.label-important:hover, a.badge-danger:hover, a.label-danger:hover { color: #fff; background-color: var(--brand); border-color: var(--brand); }
.badge-info, .label-info { color: #2a5672; background-color: var(--info-50); border-color: #d3e3ee; }
a.badge-info:hover, a.label-info:hover { color: #fff; background-color: var(--info); border-color: var(--info); }
.badge-inverse, .label-inverse { color: #fff; background-color: var(--slate); border-color: var(--slate); }

.alert {
	padding: 12px 16px;
	margin-bottom: 16px;
	color: #6d4a17;
	text-shadow: none;
	background-color: var(--warning-50);
	border: 1px solid #f1dfbd;
	border-radius: var(--radius);
	font-size: 13.5px;
}
.alert h4 { color: inherit; }
.alert-success { color: #23673f; background-color: var(--success-50); border-color: #cfe8d8; }
.alert-danger, .alert-error { color: var(--brand-700); background-color: var(--brand-50); border-color: var(--brand-100); }
.alert-info { color: #29475b; background-color: var(--info-50); border-color: #d5e4ee; }
.alert .close { top: 0; right: -6px; line-height: 20px; }

.well { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: none; }

/* ------------------------------------------------------------------
   Dropdown BS2
   ------------------------------------------------------------------ */
.dropdown-menu {
	padding: 6px;
	border: 1px solid var(--border);
	border-radius: var(--radius) !important;
	box-shadow: var(--shadow-lg);
}
.dropdown-menu li > a { padding: 7px 12px; border-radius: var(--radius-xs); color: var(--text); font-size: 13.5px; }
.dropdown-menu li > a:hover, .dropdown-menu li > a:focus,
.dropdown-menu .active > a, .dropdown-menu .active > a:hover {
	background: var(--surface-2) !important;
	background-image: none !important;
	color: var(--text) !important;
	filter: none;
}

/* ------------------------------------------------------------------
   Modal (BS2 markup, dikendalikan JS BS2/BS3)
   ------------------------------------------------------------------ */
.modal {
	z-index: var(--z-modal);
	background: var(--surface);
	border: 0;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}
/* bootstrap.min.css bawaan memakai left/top 40% — posisikan ulang secara konsisten */
.modal { margin-top: 0; }
.modal.fade { top: -25%; }
.modal.fade.in, .modal.in { top: 6vh; }
@media (min-width: 768px) {
	.modal { left: 50%; width: 620px; margin-left: -310px; }
}
@media (max-width: 767px) {
	.modal, .modal.modal-wide { left: 12px; right: 12px; width: auto; margin-left: 0; }
	.modal.fade.in, .modal.in { top: 12px; }
	.modal-body { max-height: calc(100vh - 170px); }
}
.modal.fade { transition: opacity .2s var(--ease), top .25s var(--ease); }
.modal-backdrop { background-color: #1c1917; z-index: calc(var(--z-modal) - 10); }
.modal-backdrop.fade.in, .modal-backdrop.in { opacity: .5; filter: none; }
.modal-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--border);
}
.modal-header h3, .modal-header h4 { order: 0; flex: 1; margin: 0; font-size: 17px; line-height: 1.3; font-weight: 700; }
.modal-header .close { order: 1; margin: 0; float: none; }
.close {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: var(--radius-sm);
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	color: var(--muted);
	text-shadow: none;
	opacity: 1;
	transition: background-color .15s, color .15s;
}
.close:hover, .close:focus { background: var(--surface-3); color: var(--text); opacity: 1; }
.modal-body { padding: 20px; max-height: 68vh; }
.modal-body .control-group:last-child { margin-bottom: 4px; }
.modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding: 14px 20px;
	background: var(--surface-2);
	border-top: 1px solid var(--border);
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	box-shadow: none;
}
.modal-footer .btn + .btn { margin-left: 0; }
.modal-footer .pull-left { margin-right: auto; }
.modal-form-hint { margin: -4px 0 16px; color: var(--muted); font-size: 13px; }
.table tbody tr.row-stok-kurang > td { background: var(--brand-50); color: var(--brand-700); }
.table tbody tr.row-stok-kurang:hover > td { background: var(--brand-100); }
.teks-stok-kurang { color: var(--brand-600); font-weight: 600; }

/* Form horizontal di dalam modal: label lebih ringkas */
@media (min-width: 768px) {
	.modal .form-horizontal .control-label, .modal-body.form-horizontal .control-label { width: 150px; }
	.modal .form-horizontal .controls, .modal-body.form-horizontal .controls { margin-left: 170px; }
	.modal-body.form-horizontal .controls input.span6, .modal-body.form-horizontal .controls select.span6,
	.modal .form-horizontal .controls input.span6, .modal .form-horizontal .controls select.span6,
	.modal-body.form-horizontal .controls textarea.span6 { width: 380px; max-width: 100%; box-sizing: border-box; height: 38px; }
	.modal-body.form-horizontal .controls textarea.span6 { height: auto; }
}

/* ------------------------------------------------------------------
   Toastr
   ------------------------------------------------------------------ */
#toast-container > div {
	padding: 14px 16px 14px 48px;
	border-radius: var(--radius) !important;
	box-shadow: var(--shadow-lg) !important;
	opacity: .98;
	font-family: var(--font);
	font-size: 14px;
	font-weight: 500;
}
#toast-container > div:hover { box-shadow: var(--shadow-lg) !important; opacity: 1; }
#toast-container.toast-bottom-full-width > div { width: min(520px, calc(100vw - 32px)); margin: 0 auto 16px; }
#toast-container .toast-success { background-color: #24563a; }
#toast-container .toast-error { background-color: var(--brand-700); }
#toast-container .toast-warning { background-color: #8c5615; }
#toast-container .toast-info { background-color: #2a5672; }
.toast-progress { opacity: .3; }

/* ------------------------------------------------------------------
   SweetAlert (v2)
   ------------------------------------------------------------------ */
.swal-overlay { background-color: rgba(28, 25, 23, .5); }
.swal-modal { border-radius: 18px; font-family: var(--font); padding-top: 8px; box-shadow: var(--shadow-lg); }
.swal-title { font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: -.01em; padding: 12px 20px 0; }
.swal-text { color: var(--text-2); font-size: 14.5px; line-height: 1.55; text-align: center; }
.swal-footer { background: var(--surface-2); border-top: 1px solid var(--border); margin-top: 24px; padding: 14px 18px; border-radius: 0 0 18px 18px; text-align: right; }
.swal-button {
	padding: 9px 18px;
	border-radius: var(--radius-sm);
	font-family: var(--font);
	font-weight: 600;
	font-size: 14px;
	background-color: var(--brand);
	box-shadow: none !important;
}
.swal-button:not([disabled]):hover { background-color: var(--brand-600); }
.swal-button:focus { box-shadow: var(--ring) !important; }
.swal-button--cancel { background-color: var(--surface); color: var(--text); border: 1px solid var(--border-strong); }
.swal-button--cancel:not([disabled]):hover { background-color: var(--surface-3); }
.swal-button--danger { background-color: var(--brand); }
.swal-content__input { border-radius: var(--radius-sm); border: 1px solid var(--border-strong); height: auto; padding: 10px 12px; font-family: var(--font); }
.swal-content__input:focus { border-color: var(--brand); box-shadow: var(--ring); }
.swal-icon--success__ring { border-color: rgba(47, 138, 87, .25); }
.swal-icon--success__line { background-color: var(--success); }

/* ------------------------------------------------------------------
   Daterangepicker
   ------------------------------------------------------------------ */
.daterangepicker { border-color: var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); font-family: var(--font); }
.daterangepicker td.active, .daterangepicker td.active:hover { background-color: var(--brand); }
.daterangepicker td.in-range { background-color: var(--brand-50); }
.daterangepicker td.available:hover, .daterangepicker th.available:hover { background-color: var(--surface-3); }
.daterangepicker .ranges li.active, .daterangepicker .ranges li:hover { background-color: var(--brand); border-color: var(--brand); color: #fff; }
.daterangepicker .ranges li { border-radius: var(--radius-xs); }
.daterangepicker .input-mini.active { border-color: var(--brand); }

/* ------------------------------------------------------------------
   Kasir (POS): total & panel bayar
   ------------------------------------------------------------------ */
.uang-belanja, .uang-belanja-sans {
	height: auto;
	margin: 0;
	padding: 0;
	font-family: var(--font);
	font-size: 44px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--brand-600);
	background: transparent;
}

.bayar {
	z-index: var(--z-drawer);
	width: 440px;
	max-width: 100vw;
	padding: 0;
	background: var(--surface);
	color: var(--text);
	border: 0;
	border-right: 1px solid var(--border);
	box-shadow: none;
	box-sizing: border-box;
	transition: left .28s var(--ease), box-shadow .28s var(--ease);
}
.bayar.slide-bayar-tampil { box-shadow: 0 0 0 100vmax rgba(28, 25, 23, .45), var(--shadow-lg); }
.bayar h2 {
	margin: 0;
	padding: 18px 24px;
	font-size: 19px;
	text-align: left;
	border-bottom: 1px solid var(--border);
}
.bayar > hr { display: none; }
.bayar .form-horizontal { padding: 20px 24px 24px; }
.bayar .control-group { margin-bottom: 14px; }
.bayar .form-horizontal .control-label, .bayar .control-label {
	float: none;
	width: auto;
	padding-top: 0;
	margin-bottom: 6px;
	text-align: left;
}
.bayar .form-horizontal .controls, .bayar .controls { margin-left: 0; }
.bayar input,
.bayar input[type="text"], .bayar input[type="date"], .bayar input[type="number"] {
	width: 100%;
	height: 50px;
	box-sizing: border-box;
	padding: 8px 14px;
	font-size: 22px;
	font-weight: 700;
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.bayar input[type="date"], .bayar #ket_non_tunai, .bayar input[name="ket_non_tunai"] { font-size: 15px; font-weight: 500; text-align: left; height: 42px; }
.bayar #ket_non_tunai { margin-top: 8px; }
.bayar #tot_belanja { background: var(--brand-50); border-color: var(--brand-100); color: var(--brand-700); font-size: 26px; }
.bayar #kembalian { background: var(--success-50); border-color: #cfe8d8; color: #23673f; }
/* Lapisan tampilan di atas input baca-saja agar ",00" bisa lebih kecil (lihat tampilDesimalBayar) */
.bayar .cermin-desimal { position: relative; }
.bayar .cermin-desimal__input { color: transparent !important; }
.bayar .cermin-desimal__input::selection { color: transparent; }
.cermin-desimal__teks {
	position: absolute;
	inset: 0;
	display: block;
	padding: 0 15px; /* padding input 14px + border 1px */
	line-height: 50px; /* = tinggi input: teks di tengah, ",00" tetap sejajar garis bawah angka */
	text-align: right;
	font-size: 22px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	overflow: hidden;
	pointer-events: none;
}
#tot_belanja + .cermin-desimal__teks { font-size: 26px; color: var(--brand-700); }
#kembalian + .cermin-desimal__teks { color: #23673f; }
.bayar .control-group:last-child {
	display: flex;
	gap: 10px;
	padding-top: 6px;
}
.bayar .control-group:last-child .btn { flex: 1; height: 48px; font-size: 15px; }
.bayar .control-group:last-child .pull-right { float: none; order: 2; }

/* Tata letak kasir baru */
.pos { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.pos__main { min-width: 0; }
.pos__side { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 16px; }
.pos-total {
	padding: 18px 20px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
}
.pos-total__label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.pos-total .uang-belanja-sans, .pos-total .uang-belanja { font-size: 30px; margin-top: 4px; min-height: 34px; white-space: nowrap; letter-spacing: -.03em; }
.pos-total__hint { margin-top: 4px; font-size: 12px; color: var(--muted); }
.pos-meta { margin: 0; padding: 0; list-style: none; }
.pos-meta li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 13.5px; }
.pos-meta li:first-child { border-top: 0; padding-top: 0; }
.pos-meta span { color: var(--muted); }
.pos-meta strong { text-align: right; font-weight: 600; word-break: break-word; }
/* baris Pelanggan yang bisa diklik untuk ganti pelanggan (F-26) */
.pos-meta li.pos-meta__pelanggan { padding: 4px 0; }
.pos-meta__ganti {
	display: flex; justify-content: space-between; align-items: center; gap: 12px;
	width: calc(100% + 16px); margin: 0 -8px; padding: 6px 8px;
	background: none; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
	font: inherit; color: inherit; text-align: left; cursor: pointer;
	transition: background .15s, border-color .15s;
}
.pos-meta__ganti:hover { background: var(--brand-50); border-color: var(--brand-100); }
.pos-meta__ganti:focus { outline: 0; box-shadow: var(--ring); }
.pos-meta__ganti-isi { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; }
.pos-meta .pos-meta__ganti-isi strong { color: var(--text); }
.pos-meta .pos-meta__ganti-aksi { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--brand); }
.pos-meta__ganti-aksi kbd { font-size: 10.5px; padding: 0 4px; }
.ganti-umum { width: 100%; margin-bottom: 14px; text-align: left; font: inherit; cursor: pointer; }
.ganti-umum[disabled] { cursor: default; opacity: .65; transform: none; box-shadow: none; }
.badge-dipakai { background: var(--surface-3); color: var(--text-2); }
/* info total gabungan faktur split hari ini (F-28) */
.pos-gabungan__judul { font-size: 13.5px; font-weight: 600; }
.pos-gabungan__hint { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.pos-gabungan__list { margin: 10px 0 0; padding: 0; list-style: none; }
.pos-gabungan__list li { border-top: 1px solid var(--border); font-size: 13px; }
.pos-gabungan__list label { display: flex; align-items: center; gap: 8px; margin: 0; padding: 7px 0; cursor: pointer; font-weight: 400; }
.pos-gabungan__list input[type="checkbox"] { margin: 0; flex: none; }
.pos-gabungan__faktur { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pos-gabungan__faktur > span { font-size: 12px; color: var(--muted); }
.pos-gabungan__faktur .badge { font-size: 10.5px; padding: 0 5px; }
.pos-gabungan__nilai { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pos-gabungan__keranjang { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; color: var(--muted); }
.pos-gabungan__keranjang .pos-gabungan__nilai { color: var(--text); }
.pos-gabungan__total { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 4px; padding: 10px 12px; background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: var(--radius-sm); }
.pos-gabungan__total > span { white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--brand-700); }
.pos-gabungan__total strong { font-size: 18px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pos-actions { display: flex; flex-direction: column; gap: 8px; }
.pos-actions .btn { height: 46px; font-size: 15px; justify-content: space-between; }
.pos-actions .btn-primary { height: 54px; font-size: 16.5px; }
.pos-actions .btn > span { display: inline-flex; align-items: center; gap: 8px; }
.pos-scan { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pos-scan__field { position: relative; flex: 1 1 280px; }
.pos-scan__field [class^="icon-"] { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 17px; pointer-events: none; }
.pos-scan input[type="text"] {
	width: 100%;
	height: 52px;
	box-sizing: border-box;
	padding-left: 42px;
	margin: 0;
	font-size: 17px;
	font-weight: 600;
}
.pos-scan .btn { height: 52px; padding: 0 18px; font-size: 14.5px; }
.pos-shortcuts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.pos-cart-wrap { overflow-x: auto; margin-top: 16px; border: 1px solid var(--border); border-radius: var(--radius); }
.pos-cart-wrap .table { margin: 0; border: 0; border-radius: 0; }
.pos-cart-wrap .table-bordered th, .pos-cart-wrap .table-bordered td { border-left: 0; }
.pos-cart-wrap .table td { font-size: 13.5px; }
.pos-cart-wrap tbody:empty::after {
	content: "Keranjang masih kosong — ketik kode/nama barang atau tekan F2 untuk mencari barang.";
	display: table-caption;
	caption-side: bottom;
	padding: 36px 16px;
	text-align: center;
	color: var(--muted);
	font-size: 13.5px;
}
.pos-cart-wrap .edit-jumlah, .pos-cart-wrap input[type="number"] { width: 64px !important; height: 18px; padding: 6px 8px; text-align: center; }

/* ",00" di angka rupiah: lebih kecil & sedikit pudar supaya angka utama tidak salah baca */
.angka-desimal { font-size: .72em; opacity: .7; letter-spacing: 0; }

/* Stepper jumlah keranjang: [−] [ qty ] [+] */
.qty-stepper {
	display: inline-flex;
	align-items: stretch;
	height: 34px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	background: var(--surface);
	overflow: hidden;
	vertical-align: middle;
	transition: border-color .15s var(--ease), box-shadow .15s var(--ease), opacity .15s var(--ease);
}
.qty-stepper:focus-within { border-color: var(--brand); box-shadow: var(--ring); }
.qty-stepper.is-busy { opacity: .55; pointer-events: none; }
.qty-btn {
	width: 30px;
	padding: 0;
	margin: 0;
	border: 0;
	background: var(--bg);
	color: var(--text);
	font: 600 17px/1 var(--font);
	cursor: pointer;
	user-select: none;
	transition: background .12s var(--ease), color .12s var(--ease);
}
.qty-btn:first-child { border-right: 1px solid var(--border); }
.qty-btn:last-child { border-left: 1px solid var(--border); }
.qty-btn:hover:not(:disabled) { background: var(--brand); color: #fff; }
.qty-btn:active:not(:disabled) { filter: brightness(.92); }
.qty-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.qty-btn:disabled { opacity: .35; cursor: not-allowed; }
.pos-cart-wrap .qty-stepper .edit-jumlah {
	width: 56px !important;
	height: auto;
	margin: 0;
	padding: 0 4px;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	text-align: center;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
	appearance: textfield;
}
.qty-stepper .edit-jumlah:focus { outline: 0; box-shadow: none; }
.qty-stepper .edit-jumlah::-webkit-inner-spin-button,
.qty-stepper .edit-jumlah::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pos-clock { font-variant-numeric: tabular-nums; }

@media (max-width: 979px) {
	.pos { grid-template-columns: 1fr; }
	.pos__side { position: static; order: -1; }
}

/* ------------------------------------------------------------------
   Dashboard
   ------------------------------------------------------------------ */
.hello { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px 24px; padding: 26px 0 6px; }
.hello__eyebrow { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.hello h1 { margin: 0; font-size: 28px; }
.hello__sub { margin: 6px 0 0; color: var(--text-2); max-width: 60ch; }
.hello__date { text-align: right; color: var(--text-2); font-size: 13.5px; }
.hello__date strong { display: block; font-size: 22px; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
/* Layar sempit: jam & tanggal satu baris, rata kiri di bawah sapaan */
@media (max-width: 979px) {
	.hello { grid-template-columns: minmax(0, 1fr); }
	.hello__date { display: flex; align-items: baseline; gap: 10px; text-align: left; }
	.hello__date strong { display: inline; font-size: 18px; }
}

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 18px 0 28px; }
.stat {
	position: relative;
	padding: 18px 20px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	text-decoration: none !important;
	color: var(--text);
	transition: border-color .15s, box-shadow .15s, transform .15s var(--ease);
}
a.stat:hover { border-color: var(--border-strong); box-shadow: var(--shadow); transform: translateY(-1px); color: var(--text); }
.stat__label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.stat__label [class^="icon-"] { color: var(--muted); }
.stat__value { margin-top: 8px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.stat__note { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.stat--alert .stat__value { color: var(--brand-600); }

.section-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 0 0 12px; }
.section-title h2 { white-space: nowrap; }
.section-title h2 { margin: 0; font-size: 17px; }
.section-title p { margin: 0; color: var(--muted); font-size: 13px; }

.actions-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-bottom: 28px; }
.action-card {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 16px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	color: var(--text);
	text-decoration: none !important;
	transition: border-color .15s, box-shadow .15s, transform .15s var(--ease);
}
.action-card:hover, .action-card:focus { color: var(--text); border-color: var(--border-strong); box-shadow: var(--shadow); transform: translateY(-1px); }
.action-card:active { transform: none; }
.action-card__icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	flex: none;
	border-radius: 12px;
	background: var(--surface-3);
	color: var(--text-2);
	font-size: 18px;
}
.action-card--primary { background: var(--brand); border-color: var(--brand-600); color: #fff; }
.action-card--primary:hover, .action-card--primary:focus { color: #fff; border-color: var(--brand-700); box-shadow: 0 6px 18px rgba(214, 69, 59, .3); }
.action-card--primary .action-card__icon { background: rgba(255, 255, 255, .18); color: #fff; }
.action-card--primary .action-card__desc { color: rgba(255, 255, 255, .85); }

/* Kartu unduh buku panduan di dashboard */
.panduan-card { margin: 18px 0 0; }
.panduan-card .card__body { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.panduan-card__icon { flex: none; width: 46px; height: 46px; border-radius: var(--radius); background: var(--brand-50); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.panduan-card__teks { flex: 1 1 280px; min-width: 0; }
.panduan-card__teks h2 { margin: 0 0 2px; font-size: 15.5px; }
.panduan-card__teks p { margin: 0; color: var(--muted); font-size: 13px; }
.panduan-card__btn { flex: none; }
@media (max-width: 600px) { .panduan-card__btn { width: 100%; text-align: center; } }
.action-card__title { display: block; font-weight: 700; font-size: 14.5px; line-height: 1.3; }
.action-card__desc { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); line-height: 1.45; }

.shortcut-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 24px; margin: 0; padding: 0; list-style: none; }
.shortcut-list li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-2); }

@media (max-width: 767px) {
	.stats { grid-template-columns: 1fr; }
	.hello h1 { font-size: 23px; }
}

/* ------------------------------------------------------------------
   Login
   ------------------------------------------------------------------ */
body.auth { min-height: 100vh; min-height: 100dvh; padding: 0 !important; }
.auth-shell { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; min-height: 100dvh; }
.auth-aside {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 40px 48px;
	color: #fff;
	background:
		radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 55%),
		radial-gradient(90% 70% at 100% 100%, rgba(0, 0, 0, .22) 0%, rgba(0, 0, 0, 0) 60%),
		var(--brand);
	overflow: hidden;
}
.auth-aside::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px);
	background-size: 18px 18px;
	mask-image: linear-gradient(160deg, rgba(0, 0, 0, .7), transparent 70%);
	-webkit-mask-image: linear-gradient(160deg, rgba(0, 0, 0, .7), transparent 70%);
	pointer-events: none;
}
/* Watermark: siluet putih logo toko */
.auth-aside::before {
	content: "";
	position: absolute;
	right: -12%;
	bottom: -10%;
	width: min(560px, 75%);
	aspect-ratio: 1;
	background: url("../img/536322224f0e533f1477519723b48bbb.png") center / contain no-repeat;
	filter: grayscale(1) contrast(1.4);
	mix-blend-mode: soft-light;
	opacity: .55;
	transform: rotate(-12deg);
	pointer-events: none;
}
.auth-aside > * { position: relative; z-index: 1; }
.auth-brand { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 16px; }
.auth-brand .app-brand__mark { background: #fff; color: var(--brand); box-shadow: none; }
.auth-brand .app-brand__mark--logo { background: #fff; padding: 4px; width: 44px; height: 44px; border-radius: 12px; box-sizing: border-box; }
.auth-aside h1 { color: #fff; font-size: 34px; line-height: 1.15; max-width: 14ch; margin: 0 0 14px; letter-spacing: -.025em; }
.auth-aside p { color: rgba(255, 255, 255, .86); font-size: 15px; max-width: 42ch; }
.auth-points { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.auth-points li { display: flex; gap: 10px; align-items: flex-start; color: rgba(255, 255, 255, .92); font-size: 14px; }
.auth-points [class^="icon-"] { margin-top: 3px; }
.auth-foot { font-size: 12.5px; color: rgba(255, 255, 255, .72); }
.auth-foot a { color: #fff; }

.auth-main { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.auth-card { width: 100%; max-width: 380px; }
.auth-card h2 { margin: 0 0 6px; font-size: 26px; letter-spacing: -.02em; }
.auth-card__sub { margin: 0 0 26px; color: var(--text-2); }
.auth-field { margin-bottom: 16px; }
.auth-field label { display: block; margin-bottom: 6px; }
.auth-field input[type="text"], .auth-field input[type="password"] {
	width: 100%;
	height: 46px;
	box-sizing: border-box;
	margin: 0;
	font-size: 15px;
}
.auth-pass { position: relative; }
.auth-row { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 20px; }
.auth-check { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; color: var(--text-2); cursor: pointer; }
.auth-check input { margin: 0; }
.auth-submit { width: 100%; height: 48px; font-size: 15.5px; }
.auth-meta { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--muted); display: grid; gap: 4px; }
.auth-error { margin-bottom: 16px; }

@media (max-width: 860px) {
	.auth-shell { grid-template-columns: 1fr; }
	.auth-aside { padding: 24px; }
	.auth-aside h1 { font-size: 24px; max-width: none; }
	.auth-aside p, .auth-points { display: none; }
	.auth-foot { display: none; }
	.auth-aside::before { width: 220px; right: -40px; bottom: -60px; opacity: .07; }
}

/* ------------------------------------------------------------------
   Halaman kosong / 404 / langkah
   ------------------------------------------------------------------ */
.empty {
	max-width: 520px;
	margin: 48px auto;
	padding: 40px 32px;
	text-align: center;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}
.empty__code { font-size: 64px; font-weight: 800; letter-spacing: -.04em; color: var(--brand); line-height: 1; }
.empty h1 { margin: 14px 0 8px; font-size: 22px; }
.empty p { color: var(--text-2); }
.empty .btn { margin: 8px 4px 0; }

.steps { counter-reset: step; display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.steps > li { position: relative; padding-left: 44px; min-height: 30px; }
.steps > li::before {
	counter-increment: step;
	content: counter(step);
	position: absolute;
	left: 0;
	top: -2px;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--brand-50);
	color: var(--brand-600);
	font-weight: 700;
	font-size: 13.5px;
}
.steps h4 { margin: 2px 0 4px; font-size: 14.5px; }
.steps p { margin: 0 0 8px; color: var(--text-2); font-size: 13.5px; }

.danger-zone { border: 1px solid var(--brand-100); background: var(--brand-50); border-radius: var(--radius-lg); padding: 20px; }
.danger-zone h3 { color: var(--brand-700); margin: 0 0 6px; font-size: 16px; }

/* ------------------------------------------------------------------
   Responsif umum (BS2 responsive memberi padding 20px pada body)
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
	body.app { padding-left: 0; padding-right: 0; }
	body.app .container { padding-left: 16px; padding-right: 16px; }
	.page-head h1 { font-size: 21px; }
	.widget-content { padding: 16px; }
	.widget-header { padding: 10px 14px !important; }
	.modal { border-radius: var(--radius-lg); }
	.bayar { width: 100vw; }
	.dataTables_wrapper .dataTables_filter input { width: 100%; max-width: 220px; }
}

/* ------------------------------------------------------------------
   Formulir grid (label di atas) — dipakai di modal & halaman form
   ------------------------------------------------------------------ */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid--1 { grid-template-columns: minmax(0, 1fr); }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field > label { margin: 0; }
.field .req { color: var(--brand); margin-left: 2px; }
.field input[type="text"], .field input[type="password"], .field input[type="number"], .field input[type="date"],
.field input[type="email"], .field input[type="tel"], .field input[type="time"], .field input[type="search"],
.field select, .field textarea {
	width: 100%;
	height: 40px;
	box-sizing: border-box;
	margin: 0;
}
.field textarea { height: auto; min-height: 84px; }
.field .help-block { margin: 0; }
.field input[type="file"] { padding: 10px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-2); width: 100%; box-sizing: border-box; }
.form-section {
	grid-column: 1 / -1;
	margin: 6px 0 -4px;
	padding-top: 12px;
	border-top: 1px solid var(--border);
	font-size: 13px;
	font-weight: 700;
	color: var(--text);
}
.form-section:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.form-section small { display: block; font-weight: 500; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.input-money { position: relative; }
.input-money::before {
	content: "Rp";
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 13px;
	font-weight: 600;
	color: var(--muted);
	pointer-events: none;
}
.input-money input { padding-left: 38px !important; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
	.form-grid, .form-grid--3 { grid-template-columns: minmax(0, 1fr); }
}

/* Tabel di dalam kartu */
.card__body .dataTables_wrapper, .card__body > .table-wrap { margin: 0; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap > table { min-width: 640px; }
.cell-actions { white-space: nowrap; text-align: right !important; }
.cell-actions .badge + .badge, .cell-actions a + a { margin-left: 4px; }
/* Kolom Aksi tetap terlihat di kanan walau tabel lebar digeser (kelas dipasang dt-defaults.js) */
table.tabel--aksi-lekat > thead > tr > :last-child,
table.tabel--aksi-lekat > tbody > tr > :last-child {
	position: sticky;
	right: 0;
	z-index: 1;
	background-color: inherit;
	white-space: nowrap;
}
table.tabel--aksi-lekat.tabel--meluap > thead > tr > :last-child,
table.tabel--aksi-lekat.tabel--meluap > tbody > tr > :last-child {
	box-shadow: inset 1px 0 0 var(--border), -8px 0 8px -8px rgba(28, 25, 23, .18);
}
.cell-num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cell-center { text-align: center !important; }
.cell-check { width: 28px; text-align: center !important; }
.count-pill { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); font-size: 12px; font-weight: 600; }

.import-result ul { margin: 6px 0 0 18px; }
.modal-wide { }
@media (min-width: 768px) {
	.modal.modal-wide { width: 720px; margin-left: -360px; }
}
table.dataTable thead th, table.dataTable thead td, table.dataTable tfoot th { text-align: left; }
table.dataTable thead th.cell-num, table.dataTable thead th.dt-right { text-align: right; }
table.dataTable thead th.cell-center, table.dataTable thead th.dt-center, table.dataTable thead th.cell-check { text-align: center; }
table.dataTable thead th.cell-actions { text-align: right; }
.dataTables_wrapper .table-wrap { clear: both; margin: 0 0 4px; }
.dataTables_wrapper .table-wrap > table.dataTable { margin: 8px 0 !important; }

/* ------------------------------------------------------------------
   Cetak dari halaman aplikasi
   ------------------------------------------------------------------ */
@media print {
	.app-header, .skip-link, .page-help-toggle, .page-help, .card__actions, .crumbs, #toast-container { display: none !important; }
	body, body.app { background: #fff; }
	.card, .widget-content { box-shadow: none; border-color: #ccc; }
	.main { padding: 0; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.pos-cart-wrap tbody th { background: var(--surface-2) !important; text-align: right; font-size: 13px; }
.pos-cart-wrap .item_hapus { padding: 3px 7px; }
.pos-actions .btn kbd, .bayar .btn kbd { font-size: 11px; line-height: 16px; }
.btn-primary kbd { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.45); }

/* Halaman kasir memakai lebar layar lebih banyak */
@media (min-width: 1200px) {
	.container.container--wide { width: auto; max-width: 1560px; padding: 0 28px; }
}
.pos-cart-wrap td:nth-child(3) { min-width: 200px; }
.pos-cart-wrap td, .pos-cart-wrap th { white-space: nowrap; }
.pos-cart-wrap td:nth-child(3) { white-space: normal; }
.pos-cart-wrap .table th, .pos-cart-wrap .table td { padding: 8px 8px; }
.pos-cart-wrap .table td:first-child { padding-left: 10px; }
.form-grid--scan { grid-template-columns: 2fr 1fr 1fr 110px; margin-top: 12px; }
@media (max-width: 767px) { .form-grid--scan { grid-template-columns: 1fr 1fr; } .form-grid--scan .field:first-child { grid-column: 1 / -1; } }
.form-grid--scan3 { grid-template-columns: 2fr 1fr 110px; }
@media (max-width: 767px) { .form-grid--scan3 { grid-template-columns: 1fr 1fr; } }

/* Formulir laporan */
.report-form .control-group { margin-bottom: 16px; }
.report-form .control-label { display: block; float: none; width: auto; padding-top: 0; margin-bottom: 6px; text-align: left; }
.report-form .controls { margin-left: 0; }
.report-form select { width: 100%; max-width: 380px; }
.date-picker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 260px;
	max-width: 100%;
	height: 38px;
	padding: 0 12px;
	box-sizing: border-box;
	background: var(--surface);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	cursor: pointer;
	font-weight: 500;
	transition: border-color .15s, box-shadow .15s;
}
.date-picker:hover { border-color: #c6c0b9; }
.date-picker:focus { outline: 0; border-color: var(--brand); box-shadow: var(--ring); }
.date-picker .icon-caret-down { margin-left: auto; color: var(--muted); }
.date-picker .icon-calendar { color: var(--muted); }
@media (min-width: 900px) {
	#modalCari.modal-wide { width: 860px; margin-left: -430px; }
}

/* Ringkasan 4 kolom & baris filter */
.stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 979px) { .stats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .stats--4 { grid-template-columns: minmax(0, 1fr); } }
.stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 600px) { .stats--3 { grid-template-columns: minmax(0, 1fr); } }
.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin: 0; }
.filter-bar .help-block { margin: 0 0 10px; }
tfoot th { background: var(--surface-2); font-size: 13px; }
.stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 600px) { .stats--2 { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------
   Laporan di layar (paperless) + cetak langsung dari halaman
   ------------------------------------------------------------------ */
.report-filter { margin-bottom: 4px; }
.report-filter .card__body { padding: 16px 18px; }
.report-filter form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px; margin: 0; }
.report-filter .field { min-width: 150px; flex: 0 1 190px; }
.report-filter .field--grow { flex: 1 1 220px; }
.report-filter .field select, .report-filter .field input[type="text"], .report-filter .field input[type="search"] { width: 100%; margin: 0; }
.report-filter__periode { flex: 0 1 300px !important; }
.report-filter__periode .date-picker { width: 100%; min-width: 0; }
.report-filter__actions { display: flex; align-items: center; gap: 4px; }
.report-filter .seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; height: 38px; }
.report-filter .seg label { display: flex; align-items: center; margin: 0; padding: 0 12px; white-space: nowrap; cursor: pointer; font-weight: 500; font-size: 13.5px; color: var(--text-2); }
.report-filter .seg label + label { border-left: 1px solid var(--border-strong); }
.report-filter .seg input { position: absolute; opacity: 0; pointer-events: none; }
.report-filter .seg input:checked + span { color: var(--brand-700); }
.report-filter .seg label:has(input:checked) { background: var(--brand-50); color: var(--brand-700); }
.report-filter .seg label:focus-within { box-shadow: inset var(--ring); }

.report-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 18px 0 0; }
.report-bar__info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--text-2); }
.report-bar__main { font-size: 16px; font-weight: 700; color: var(--text); margin-right: 4px; }
.chip-filter { display: inline-block; padding: 2px 9px; border-radius: var(--radius-xs); background: var(--surface-3); border: 1px solid var(--border); font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.report-bar__actions { display: flex; gap: 8px; }

.stats--auto { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin: 14px 0 20px; }
.stats--auto .stat__value { font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 4 kartu di layar sedang: 2×2, bukan 3 + 1 kartu yatim */
@media (min-width: 601px) and (max-width: 979px) { .stats--auto:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dataTables_wrapper .dataTables_length label { display: inline-flex; align-items: center; gap: 2px; margin: 0; }
.stat--brand .stat__value { color: var(--brand-600); }
.stat--good .stat__value { color: var(--success); }
.stat--main { background: var(--slate); border-color: var(--slate); color: #fff; }
.stat--main .stat__label, .stat--main .stat__label [class^="icon-"], .stat--main .stat__note { color: rgba(255, 255, 255, .78); }
.stat__value small { font-size: 14px; font-weight: 600; color: var(--muted); margin-left: 2px; }

.report-card { margin-bottom: 20px; }
.report-card__note { font-size: 12.5px; margin-left: auto; }
.report-table td { vertical-align: middle; }
.report-table tfoot th { white-space: nowrap; border-top: 2px solid var(--border-strong) !important; font-weight: 700; }
.report-table a[data-popup] { font-weight: 600; }
.pct-bar { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; }
.pct-bar__track { width: 64px; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.pct-bar__fill { display: block; height: 100%; background: var(--brand); border-radius: 3px; }

.report-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 979px) { .report-grid { grid-template-columns: minmax(0, 1fr); } }
.report-grid .table-wrap > table { min-width: 0; }

/* Rincian perhitungan (laba bersih, dll.) */
.calc { margin: 0; padding: 0; list-style: none; }
.calc li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--border); font-variant-numeric: tabular-nums; }
.calc li span:first-child { color: var(--text-2); }
.calc li b { white-space: nowrap; }
.calc .calc__minus b { color: var(--brand-700); }
.calc .calc__sub { font-weight: 700; border-bottom-style: solid; }
.calc .calc__sub span:first-child { color: var(--text); }
.calc .calc__total { margin-top: 6px; padding: 12px 14px; border: 0; border-radius: var(--radius); background: var(--slate); color: #fff; font-size: 16px; font-weight: 800; }
.calc .calc__total span:first-child { color: #fff; }
.calc .calc__total--minus { background: var(--brand-700); }

.chart-box { position: relative; height: 320px; }
.chart-box--sm { height: 240px; }

.print-head { display: none; }

@media (max-width: 767px) {
	.report-filter .field, .report-filter__periode { flex: 1 1 100% !important; }
	.report-bar__actions { width: 100%; }
	.report-bar__actions .btn { flex: 1; }
}

@media print {
	@page { margin: 12mm 10mm; }
	.page-head, .report-filter, .report-bar, .dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_paginate, .no-print { display: none !important; }
	.container, .container.container--wide { width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
	body { font-size: 11px; }
	.print-head { display: block; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 2px solid #222; }
	.print-head__toko { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
	.print-head__judul { font-size: 18px; font-weight: 800; margin: 2px 0; }
	.print-head__info, .print-head__waktu { font-size: 11px; color: #444; }
	.stats { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px !important; margin: 0 0 12px !important; }
	.stat { padding: 6px 8px; border-color: #bbb; box-shadow: none; background: #fff !important; color: #000 !important; break-inside: avoid; }
	.stat .stat__label, .stat .stat__note { color: #444 !important; }
	.stat__label [class^="icon-"] { display: none; }
	.stat__value, .stats--auto .stat__value { font-size: 14px; margin-top: 2px; color: #000 !important; }
	.stat__note { font-size: 10px; }
	.card { border: 0; box-shadow: none; margin-bottom: 14px; }
	.card__head { padding: 0 0 4px; border: 0; background: none; }
	.card__body { padding: 0; }
	.table-wrap { overflow: visible !important; }
	.table-wrap > table { min-width: 0 !important; }
	table.report-table { width: 100% !important; margin: 0 !important; font-size: 10.5px; border-collapse: collapse; }
	table.report-table th, table.report-table td { padding: 3px 5px !important; border: 1px solid #bbb !important; background: #fff !important; }
	table.report-table thead { display: table-header-group; }
	table.report-table tr { break-inside: avoid; }
	table.report-table thead th { background: #eee !important; }
	table.report-table a { color: #000; text-decoration: none; }
	.pct-bar__track { display: none; }
	.calc .calc__total { background: #fff !important; color: #000 !important; border: 2px solid #000; }
	.calc .calc__total span:first-child { color: #000; }
	.chart-box { height: 260px; break-inside: avoid; }
	.report-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	a[href]:after { content: none !important; }
}

/* ------------------------------------------------------------------
   Dashboard admin: Analitik & Prediksi
   ------------------------------------------------------------------ */
.analitik { margin: 0 0 28px; }
.analitik .section-title p { display: flex; align-items: center; gap: 10px; }
.analitik .card { margin-bottom: 16px; }
.analitik .stats--auto { margin: 0 0 16px; gap: 12px; }
.analitik .stat { padding: 14px 16px; box-shadow: none; }
.analitik .stats--auto .stat__value { font-size: 20px; }
.analitik-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.analitik-grid > .card { margin-bottom: 16px; }
.analitik-grid--dalam { gap: 24px; }
@media (max-width: 979px) { .analitik-grid { grid-template-columns: minmax(0, 1fr); gap: 0; } .analitik-grid--dalam { gap: 16px; } }
.analitik-chart { position: relative; height: 300px; }
.analitik-chart--lebar { height: 320px; }
@media (max-width: 600px) { .analitik-chart, .analitik-chart--lebar { height: 240px; } }
.analitik-sub { margin: 0 0 10px; font-size: 13.5px; font-weight: 700; color: var(--text-2); }
.analitik-sub ~ .analitik-sub { margin-top: 18px; }
.analitik-catatan { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.analitik-catatan:empty { display: none; }
.analitik-kosong { margin: 0; padding: 14px; border-radius: var(--radius); background: var(--surface-2); color: var(--muted); font-size: 13px; }
.analitik-gagal { margin-bottom: 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--brand-50); color: var(--brand-700); font-size: 13px; }
.analitik-table { margin: 0; font-size: 13px; }
.analitik-table th { font-size: 12px; white-space: nowrap; text-align: left; }
.analitik-table td { vertical-align: middle; }
.analitik-table .angka { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.analitik-table .baris-kritis td { background: var(--brand-50); }
.analitik .table-wrap { overflow-x: auto; max-height: 420px; overflow-y: auto; }
.analitik .table-wrap > table { min-width: 0; }
.analitik .kecil { font-size: 11.5px; }
.teks-bahaya { color: var(--brand-600); }
.stat--main .teks-bahaya { color: #ffd2cd; }
.tren { font-weight: 700; }
.tren--naik { color: var(--success); }
.tren--turun { color: var(--brand-600); }
.stat--main .tren--naik { color: #9be3b9; }
.stat--main .tren--turun { color: #ffb3ab; }

.pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.pill--bahaya { background: var(--brand-100); color: var(--brand-700); }
.pill--waspada { background: var(--warning-50); color: var(--warning); }

/* Memuat: kerangka (skeleton) mengikuti bentuk konten akhir, cahaya menyapu */
.sk { position: relative; display: block; overflow: hidden; border-radius: 6px; background: var(--surface-3); }
.sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent); animation: sk-sapu 1.5s ease-in-out infinite; }
@keyframes sk-sapu { 60%, 100% { transform: translateX(100%); } }
.sk--teks { height: 10px; border-radius: 5px; }
.sk--angka { width: 58%; height: 22px; margin: 10px 0 9px; }
.stat--sk { min-height: 96px; pointer-events: none; }
.stat--sk .sk--teks:first-child { width: 52%; }
.stat--sk .sk--teks:last-child { width: 78%; }

/* Grafik: kerangka menutupi canvas agar tinggi kartu tidak berubah */
.sk-grafik { position: absolute; inset: 0; display: none; align-items: flex-end; gap: 4px; padding: 8px 0 22px 34px; }
.sk-grafik::before { content: ""; position: absolute; left: 34px; right: 0; bottom: 22px; border-top: 1px solid var(--surface-3); }
.sk-grafik .sk { flex: 1 1 0; border-radius: 3px 3px 0 0; }
.sk-grafik--datar { flex-direction: column; align-items: flex-start; justify-content: space-around; gap: 6px; padding: 4px 0 22px 90px; }
.sk-grafik--datar::before { display: none; }
.sk-grafik--datar .sk { flex: 0 0 16px; border-radius: 0 3px 3px 0; }
.analitik-card.memuat .sk-grafik { display: flex; }
.analitik-card.memuat .analitik-chart canvas { visibility: hidden; }

.sk-tabel { display: grid; }
.sk-tabel__baris { display: grid; grid-template-columns: minmax(0, 3fr) repeat(3, minmax(0, 1fr)); gap: 14px; align-items: center; height: 38px; border-bottom: 1px solid var(--surface-3); }
.sk-tabel__baris .sk:first-child { height: 12px; width: 80%; }
.sk-tabel__baris:first-child { height: 32px; }
.sk-tabel__baris:first-child .sk { height: 8px; opacity: .7; }
.sk-hm { display: grid; grid-template-columns: 34px repeat(12, minmax(18px, 1fr)); gap: 3px; min-width: 300px; }
.sk-hm .sk { height: 26px; border-radius: 4px; }
.sk-hm .sk--teks { height: 10px; align-self: center; width: 70%; }
.sk-hm .sk--jam { height: 8px; margin: 3px auto; width: 55%; }
.sk-abc { min-height: 46px; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 6px 10px; align-items: center; }
.sk-abc .sk--kotak { grid-row: span 2; width: 34px; height: 34px; border-radius: 10px; }
.insight-list .sk { height: 40px; border-radius: var(--radius-sm); }
.insight-list .sk:nth-child(2) { width: 88%; }
.insight-list .sk:nth-child(3) { width: 72%; }

/* Konten muncul halus setelah data datang */
.analitik-card.muncul .card__body > *, .insight-list.muncul > * { animation: muncul .28s ease-out both; }
@keyframes muncul { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.sk::after { animation: none; }
	.analitik-card.muncul .card__body > *, .insight-list.muncul > * { animation: none; }
}

/* Rekomendasi */
.insight-card .card__head h2 [class^="icon-"] { color: var(--warning); margin-right: 4px; }
.insight-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.insight { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); border-left: 3px solid var(--border-strong); font-size: 13.5px; line-height: 1.45; }
.insight [class^="icon-"] { margin-top: 2px; }
.insight--bahaya { background: var(--brand-50); border-left-color: var(--brand); }
.insight--bahaya [class^="icon-"] { color: var(--brand-600); }
.insight--waspada { background: var(--warning-50); border-left-color: var(--warning); }
.insight--waspada [class^="icon-"] { color: var(--warning); }
.insight--baik { background: var(--success-50); border-left-color: var(--success); }
.insight--baik [class^="icon-"] { color: var(--success); }
.insight--info { background: var(--info-50); border-left-color: var(--info); }
.insight--info [class^="icon-"] { color: var(--info); }

/* Analisis ABC */
.abc { display: grid; gap: 8px; }
.abc__item { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 10px; align-items: center; font-size: 13px; }
.abc__kelas { grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-weight: 800; color: #fff; background: var(--slate); }
.abc__item--A .abc__kelas { background: var(--success); }
.abc__item--B .abc__kelas { background: var(--warning); }
.abc__item--C .abc__kelas { background: var(--muted); }
.abc__bar { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.abc__bar span { display: block; height: 100%; background: currentColor; color: var(--slate); }
.abc__item--A .abc__bar span { background: var(--success); }
.abc__item--B .abc__bar span { background: var(--warning); }
.abc__item--C .abc__bar span { background: var(--muted); }

/* Heatmap jam ramai */
.analitik-heatmap { overflow-x: auto; }
.hm { display: grid; gap: 3px; min-width: 420px; font-size: 11px; font-variant-numeric: tabular-nums; }
.hm__jam, .hm__hari { color: var(--muted); font-weight: 600; text-align: center; }
.hm__hari { text-align: left; align-self: center; }
.hm__sel { display: grid; place-items: center; height: 26px; border-radius: 4px; font-size: 10.5px; font-weight: 600; }
.hm__kosong { background: none; }
.insight-list:not(.terbuka) .insight--lebih { display: none; }
.insight-toggle { font-size: 13px; padding: 2px 4px; }

/* ---------- Pilihan barang per satuan (B-61, assets/js/pilih-satuan.js) ---------- */
.ps-wadah { position: relative; }
.ps-daftar {
	position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 1040;
	max-height: min(60vh, 420px); overflow-y: auto;
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
}
.ps-daftar[hidden] { display: none; }
.ps-item {
	display: flex; align-items: center; gap: 12px;
	padding: 10px 16px; cursor: pointer; border-top: 1px solid var(--border);
}
.ps-item:first-child { border-top: 0; }
.ps-item--aktif { background: var(--info-50); }
.ps-item__utama { flex: 1 1 auto; min-width: 0; }
.ps-item__nama { font-weight: 700; font-size: 14.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-item__info { font-size: 12.5px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-item__info b { color: var(--text-2); }
.ps-item__info [class^="icon-"] { position: static; transform: none; font-size: 11px; }
.ps-stok {
	flex: none; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
	background: var(--success-50); color: var(--success); white-space: nowrap;
}
.ps-stok--habis { background: var(--brand-50); color: var(--brand); }
.ps-harga { flex: none; min-width: 92px; text-align: right; font-weight: 700; font-size: 14.5px; color: var(--text); white-space: nowrap; }
.ps-kosong { padding: 14px 16px; color: var(--muted); font-size: 13.5px; }
@media (max-width: 600px) {
	.ps-item { flex-wrap: wrap; gap: 4px 10px; padding: 10px 12px; }
	.ps-item__utama { flex-basis: 100%; }
	.ps-harga { min-width: 0; margin-left: auto; }
}
.satuan-isi { display: block; font-size: 11.5px; color: var(--muted); font-weight: 500; }

/* Form barang: satuan lain (B-61) */
.satuan-lain__daftar { display: none; gap: 10px; }
.satuan-lain.ada .satuan-lain__daftar { display: grid; }
.satuan-lain.ada .satuan-lain__kosong { display: none; }
.satuan-lain__kosong { margin: 0 0 8px; font-size: 13px; }
.sl-baris { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px 12px; background: var(--surface-2, #fafafa); }
.sl-baris__kepala { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sl-baris__judul { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.satuan-lain__daftar { counter-reset: sl; }
.sl-baris { counter-increment: sl; }
.sl-baris__judul::after { content: " " counter(sl); }
.sl-baris__isi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; }
.sl-f { display: flex; flex-direction: column; gap: 4px; margin: 0; font-weight: 500; }
.sl-f > span { font-size: 12px; color: var(--text-2); }
.sl-f select, .sl-f input { width: 100% !important; min-width: 0; box-sizing: border-box; margin: 0; }
.sl-f .sl-harga { text-align: right; }
.sl-isi-info { font-size: 11px; color: var(--muted); min-height: 14px; }
@media (max-width: 560px) { .sl-baris__isi { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.satuan-lain__tambah { margin-top: 8px; }
.satuan-lain.is-memuat { opacity: .5; pointer-events: none; }

/* Kasir: modal ubah barang di keranjang (F-25) */
.ei-produk { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; margin-bottom: 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); }
.ei-produk__nama { font-size: 15.5px; font-weight: 700; color: var(--text); line-height: 1.3; }
.ei-produk__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12.5px; color: var(--muted); }
.ei-tag { display: inline-block; padding: 1px 8px; font-weight: 700; font-size: 12px; color: var(--text-2); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 999px; }
.ei-tag--satuan { color: var(--info); background: var(--info-50); border-color: transparent; }
.ei-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.ei-grid .field > label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ei-per { font-weight: 500; font-size: 12px; color: var(--muted); }
.ei-grid .input-money input#harga_e { height: 46px; font-size: 18px; font-weight: 700; }
.ei-grid .help-block { min-height: 18px; }
.ei-msg--ok { color: var(--success); }
.ei-msg--warn { color: var(--warning); }
.ei-msg--err { color: var(--brand-600); font-weight: 600; }
.field.is-error input { border-color: var(--brand) !important; box-shadow: var(--ring); }
.ei-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ei-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; font: 500 12px/18px var(--font); color: var(--text-2); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 999px; cursor: pointer; transition: background-color .15s, border-color .15s; }
.ei-chip b { color: var(--text); font-weight: 700; }
.ei-chip:hover, .ei-chip:focus-visible { background: var(--surface-3); border-color: #c6c0b9; }
.ei-chip[hidden] { display: none; }
.ei-stepper { display: flex; align-items: stretch; height: 46px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.ei-stepper:focus-within { border-color: var(--brand); box-shadow: var(--ring); }
.field.is-error .ei-stepper { border-color: var(--brand); box-shadow: var(--ring); }
.ei-step { flex: none; width: 46px; padding: 0; font-size: 20px; line-height: 1; color: var(--text-2); background: var(--surface-2); border: 0; cursor: pointer; transition: background-color .15s; }
.ei-step:first-child { border-right: 1px solid var(--border); }
.ei-step:last-child { border-left: 1px solid var(--border); }
.ei-step:hover { background: var(--surface-3); color: var(--text); }
.ei-step:active { background: var(--border); }
.field .ei-stepper input[type="number"] { flex: 1; min-width: 0; height: 100%; padding: 0 4px; font-size: 18px; font-weight: 700; text-align: right; border: 0 !important; border-radius: 0; box-shadow: none !important; background: transparent; -moz-appearance: textfield; }
.ei-stepper input::-webkit-outer-spin-button, .ei-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ei-stepper__unit { display: flex; align-items: center; padding: 0 10px 0 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.ei-diskon-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ei-seg { display: inline-flex; padding: 2px; background: var(--surface-3); border-radius: var(--radius-sm); }
.ei-seg__btn { min-width: 38px; padding: 2px 10px; font: 700 12.5px/20px var(--font); color: var(--muted); background: transparent; border: 0; border-radius: var(--radius-xs); cursor: pointer; }
.ei-seg__btn[aria-pressed="true"] { color: var(--text); background: var(--surface); box-shadow: var(--shadow-sm); }
.input-persen { position: relative; }
.input-persen::after { content: "%"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; font-weight: 600; color: var(--muted); pointer-events: none; }
.field .input-persen input { padding-right: 32px; text-align: right; font-variant-numeric: tabular-nums; }
.ei-ringkas { align-self: stretch; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; font-size: 13px; font-variant-numeric: tabular-nums; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); }
.ei-ringkas > div { display: flex; justify-content: space-between; gap: 10px; color: var(--text-2); }
.ei-ringkas__total { margin-top: 2px; padding-top: 8px; border-top: 1px dashed var(--border-strong); align-items: baseline; }
.ei-ringkas__total span { font-weight: 700; color: var(--text); }
.ei-ringkas__total strong { font-size: 20px; color: var(--text); }
.ei-ringkas .ei-ringkas__note { display: block; font-size: 12px; color: var(--muted); }
.ei-ringkas.is-error { border-color: var(--brand-100); background: var(--brand-50); }
.ei-ringkas.is-error .ei-ringkas__note { color: var(--brand-600); font-weight: 600; }
.ei-keys { margin-right: auto; align-self: center; font-size: 12px; color: var(--muted); }
@media (max-width: 600px) {
	.ei-grid { grid-template-columns: minmax(0, 1fr); }
	.ei-keys { display: none; }
}

/* ------------------------------------------------------------------
   WhatsApp gateway: Pengaturan › WhatsApp & kirim faktur di Transaksi Selesai
   ------------------------------------------------------------------ */
.wa-tautan { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 24px; align-items: start; }
.wa-qr { display: grid; place-items: center; width: 272px; height: 272px; box-sizing: border-box; padding: 16px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); }
.wa-qr img, .wa-qr canvas { width: 240px; height: 240px; }
.wa-qr [hidden] { display: none !important; }
.wa-qr__info { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; text-align: center; }
.wa-qr__info [class^="icon-"] { font-size: 44px; color: var(--border-strong); }
.wa-qr__info .wa-qr__ok { color: var(--success); }
.wa-langkah ol { margin: 0 0 10px 20px; color: var(--text-2); }
.wa-langkah li { margin-bottom: 4px; }
.wa-kirim { margin: 0 0 20px; padding: 14px 16px; text-align: left; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); }
.wa-kirim__judul { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-weight: 700; color: var(--text); }
.wa-kirim__judul [class^="icon-"] { color: var(--success); }
.wa-kirim__baris { display: flex; gap: 8px; }
.wa-kirim__baris input[type="tel"] { flex: 1; min-width: 0; height: 40px; margin: 0; box-sizing: border-box; }
.wa-kirim__baris .btn { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.wa-kirim__simpan { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 12.5px; color: var(--text-2); }
.wa-kirim__simpan input { margin: 0; }
.wa-kirim__hasil { margin: 8px 0 0; font-size: 12.5px; }
.wa-kirim__hasil.is-ok { color: var(--success); }
.wa-kirim__hasil.is-error { color: var(--brand-600); }
@media (max-width: 1000px) {
	.wa-tautan { grid-template-columns: minmax(0, 1fr); }
	.wa-qr { margin: 0 auto; }
}
@media (max-width: 480px) {
	.wa-kirim__baris { flex-direction: column; }
}