/* ============================================================
	 Sistem Inventori EO — application styles
	 Built on the Inventory System design-system tokens
	 (brand red #e60000, ink #25282b, Inter, pill CTAs, flat cards).
	 ============================================================ */

* { box-sizing: border-box; }

/* Pakai font resmi Vodafone di seluruh sistem (fallback Inter) */
:root {
	--font-display: "Vodafone", "Inter", "Helvetica Neue", Arial, sans-serif;
	--font-body: "Vodafone", "Inter", "Helvetica Neue", Arial, sans-serif;
}
.dataTables_wrapper, table.dataTable, table.dataTable input, table.dataTable select { font-family: var(--font-body); }

html, body {
	margin: 0;
	padding: 0;
	background: var(--color-canvas-soft);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--type-body-sm-size);
	line-height: var(--type-body-sm-lh);
	-webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ---------- Reusable primitives ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	font-family: var(--font-body);
	font-size: var(--type-button-size);
	line-height: var(--type-button-lh);
	font-weight: var(--weight-regular);
	padding: var(--space-md) var(--space-2xl);
	border-radius: var(--radius-pill-lg);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, opacity .18s ease;
	text-decoration: none;
	white-space: nowrap;
	background: none;
}
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.btn-primary:hover:not(:disabled) { background: #c40000; border-color: #c40000; }
.btn-outline-red { background: var(--color-canvas); color: var(--color-primary); border-color: var(--color-primary); }
.btn-outline-red:hover:not(:disabled) { background: #fff0f0; }
.btn-outline-dark { background: var(--color-canvas); color: var(--color-ink); border-color: var(--color-ink); }
.btn-outline-dark:hover:not(:disabled) { background: var(--color-canvas-soft); }
.btn-ghost { background: none; border-color: transparent; color: var(--color-ink); padding: var(--space-sm) var(--space-lg); }
.btn-ghost:hover:not(:disabled) { background: var(--color-canvas-soft); }
.btn-sm { font-size: var(--type-body-sm-size); line-height: 20px; padding: var(--space-sm) var(--space-lg); }

/* CTA khas Vodafone: pil merah + lingkaran putih berisi ikon + teks kapital tebal */
.btn-cta {
	background: var(--color-primary); color: #fff; border-color: var(--color-primary);
	border-radius: var(--radius-pill-lg);
	padding: 7px 26px 7px 7px;
	gap: 14px;
	text-transform: uppercase; font-weight: 700; letter-spacing: .4px;
	font-size: 16px; line-height: 1;
	box-shadow: 0 6px 16px rgba(230, 0, 0, .28);
}
.btn-cta:hover:not(:disabled) { background: #c40000; border-color: #c40000; box-shadow: 0 9px 22px rgba(230, 0, 0, .34); }
.btn-cta:disabled { box-shadow: none; }
.btn-cta .cta-ic {
	width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--color-primary);
	display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.btn-cta .cta-ic svg { width: 20px; height: 20px; }
.btn-cta.btn-cta-sm { font-size: 14px; padding: 5px 20px 5px 5px; gap: 11px; }
.btn-cta.btn-cta-sm .cta-ic { width: 30px; height: 30px; }
.btn-cta.btn-cta-sm .cta-ic svg { width: 17px; height: 17px; }

.input,
.select,
textarea.input {
	width: 100%;
	background: var(--color-canvas);
	color: var(--color-ink);
	border: 1px solid var(--color-ink);
	border-radius: var(--radius-sm);
	padding: var(--space-md) var(--space-lg);
	font-family: var(--font-body);
	font-size: var(--type-body-sm-size);
	line-height: var(--type-body-sm-lh);
	outline: none;
}
.input:focus, .select:focus, textarea.input:focus { border-color: var(--color-primary); }
.input::placeholder { color: var(--color-mute); }
.select { appearance: none; -webkit-appearance: none; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2325282b' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right var(--space-lg) center; padding-right: 40px; }
.select:disabled { opacity: .5; cursor: not-allowed; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: var(--type-caption-upper-size); letter-spacing: .6px; text-transform: uppercase; font-weight: 700; color: var(--color-body); }
.field-req { color: var(--color-primary); }

.badge {
	display: inline-flex; align-items: center;
	background: var(--color-canvas-soft); color: var(--color-ink);
	font-size: var(--type-caption-strong-size); line-height: 18px; font-weight: 700;
	padding: 3px var(--space-md); border-radius: var(--radius-pill-md);
}
.badge-red { background: #ffe9e9; color: var(--color-primary); }
.badge-ink { background: var(--color-ink); color: var(--color-on-dark); }

.eyebrow { display: block; font-size: var(--type-eyebrow-size); font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--color-primary); margin-bottom: 10px; }

/* Chip kode merah untuk nilai pilihan (dipakai di tabel & detail) */
.opt-val { display: inline-flex; align-items: center; gap: 7px; }
.opt-code { font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace; font-size: 11px; font-weight: 700; color: var(--color-primary); background: #ffe9e9; border-radius: 4px; padding: 2px 6px; letter-spacing: .3px; flex-shrink: 0; }
.dl dd .path-sep { color: var(--color-mute); font-weight: 400; margin: 0 5px; }

.card {
	background: var(--color-canvas);
	border-radius: var(--radius-card);
	padding: var(--space-2xl);
}

.hairline { height: 1px; background: var(--color-ink); opacity: .12; border: 0; margin: 0; }

/* ---------- Orb (brand mark) ---------- */
.orb {
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--color-primary); border-radius: var(--radius-sm); flex-shrink: 0;
}
.orb svg { display: block; }

/* ---------- App shell ---------- */
.appbar {
	position: sticky; top: 0; z-index: 40;
	display: flex; align-items: center; justify-content: space-between;
	background: var(--color-ink); color: var(--color-on-dark);
	padding: var(--space-md) var(--space-3xl);
	gap: var(--space-2xl);
}
.appbar-brand { display: flex; align-items: center; gap: var(--space-md); }
.appbar-brand .wordmark { font-weight: 800; font-size: 18px; letter-spacing: -0.2px; text-transform: uppercase; }
.appbar-nav { display: flex; align-items: center; gap: 4px; }
.navlink {
	display: inline-flex; align-items: center; gap: 7px;
	color: var(--color-on-dark); text-decoration: none; opacity: .78;
	font-size: var(--type-body-sm-size); padding: var(--space-sm) var(--space-lg);
	border-radius: var(--radius-pill-md); transition: opacity .18s ease, background-color .18s ease;
}
.navlink svg { display: block; }
.navlink:hover { opacity: 1; }
.navlink.active { opacity: 1; background: rgba(255,255,255,.12); font-weight: 600; }
.navlink.active svg { stroke: var(--color-primary); }
.appbar-user { display: flex; align-items: center; gap: var(--space-lg); }
.user-chip { display: flex; align-items: center; gap: var(--space-md); cursor: default; }
.user-avatar { width: 34px; height: 34px; border-radius: var(--radius-full); background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; }
.user-meta { line-height: 1.2; }
.user-meta .u-name { font-size: 14px; font-weight: 600; }
.user-meta .u-role { font-size: 12px; opacity: .7; }

.page { max-width: 1440px; margin: 0 auto; padding: var(--space-3xl); }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-2xl); margin-bottom: var(--space-2xl); flex-wrap: wrap; }
.page-title { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -1px; font-size: 52px; line-height: .96; margin: 6px 0 0; }
.page-actions { display: flex; gap: var(--space-md); }

/* ---------- Toolbar / filters ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: flex-end; margin-bottom: var(--space-xl); }
.toolbar .search { flex: 1 1 280px; min-width: 220px; position: relative; }
.toolbar .search .input { padding-left: 42px; }
.toolbar .search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); }
.toolbar .filter { flex: 0 0 auto; min-width: 150px; }
.result-count { font-size: 14px; color: var(--color-body); margin-bottom: var(--space-md); }

/* Filter atribut bertingkat: induk sebaris di atas, sub turun ke bawah dan
   menyatu jadi satu kotak (rounded hanya di atas induk & di bawah sub terakhir,
   border pertemuan digabung agar tidak dobel/tebal). */
#invfilters { align-items: flex-start; }
.filter-cascade { display: flex; flex-direction: column; }
.filter-cascade .select { border-radius: 0; position: relative; }
.filter-cascade .select:not(:first-child) { margin-top: -1px; }
.filter-cascade .select:hover, .filter-cascade .select:focus { z-index: 1; }
.filter-cascade .select:first-child { border-top-left-radius: var(--radius-sm); border-top-right-radius: var(--radius-sm); }
.filter-cascade .select:last-child { border-bottom-left-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }

/* ---------- Table ---------- */
.table-wrap { background: var(--color-canvas); border-radius: var(--radius-card); overflow: hidden; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data thead th {
	text-align: left; text-transform: uppercase; letter-spacing: .5px;
	font-size: 12px; font-weight: 700; color: var(--color-body);
	padding: var(--space-lg); border-bottom: 1px solid rgba(37,40,43,.14); white-space: nowrap;
}
table.data tbody td { padding: var(--space-md) var(--space-lg); border-bottom: 1px solid rgba(37,40,43,.08); vertical-align: middle; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr { transition: background-color .12s ease; }
table.data tbody tr:hover { background: var(--color-canvas-soft); cursor: pointer; }
.cell-code { font-weight: 700; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.thumb { width: 46px; height: 46px; border-radius: var(--radius-sm); object-fit: cover; background: var(--color-canvas-soft); display: block; }
.thumb-ph { width: 46px; height: 46px; border-radius: var(--radius-sm); background: var(--color-canvas-soft); display: flex; align-items: center; justify-content: center; color: var(--color-mute); }
.row-actions { display: flex; gap: 4px; justify-content: flex-end; }
.icon-btn { width: 34px; height: 34px; border-radius: var(--radius-full); border: 1px solid rgba(37,40,43,.16); background: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--color-ink); transition: background-color .15s ease, border-color .15s ease; }
.icon-btn:hover { background: var(--color-canvas-soft); }
.icon-btn.danger:hover { background: #fff0f0; border-color: var(--color-primary); color: var(--color-primary); }

.empty { padding: 64px var(--space-2xl); text-align: center; color: var(--color-body); }
.empty .orb { margin-bottom: var(--space-lg); }

/* ---------- Modal ---------- */
.modal-overlay { position: fixed; inset: 0; background: rgba(37,40,43,.55); z-index: 60; display: flex; align-items: flex-start; justify-content: center; padding: 40px var(--space-xl); overflow-y: auto; }
.modal-overlay[hidden] { display: none; }
.modal { background: var(--color-canvas); border-radius: var(--radius-card); width: 100%; max-width: 920px; margin: auto; }
.modal.narrow { max-width: 480px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2xl) var(--space-2xl) var(--space-lg); }
.modal-head .eyebrow { margin-bottom: 8px; }
.modal-title { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -.5px; font-size: 30px; margin: 0; }
.modal-body { padding: 0 var(--space-2xl) var(--space-2xl); }
.modal-foot { display: flex; justify-content: flex-end; gap: var(--space-md); padding: var(--space-lg) var(--space-2xl) var(--space-2xl); }
.modal .close { width: 40px; height: 40px; }

/* ---------- Form grid ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg) var(--space-xl); }
.form-grid .col-span-2 { grid-column: 1 / -1; }
.cascade { display: flex; flex-direction: column; gap: 6px; }
.cascade-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.cascade-row .select { flex: 1 1 140px; min-width: 120px; }
.code-preview { font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace; font-size: 14px; font-weight: 700; color: var(--color-primary); background: var(--color-canvas-soft); border: 1px dashed var(--color-mute); border-radius: var(--radius-sm); padding: var(--space-md) var(--space-lg); word-break: break-all; letter-spacing: .3px; }

/* Checkbox grid dipakai di dialog "Kolom & Filter" */
.check-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; max-height: 260px; overflow-y: auto; padding: 2px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--color-ink); cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--color-primary); cursor: pointer; flex-shrink: 0; }

.photo-drop { border: 1px dashed var(--color-mute); border-radius: var(--radius-sm); padding: var(--space-lg); display: flex; align-items: center; gap: var(--space-lg); }
.photo-preview { width: 96px; height: 96px; border-radius: var(--radius-sm); object-fit: cover; background: var(--color-canvas-soft); }
.photo-ph { width: 96px; height: 96px; border-radius: var(--radius-sm); background: var(--color-canvas-soft); display: flex; align-items: center; justify-content: center; color: var(--color-mute); }

/* ---------- Detail view ---------- */
.detail-grid { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-2xl); }
.detail-photo { width: 100%; aspect-ratio: 1; border-radius: var(--radius-sm); object-fit: cover; background: var(--color-canvas-soft); }
.detail-photo-ph { width: 100%; aspect-ratio: 1; border-radius: var(--radius-sm); background: var(--color-canvas-soft); display: flex; align-items: center; justify-content: center; color: var(--color-mute); }
.dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg) var(--space-2xl); margin: 0; }
.dl .di { display: flex; flex-direction: column; gap: 3px; }
.dl dt { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; color: var(--color-body); margin: 0; }
.dl dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--color-ink); }
.dl dd .path-sep { color: var(--color-mute); font-weight: 400; margin: 0 5px; }
.dl dd.muted { color: var(--color-mute); font-weight: 400; }

