:root {
  --pos-primary: #9d0759;
  --pos-primary-dark: #6f053f;
  --pos-accent: #b5772f;
  --pos-bg: #f4f2ee;
  --sidebar-w: 260px;
}
body { background: var(--pos-bg); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.btn-primary { --bs-btn-bg: var(--pos-primary); --bs-btn-border-color: var(--pos-primary); --bs-btn-hover-bg: var(--pos-primary-dark); --bs-btn-hover-border-color: var(--pos-primary-dark); --bs-btn-active-bg: var(--pos-primary-dark); --bs-btn-active-border-color: var(--pos-primary-dark); }
.btn-accent { background: var(--pos-accent); border-color: var(--pos-accent); color: #fff; }
.btn-accent:hover { background: #9a6325; border-color: #9a6325; color: #fff; }
a { color: var(--pos-primary); } a:hover { color: var(--pos-primary-dark); }

/* Samakan variabel & komponen Bootstrap dengan warna primary toko */
:root { --bs-primary: #9d0759; --bs-primary-rgb: 157, 7, 89; --bs-link-color: #9d0759; --bs-link-color-rgb: 157, 7, 89; --bs-link-hover-color: #6f053f; --bs-link-hover-color-rgb: 111, 5, 63; }
.text-primary { color: var(--pos-primary) !important; } .bg-primary { background-color: var(--pos-primary) !important; }
.text-bg-primary { background-color: var(--pos-primary) !important; color: #fff !important; }
.btn-outline-primary { --bs-btn-color: #9d0759; --bs-btn-border-color: #9d0759; --bs-btn-hover-bg: #9d0759; --bs-btn-hover-border-color: #9d0759; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #6f053f; --bs-btn-active-border-color: #6f053f; --bs-btn-active-color: #fff; --bs-btn-disabled-color: #9d0759; --bs-btn-disabled-border-color: #9d0759; }
.btn-link { --bs-btn-color: #9d0759; --bs-btn-hover-color: #6f053f; }
.form-control:focus, .form-select:focus { border-color: #d36aa4; box-shadow: 0 0 0 .25rem rgba(157, 7, 89, .18); }
.form-check-input:checked { background-color: #9d0759; border-color: #9d0759; } .form-check-input:focus { border-color: #d36aa4; box-shadow: 0 0 0 .25rem rgba(157, 7, 89, .18); }
.nav-tabs .nav-link.active { color: #9d0759; } .nav-tabs .nav-link { color: #52514e; } .nav-tabs .nav-link:hover { color: #6f053f; }
.page-link { color: #9d0759; } .page-item.active .page-link { background-color: #9d0759; border-color: #9d0759; color: #fff; } .page-link:focus { box-shadow: 0 0 0 .25rem rgba(157, 7, 89, .18); }
.dropdown-item.active, .dropdown-item:active { background-color: #9d0759; } .list-group-item.active { background-color: #9d0759; border-color: #9d0759; }
.progress-bar { background-color: #9d0759; }

/* sidebar */
/* !important: Bootstrap memaksa .offcanvas-lg transparan di layar lebar, yang menimpa latar sidebar. */
.sidebar { width: var(--sidebar-w); background-color: var(--pos-primary) !important; color: #fbe3ef; }
.sidebar .brand { padding: 1rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.1); color: #fff; font-weight: 700; letter-spacing: .3px; }
.sidebar .brand small { display: block; font-weight: 400; color: #eaaecb; font-size: .75rem; }
.sidebar .menu-group { padding: .9rem 1.25rem .3rem; font-size: .7rem; text-transform: uppercase; letter-spacing: 1px; color: #dc93bb; }
.sidebar .nav-link { color: #fbe3ef; padding: .55rem 1.25rem; display: flex; align-items: center; gap: .65rem; border-left: 3px solid transparent; }
.sidebar .nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.sidebar .nav-link.active { background: rgba(255,255,255,.12); border-left-color: var(--pos-accent); color: #fff; font-weight: 600; }
@media (min-width: 992px) {
  .sidebar { position: fixed; inset: 0 auto 0 0; overflow-y: auto; }
  .main { margin-left: var(--sidebar-w); }
}
.topbar { background: #fff; border-bottom: 1px solid #e5e1d8; }
.page-title { font-size: 1.35rem; font-weight: 700; color: var(--pos-primary); }
.card { border: 1px solid #e8e4da; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.table > :not(caption) > * > * { vertical-align: middle; }
.perm-group { border-left: 3px solid var(--pos-accent); }

/* login */
/* --login-bg-opacity: 0.9 = gambar latar transparan 10% (kartu login tidak terpengaruh) */
.login-wrap { --login-bg-opacity: 0.7; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; background: #fdf5ec; position: relative; overflow: hidden; }
.login-wrap::before { content: ""; position: absolute; inset: 0; background: url('../img/login-bg.jpg?v=2') center bottom / cover no-repeat; opacity: var(--login-bg-opacity); }
.login-card { position: relative; width: 100%; max-width: 400px; border: 0; border-radius: 1rem; box-shadow: 0 18px 50px rgba(60,20,30,.28); }
.login-card .logo-img { margin: 0 auto .75rem; text-align: center; } .login-card .logo-img img { max-width: 180px; max-height: 84px; object-fit: contain; }
.sidebar .brand .brand-logo { max-width: 46px; max-height: 38px; object-fit: contain; background: #fff; border-radius: .4rem; padding: 2px; }
.pos-top .brand-logo-sm { height: 26px; max-width: 70px; object-fit: contain; background: #fff; border-radius: .3rem; padding: 1px 3px; }
.login-card .logo { width: 56px; height: 56px; border-radius: 14px; background: var(--pos-accent); color: #fff; display: grid; place-items: center; font-size: 1.7rem; margin: 0 auto .75rem; }

.captcha-img { border: 1px solid var(--bs-border-color); border-radius: .375rem; max-width: 100%; height: auto; }