:root {
	--app-primary: #4f46e5;
	--app-primary-dark: #4338ca;
	--app-bg: #f6f7fb;
	--app-surface: #ffffff;
	--app-border: #e6e8ef;
	--app-text: #1f2430;
	--app-muted: #6b7280;
	--app-sidebar-w: 260px;
	--bs-primary: #4f46e5;
	--bs-primary-rgb: 79, 70, 229;
}
body { background: var(--app-bg); color: var(--app-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.btn-primary { --bs-btn-bg: var(--app-primary); --bs-btn-border-color: var(--app-primary); --bs-btn-hover-bg: var(--app-primary-dark); --bs-btn-hover-border-color: var(--app-primary-dark); --bs-btn-active-bg: var(--app-primary-dark); --bs-btn-active-border-color: var(--app-primary-dark); }
.form-control:focus, .form-select:focus { border-color: var(--app-primary); box-shadow: 0 0 0 .2rem rgba(79, 70, 229, .15); }

/* Sidebar */
.app-sidebar { position: fixed; inset: 0 auto 0 0; width: var(--app-sidebar-w); background: var(--app-surface); border-right: 1px solid var(--app-border); flex-direction: column; padding: 1.25rem 1rem; overflow-y: auto; z-index: 100; }
.app-brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--app-text); padding: 0 .5rem 1.25rem; font-weight: 600; }
.app-brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-brand-logo { width: 36px; height: 36px; object-fit: contain; border-radius: 8px; }
.app-brand-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--app-primary); color: #fff; flex: none; }
.app-brand-icon-lg { width: 56px; height: 56px; font-size: 1.5rem; border-radius: 16px; }

.app-menu { display: flex; flex-direction: column; gap: .15rem; }
.app-menu-link, .app-menu-group-title { display: flex; align-items: center; gap: .75rem; padding: .55rem .75rem; border-radius: 10px; color: var(--app-text); text-decoration: none; font-size: .95rem; }
.app-menu-link i, .app-menu-group-title i { width: 1.1rem; text-align: center; color: var(--app-muted); }
a.app-menu-link:hover { background: #eef0ff; }
.app-menu-link.active { background: #eef0ff; color: var(--app-primary); font-weight: 600; }
.app-menu-link.active i, .app-menu-group-title.active i { color: var(--app-primary); }
.app-menu-group { margin-top: .35rem; }
.app-menu-group-title { font-weight: 600; cursor: default; }
.app-menu-sublink { display: block; padding: .35rem .75rem .35rem 2.6rem; border-radius: 8px; color: var(--app-muted); text-decoration: none; font-size: .9rem; }
a.app-menu-sublink:hover { color: var(--app-text); background: #f3f4f8; }
.app-menu-sublink.active { color: var(--app-primary); font-weight: 600; }
.app-menu .disabled { opacity: .45; cursor: not-allowed; }

/* Layout utama */
.app-main { min-height: 100vh; }
@media (min-width: 992px) { .app-main { margin-left: var(--app-sidebar-w); } }
.app-topbar { position: sticky; top: 0; z-index: 90; display: flex; align-items: center; gap: .75rem; padding: .75rem 1.25rem; background: rgba(246, 247, 251, .9); backdrop-filter: blur(6px); border-bottom: 1px solid var(--app-border); }
.app-page-title { font-size: 1.15rem; font-weight: 600; margin: 0; }
.app-user-btn { border: 0; background: transparent; }
.app-content { padding: 1.5rem 1.25rem 3rem; max-width: 1100px; }
@media (max-width: 575.98px) { .app-content { padding: 1rem .75rem 2.5rem; } }

.app-card { border: 1px solid var(--app-border); border-radius: 14px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.settings-logo { height: 48px; max-width: 160px; object-fit: contain; border: 1px solid var(--app-border); border-radius: 8px; padding: 4px; background: #fff; }

/* Checklist dashboard */
.app-checklist li { display: flex; align-items: center; gap: .85rem; padding: .85rem 0; border-bottom: 1px solid var(--app-border); }
.app-checklist li:last-child { border-bottom: 0; }
.app-checklist i { font-size: 1.15rem; color: #c4c8d4; }
.app-checklist li.done i { color: #16a34a; }
.app-checklist li.soon { opacity: .6; }

/* Halaman login / setup */
.auth-body { background: linear-gradient(160deg, #eef0ff 0%, var(--app-bg) 60%); }
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.auth-card { width: 100%; max-width: 420px; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 18px; padding: 2rem; box-shadow: 0 10px 30px rgba(16, 24, 40, .06); }
.parsley-errors-list { list-style: none; margin: .25rem 0 0; padding: 0; color: #dc3545; font-size: .875em; }

/* Tabel & komponen data master */
.app-table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--app-muted); font-weight: 600; white-space: nowrap; }
.app-table td { vertical-align: middle; }
.app-table td.num, .app-table th.num { text-align: right; white-space: nowrap; }
.table-actions { white-space: nowrap; text-align: right; }
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--app-muted); }
.empty-state i { font-size: 2.5rem; color: #c4c8d4; margin-bottom: .75rem; }
.empty-state h3 { font-size: 1.05rem; color: var(--app-text); }
.info-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--app-muted); margin-bottom: .15rem; }
.info-value { font-weight: 500; word-break: break-word; }
.stat-card { border: 1px solid var(--app-border); border-radius: 12px; padding: .9rem 1rem; background: #fff; height: 100%; }
.stat-card .stat-value { font-size: 1.15rem; font-weight: 600; }
.nav-tabs .nav-link { color: var(--app-muted); }
.nav-tabs .nav-link.active { color: var(--app-primary); font-weight: 600; }
.tab-soon { opacity: .6; }
.dataTables_wrapper .row { margin: 0; }
@media (max-width: 767.98px) { .table-responsive-stack { overflow-x: auto; } }