/* ---------- Settings ---------- */
.settings-layout { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-2xl); align-items: start; }
.cat-list { background: var(--color-canvas); border-radius: var(--radius-card); padding: var(--space-sm); }
.cat-item { display: flex; align-items: center; justify-content: space-between; padding: var(--space-md) var(--space-lg); border-radius: var(--radius-sm); cursor: pointer; font-weight: 600; font-size: 15px; }
.cat-item:hover { background: var(--color-canvas-soft); }
.cat-item.active { background: var(--color-ink); color: var(--color-on-dark); }
.cat-item .count { font-size: 12px; opacity: .6; font-weight: 500; }
.cat-item.active .count { opacity: .8; }

.tree { list-style: none; margin: 0; padding: 0; }
.tree .tree { margin-left: 26px; border-left: 1px solid rgba(37,40,43,.12); padding-left: var(--space-lg); }
.node { display: flex; align-items: center; gap: var(--space-sm); padding: 7px 0; }
.node .twist { width: 22px; height: 22px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--color-body); flex-shrink: 0; }
.node .twist:hover { background: var(--color-canvas-soft); }
.node .twist.leaf { visibility: hidden; }
.node .node-label { font-weight: 600; font-size: 15px; }
.node .lvl-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary); flex-shrink: 0; }
.node .node-code { font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace; font-size: 11px; font-weight: 700; color: var(--color-primary); background: #ffe9e9; border-radius: 4px; padding: 2px 7px; letter-spacing: .3px; flex-shrink: 0; }
.node .node-actions { display: flex; gap: 2px; margin-left: auto; opacity: 0; transition: opacity .12s ease; }
.node:hover .node-actions { opacity: 1; }
.node .mini-btn { width: 28px; height: 28px; border-radius: var(--radius-sm); border: 0; background: none; cursor: pointer; color: var(--color-body); display: inline-flex; align-items: center; justify-content: center; }
.node .mini-btn:hover { background: var(--color-canvas-soft); color: var(--color-ink); }
.node .mini-btn.danger:hover { background: #fff0f0; color: var(--color-primary); }
.node-collapsed > .tree { display: none; }
.inline-add { display: flex; gap: var(--space-sm); align-items: center; padding: 6px 0 6px 30px; }
.inline-add .input { max-width: 260px; }

/* ---------- Users ---------- */
.role-pill { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 3px 10px; border-radius: var(--radius-pill-md); }
.role-manager { background: #ffe0e0; color: var(--color-primary); }
.role-supervisor { background: var(--color-ink); color: #fff; }
.role-operator { background: #e6e6e6; color: var(--color-ink); }
.role-customer { background: #f2f2f2; color: var(--color-body); }

/* ---------- Login ---------- */
.login-stage { min-height: 100vh; background: radial-gradient(130% 130% at 12% 18%, #ff2b2b 0%, #e60000 32%, #b40000 66%, #7d0000 100%); color: var(--color-on-dark); display: flex; }
.login-hero { flex: 1 1 55%; padding: var(--space-3xl); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.login-hero::after { content: ""; position: absolute; right: -160px; bottom: -160px; width: 620px; height: 620px; border-radius: 50%; background: repeating-radial-gradient(circle, rgba(255,255,255,.10) 0 2px, transparent 2px 30px); pointer-events: none; }
.login-hero > * { position: relative; z-index: 1; }
.login-hero .brand-row { display: flex; align-items: center; gap: var(--space-md); }
.login-hero .brand-row .wordmark { font-weight: 800; text-transform: uppercase; letter-spacing: -.2px; }
.login-hero h1 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -1px; font-size: clamp(56px, 8vw, 120px); line-height: .92; margin: 0; }
.login-hero .sub { font-weight: 300; font-size: 24px; max-width: 460px; color: rgba(255,255,255,.82); margin-top: var(--space-xl); }
.login-hero .foot { font-size: 13px; color: rgba(255,255,255,.5); }
.login-panel { flex: 0 0 440px; background: var(--color-canvas); color: var(--color-ink); padding: var(--space-3xl); display: flex; flex-direction: column; justify-content: center; }
.login-panel h2 { font-family: var(--font-display); text-transform: uppercase; font-weight: 800; letter-spacing: -.5px; font-size: 34px; margin: 0 0 4px; }
.login-panel .lead { color: var(--color-body); margin: 0 0 var(--space-2xl); }
.login-form { display: flex; flex-direction: column; gap: var(--space-lg); }
.login-error { background: #fff0f0; color: var(--color-primary); border-radius: var(--radius-sm); padding: var(--space-md) var(--space-lg); font-size: 14px; font-weight: 600; display: none; }
.demo-creds { margin-top: var(--space-2xl); border-top: 1px solid rgba(37,40,43,.12); padding-top: var(--space-lg); }
.demo-creds h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--color-body); margin: 0 0 var(--space-sm); }
.demo-creds .cred { display: flex; justify-content: space-between; font-size: 13px; padding: 5px 0; cursor: pointer; border-radius: var(--radius-sm); }
.demo-creds .cred:hover { background: var(--color-canvas-soft); }
.demo-creds .cred code { font-weight: 700; }

@media (max-width: 860px) {
	.login-hero { display: none; }
	.login-panel { flex: 1; }
	.form-grid { grid-template-columns: 1fr; }
	.detail-grid { grid-template-columns: 1fr; }
	.settings-layout { grid-template-columns: 1fr; }
}

/* ---------- Toast ---------- */
.toast-wrap { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: var(--space-sm); align-items: center; }
.toast { background: var(--color-ink); color: #fff; padding: var(--space-md) var(--space-xl); border-radius: var(--radius-pill-md); font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: var(--space-sm); animation: toastin .2s ease; }
.toast.err { background: var(--color-primary); }
@keyframes toastin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.access-denied { text-align: center; padding: 80px var(--space-2xl); }
.access-denied .orb { margin-bottom: var(--space-lg); }
.access-denied h3 { font-family: var(--font-display); text-transform: uppercase; font-weight: 800; font-size: 28px; margin: 0 0 8px; }
.access-denied p { color: var(--color-body); }

/* ============================================================
	 DataTables — override tampilan agar sesuai brand
	 ============================================================ */
.table-wrap .dataTables_wrapper { width: 100%; }
.dt-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-lg) var(--space-xl); flex-wrap: wrap; }
.dt-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-lg) var(--space-xl); flex-wrap: wrap; border-top: 1px solid rgba(37,40,43,.08); }
.dataTables_length label, .dataTables_filter label { display: flex; align-items: center; gap: var(--space-sm); margin: 0; font-size: 14px; color: var(--color-body); }
.dataTables_length select { border: 1px solid var(--color-ink); border-radius: var(--radius-sm); padding: 6px 28px 6px 10px; font-family: var(--font-body); font-size: 14px; background: #fff;
	-webkit-appearance: none; appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2325282b' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 8px center; cursor: pointer; }
.dataTables_filter input { border: 1px solid var(--color-ink); border-radius: var(--radius-sm); padding: 8px 14px; font-family: var(--font-body); font-size: 14px; min-width: 260px; outline: none; margin-left: 0; }
.dataTables_filter input:focus { border-color: var(--color-primary); }
.dataTables_info { font-size: 13px; color: var(--color-body); padding-top: 0; }
.dataTables_paginate { display: flex; gap: 6px; flex-wrap: wrap; }
.dataTables_paginate .paginate_button { padding: 6px 13px; border-radius: var(--radius-pill-md); border: 1px solid rgba(37,40,43,.16) !important; cursor: pointer; font-size: 14px; color: var(--color-ink) !important; background: #fff !important; }
.dataTables_paginate .paginate_button.current { background: var(--color-primary) !important; border-color: var(--color-primary) !important; color: #fff !important; }
.dataTables_paginate .paginate_button.disabled { opacity: .35; cursor: default; }
.dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) { background: var(--color-canvas-soft) !important; color: var(--color-ink) !important; }
/* header tabel bisa diurutkan */
table.data.dataTable thead th { cursor: pointer; }
table.data.dataTable thead th.sorting_disabled { cursor: default; }
table.data.dataTable { border-collapse: collapse !important; margin: 0 !important; }
table.data.dataTable tbody td { border-bottom: 1px solid rgba(37,40,43,.08); }
/* kontrol expand (responsive) */
table.data.dataTable tbody td.dtr-control { cursor: pointer; }
table.data.dataTable > tbody > tr.child ul.dtr-details { width: 100%; }
table.data.dataTable > tbody > tr.child span.dtr-title { min-width: 140px; font-weight: 700; color: var(--color-body); text-transform: uppercase; font-size: 11px; letter-spacing: .4px; }

/* Menu pemilih kolom */
.col-chooser { position: relative; }
.col-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; background: #fff; border: 1px solid var(--color-ink); border-radius: var(--radius-sm); padding: var(--space-sm); min-width: 220px; max-height: 340px; overflow: auto; display: none; }
.col-menu.open { display: block; }
.col-menu-head { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; color: var(--color-body); padding: 6px var(--space-sm) var(--space-sm); }
.col-opt { display: flex; align-items: center; gap: 10px; padding: 7px var(--space-sm); border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; }
.col-opt:hover { background: var(--color-canvas-soft); }
.col-opt input { accent-color: var(--color-primary); width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; }
.col-opt input:disabled { opacity: .5; cursor: not-allowed; }

/* ============================================================
	 Responsif — layar kecil
	 ============================================================ */
@media (max-width: 900px) {
	.appbar { flex-wrap: wrap; padding: 10px var(--space-lg); gap: var(--space-md); }
	.appbar-nav { order: 3; width: 100%; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
	.navlink { white-space: nowrap; flex-shrink: 0; }
	.appbar-user { margin-left: auto; }
}
@media (max-width: 720px) {
	.page { padding: var(--space-xl) var(--space-lg); }
	.page-title { font-size: 34px; letter-spacing: -.5px; }
	.page-head { gap: var(--space-md); }
	.page-actions { width: 100%; }
	.page-actions .btn { width: 100%; }
	.appbar-brand .wordmark { font-size: 15px; }
	.user-meta { display: none; }
	.toolbar { gap: var(--space-sm); }
	.toolbar .filter { flex: 1 1 46%; min-width: 0; }
	.col-chooser, .toolbar #btnClearFilter { flex: 1 1 46%; }
	.col-chooser .btn, #btnClearFilter { width: 100%; }
	.col-menu { left: 0; right: auto; }
	.dt-head, .dt-foot { padding: var(--space-md) var(--space-lg); }
	.dataTables_filter { width: 100%; }
	.dataTables_filter label { width: 100%; }
	.dataTables_filter input { min-width: 0; width: 100%; }
	.modal-overlay { padding: 16px 10px; }
	.modal-title { font-size: 24px; }
	/* tabel non-DataTables (pengguna) bisa digulir horizontal */
	.table-wrap { overflow-x: auto; }
	table.data:not(.dataTable) { min-width: 560px; }
}