/* ============================================================
   Asetku Custom Theme — Light Mode (Notion-inspired warm minimalism)
   Hasil konsolidasi blok v1..v28: hanya deklarasi yang sudah tertimpa
   yang dibuang. Urutan cascade & gaya visual TIDAK berubah.
   Dimuat setelah soft-ui-dashboard.css.
   ============================================================ */
:root {
    --atk-primary:#2563eb;
    --atk-primary-hover:#1d4ed8;
    --atk-primary-soft:#eff6ff;
    --atk-focus:#3b82f6;
    --atk-bg:#f7f7f8;
    --atk-surface:#ffffff;
    --atk-text:#1f2328;
    --atk-text-secondary:#5f6672;
    --atk-text-muted:#9aa1ac;
    --atk-border:rgba(16, 20, 30, 0.08);
    --atk-border-strong:rgba(16, 20, 30, 0.14);
    --atk-success:#16a34a;
    --atk-success-soft:#f0fdf4;
    --atk-warning:#d97706;
    --atk-warning-soft:#fffbeb;
    --atk-danger:#dc2626;
    --atk-danger-soft:#fef2f2;
    --atk-info:#0891b2;
    --atk-info-soft:#ecfeff;
    --atk-radius-sm:8px;
    --atk-radius-md:12px;
    --atk-radius-lg:16px;
    --atk-radius-xl:20px;
    --atk-radius-pill:999px;
    --atk-shadow-card:0 1px 2px rgba(16, 20, 30, 0.03),
                       0 4px 12px rgba(16, 20, 30, 0.04),
                       0 12px 28px rgba(16, 20, 30, 0.04);
    --atk-shadow-pop:0 2px 4px rgba(16, 20, 30, 0.04),
                      0 8px 20px rgba(16, 20, 30, 0.06),
                      0 20px 44px rgba(16, 20, 30, 0.08);
    --atk-shadow-focus:0 0 0 3px rgba(59, 130, 246, 0.25);
}
body {
    background-color:var(--atk-bg) !important;
    color:var(--atk-text);
    font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}
body.login-page {
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
}
a {
    color:var(--atk-primary);
    transition:color 0.15s ease;
}
a:hover {
    color:var(--atk-primary-hover);
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color:var(--atk-text);
    letter-spacing:-0.015em;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline:none;
    box-shadow:var(--atk-shadow-focus);
    border-radius:var(--atk-radius-sm);
}
.card {
    background-color:var(--atk-surface);
    transition:box-shadow 0.2s ease, transform 0.2s ease;
}
.card-header {
    background:transparent !important;
}
.card-body {
    padding:1.5rem !important;
}
.card-footer {
    background:transparent !important;
    border-top:1px solid var(--atk-border) !important;
}
.card:hover {
    box-shadow:0 2px 4px rgba(16, 20, 30, 0.04),
                0 8px 20px rgba(16, 20, 30, 0.06),
                0 24px 48px rgba(16, 20, 30, 0.07) !important;
}
.btn {
    font-size:0.8125rem !important;
    transition:all 0.15s ease !important;
}
.btn:hover {
    transform:translateY(-1px);
}
.btn.bg-gradient-primary:hover, .btn.btn-primary:hover {
    border-color:var(--atk-primary-hover) !important;
}
.btn.bg-gradient-success, .btn.btn-success {
    background:var(--atk-success) !important;
    background-image:none !important;
    border:1px solid var(--atk-success) !important;
}
.btn.bg-gradient-warning, .btn.btn-warning {
    background:var(--atk-warning) !important;
    background-image:none !important;
    border:1px solid var(--atk-warning) !important;
    color:#fff !important;
}
.btn.bg-gradient-danger, .btn.btn-danger {
    background:var(--atk-danger) !important;
    background-image:none !important;
    border:1px solid var(--atk-danger) !important;
}
.btn.bg-gradient-info, .btn.btn-info {
    background:var(--atk-info) !important;
    background-image:none !important;
    border:1px solid var(--atk-info) !important;
}
.btn-outline-primary {
    color:var(--atk-primary) !important;
    border-color:var(--atk-primary) !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
    background:var(--atk-primary) !important;
    color:#ffffff !important;
    border-color:var(--atk-primary) !important;
}
.btn-outline-success:hover {
    background:var(--atk-success) !important;
    color:#ffffff !important;
    border-color:var(--atk-success) !important;
}
.btn-outline-danger:hover {
    background:var(--atk-danger) !important;
    color:#ffffff !important;
    border-color:var(--atk-danger) !important;
}
.btn-outline-info:hover {
    background:var(--atk-info) !important;
    color:#ffffff !important;
    border-color:var(--atk-info) !important;
}
.btn-outline-warning:hover {
    background:var(--atk-warning) !important;
    color:#ffffff !important;
    border-color:var(--atk-warning) !important;
}
.btn-outline-secondary:hover {
    background:#5f6672 !important;
    color:#ffffff !important;
    border-color:#5f6672 !important;
}
.btn-outline-dark:hover {
    background:#23272f !important;
    color:#ffffff !important;
    border-color:#23272f !important;
}
.btn-primary, .btn.btn-primary {
    background:linear-gradient(135deg, var(--atk-primary) 0%, #1d4ed8 100%) !important;
    background-image:linear-gradient(135deg, var(--atk-primary) 0%, #1d4ed8 100%) !important;
    border:none !important;
    color:#ffffff !important;
    box-shadow:0 4px 10px rgba(37, 99, 235, 0.25) !important;
}
.btn-primary:hover, .btn.btn-primary:hover, .btn-primary:focus, .btn.btn-primary:focus, .btn-primary:active, .btn.btn-primary:active {
    background:linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
    background-image:linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
    color:#ffffff !important;
}
.btn-success, .btn.btn-success {
    background:var(--atk-success) !important;
    border-color:var(--atk-success) !important;
    color:#fff !important;
}
.btn-success:hover, .btn.btn-success:hover {
    background:#15803d !important;
    border-color:#15803d !important;
    color:#fff !important;
}
.btn-danger, .btn.btn-danger {
    background:var(--atk-danger) !important;
    border-color:var(--atk-danger) !important;
    color:#fff !important;
}
.btn-danger:hover, .btn.btn-danger:hover {
    background:#b91c1c !important;
    border-color:#b91c1c !important;
    color:#fff !important;
}
.btn-info, .btn.btn-info {
    background:var(--atk-info) !important;
    border-color:var(--atk-info) !important;
    color:#fff !important;
}
.btn-info:hover, .btn.btn-info:hover {
    background:#0e7490 !important;
    border-color:#0e7490 !important;
    color:#fff !important;
}
.btn-warning, .btn.btn-warning {
    background:var(--atk-warning) !important;
    border-color:var(--atk-warning) !important;
    color:#fff !important;
}
.btn-warning:hover, .btn.btn-warning:hover {
    background:#b45309 !important;
    border-color:#b45309 !important;
    color:#fff !important;
}
.btn-dark, .btn.btn-dark {
    background:#23272f !important;
    border-color:#23272f !important;
    color:#fff !important;
}
.btn-dark:hover {
    background:#16181d !important;
    color:#fff !important;
}
.btn-secondary, .btn.btn-secondary {
    background:#5f6672 !important;
    border-color:#5f6672 !important;
    color:#fff !important;
}
.btn-secondary:hover {
    background:#4b515c !important;
    color:#fff !important;
}
.btn-light, .btn.btn-light {
    background:#f1f2f4 !important;
    border-color:#e2e5e9 !important;
    color:var(--atk-text) !important;
}
.btn-light:hover {
    background:#e2e5e9 !important;
    color:var(--atk-text) !important;
}
.btn.bg-gradient-success:hover {
    background:linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    background-image:linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    color:#fff !important;
}
.btn.bg-gradient-danger:hover {
    background:linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    background-image:linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    color:#fff !important;
}
.btn.bg-gradient-info:hover {
    background:linear-gradient(135deg, #0891b2 0%, #0e7490 100%) !important;
    background-image:linear-gradient(135deg, #0891b2 0%, #0e7490 100%) !important;
    color:#fff !important;
}
.btn.bg-gradient-warning:hover {
    background:linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
    background-image:linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
    color:#fff !important;
}
.btn.bg-gradient-dark:hover {
    background:linear-gradient(135deg, #1f2937 0%, #16181d 100%) !important;
    background-image:linear-gradient(135deg, #1f2937 0%, #16181d 100%) !important;
    color:#fff !important;
}
.btn-sm {
    border-radius:var(--atk-radius-sm) !important;
}
.form-control, .form-select {
    border:1px solid #d8dce3 !important;
    padding:0.5rem 0.875rem !important;
    font-size:0.875rem !important;
    color:var(--atk-text) !important;
    background-color:var(--atk-surface) !important;
    transition:border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.form-control:focus, .form-select:focus {
    border-color:var(--atk-primary) !important;
}
.form-label, label.form-label {
    font-weight:600;
    font-size:0.8125rem;
    color:var(--atk-text-secondary);
    margin-bottom:0.4rem;
}
.input-group-text {
    border-radius:10px 0 0 10px !important;
    background:#f1f2f4 !important;
    border-color:#d8dce3 !important;
}
.input-group > .form-control {
    border-radius:0 10px 10px 0 !important;
}
.select2-container .select2-selection--single {
    height:42px !important;
    border:1px solid #d8dce3 !important;
    border-radius:10px !important;
}
.select2-container .select2-selection--single .select2-selection__rendered {
    line-height:40px !important;
    padding-left:12px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height:40px !important;
}
.sidenav {
    background:var(--atk-surface) !important;
    border-right:1px solid var(--atk-border) !important;
    box-shadow:none !important;
}
.sidenav .navbar-brand, .sidenav .brand-logo {
    font-weight:700;
    letter-spacing:-0.02em;
}
.sidenav .navbar-brand .text-primary {
    color:var(--atk-primary) !important;
}
.sidenav .nav-link {
    border-radius:var(--atk-radius-md) !important;
    padding:0.625rem 0.875rem !important;
    color:var(--atk-text-secondary) !important;
    font-weight:500 !important;
    font-size:0.875rem !important;
    transition:all 0.15s ease !important;
}
.sidenav .nav-link:hover {
    background:rgba(16, 20, 30, 0.04) !important;
    color:var(--atk-text) !important;
}
.sidenav .nav-link.active {
    background:var(--atk-primary-soft) !important;
    color:var(--atk-primary) !important;
    font-weight:600 !important;
}
.sidenav .nav-link.active .nav-link-text, .sidenav .nav-link.active svg path, .sidenav .nav-link.active i {
    color:var(--atk-primary) !important;
    fill:var(--atk-primary) !important;
    stroke:var(--atk-primary) !important;
}
.sidenav .nav-link .icon {
    background:transparent !important;
    box-shadow:none !important;
}
.sidenav .nav-item.mt-3 > span, .sidenav .navbar-vertical .navbar-nav > .nav-item.mt-3:first-child {
    font-size:0.6875rem !important;
    font-weight:700 !important;
    letter-spacing:0.06em !important;
    text-transform:uppercase !important;
    color:var(--atk-text-muted) !important;
}
.table {
    --bs-table-border-color:var(--atk-border);
    font-size:0.8125rem !important;
}
.table tbody td {
    vertical-align:middle !important;
}
.table-responsive {
    border-radius:var(--atk-radius-md);
}
/* ===== HALAMAN DAFTAR/TABEL (refinement 2026-10) — hanya tampilan =====
   Kartu daftar dikenali dari tabel ber-id "tabel-*" (barang, tanah, gedung, lokasi, ruang).
   Tujuan: bilah alat jelas, kepala tabel tegas, baris lega, angka rata kanan. */
.card:has([id^="tabel-"]) > .card-header {
    align-items:flex-start;
    padding:1.05rem 1.25rem .8rem;
    border-bottom:1px solid #eef1f6;
}
.card:has([id^="tabel-"]) > .card-header h6 {
    font-size:1.03rem;
    font-weight:700;
    letter-spacing:-.01em;
    color:var(--atk-text);
}
.card:has([id^="tabel-"]) > .card-header small {
    display:block;
    margin-top:.15rem;
    color:var(--atk-text-muted);
}
.card:has([id^="tabel-"]) > .card-header .btn { border-radius:10px; font-weight:600; }
.card:has([id^="tabel-"]) .row.px-3 label.form-label {
    font-size:.71rem;
    font-weight:700;
    letter-spacing:.03em;
    text-transform:uppercase;
    color:var(--atk-text-secondary);
}
[id^="tabel-"] { font-variant-numeric:tabular-nums; }
[id^="tabel-"] thead th {
    font-size:.71rem;
    font-weight:700;
    letter-spacing:.045em;
    text-transform:uppercase;
    color:var(--atk-text-secondary);
    border-bottom:1px solid #e4e8ef;
    padding:.7rem .85rem;
    white-space:nowrap;
}
[id^="tabel-"] tbody td {
    padding:.72rem .85rem;
    border-top:1px solid #f2f4f9;
}
[id^="tabel-"] tbody tr:hover > * { background:#f8fafc; }
[id^="tabel-"] thead th.text-end,
[id^="tabel-"] tbody td.text-end { text-align:right; }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border:1px solid var(--atk-border-strong);
    border-radius:10px;
    padding:.4rem .65rem;
    background:#fff;
}
.dataTables_wrapper .dataTables_filter input:focus {
    border-color:var(--atk-primary);
    box-shadow:var(--atk-shadow-focus);
    outline:none;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    color:var(--atk-text-secondary);
    font-size:.8rem;
}
.badge {
    font-size:0.6875rem !important;
}
.badge.bg-gradient-success {
    background:var(--atk-success-soft) !important;
    background-image:none !important;
    color:var(--atk-success) !important;
}
.badge.bg-gradient-danger {
    background:var(--atk-danger-soft) !important;
    background-image:none !important;
    color:var(--atk-danger) !important;
}
.badge.bg-gradient-warning {
    background:var(--atk-warning-soft) !important;
    background-image:none !important;
    color:var(--atk-warning) !important;
}
.badge.bg-gradient-info {
    background:var(--atk-info-soft) !important;
    background-image:none !important;
    color:var(--atk-info) !important;
}
.badge.bg-gradient-primary {
    background:var(--atk-primary-soft) !important;
    background-image:none !important;
    color:var(--atk-primary) !important;
}
.badge.bg-secondary, .badge.bg-gradient-secondary {
    background:#eef0f2 !important;
    background-image:none !important;
    color:var(--atk-text-secondary) !important;
}
.icon-shape {
    border-radius:var(--atk-radius-md) !important;
    box-shadow:none !important;
    border:1px solid var(--atk-border);
}
.avatar {
    border-radius:var(--atk-radius-md) !important;
}
.avatar.bg-gradient-info {
    background:var(--atk-info-soft) !important;
    background-image:none !important;
}
.avatar.bg-gradient-info i {
    color:#ffffff !important;
}
.dropdown-menu {
    box-shadow:var(--atk-shadow-pop) !important;
}
.dropdown-item {
    font-size:0.875rem !important;
    color:var(--atk-text) !important;
}
.dropdown-item:hover {
    background:var(--atk-primary-soft) !important;
    color:var(--atk-primary) !important;
}
.modal-content {
    border:1px solid var(--atk-border) !important;
    border-radius:var(--atk-radius-lg) !important;
    box-shadow:var(--atk-shadow-pop) !important;
}
.modal-header {
    border-bottom:1px solid var(--atk-border) !important;
}
.modal-footer {
    border-top:1px solid var(--atk-border) !important;
}
.alert {
    border-radius:var(--atk-radius-md) !important;
    border:1px solid transparent;
}
.page-item .page-link {
    border-radius:var(--atk-radius-sm) !important;
    margin:0 2px !important;
    color:var(--atk-text-secondary) !important;
    border:1px solid var(--atk-border) !important;
}
.page-item.active .page-link {
    background:var(--atk-primary) !important;
    border-color:var(--atk-primary) !important;
    color:#fff !important;
}
.navbar.bg-white {
    border-bottom:1px solid var(--atk-border) !important;
}
.nav-pills .nav-link.active {
    background:var(--atk-primary-soft) !important;
    color:var(--atk-primary) !important;
    font-weight:600;
}
::-webkit-scrollbar-track {
    background:transparent;
}
::-webkit-scrollbar-thumb:hover {
    background-color:#b9bdc5;
}
.bg-gradient-primary {
    background-image:none !important;
}
.bg-gradient-success {
    background-image:none !important;
}
.bg-gradient-danger {
    background-image:none !important;
}
.bg-gradient-warning {
    background-image:none !important;
}
.bg-gradient-info {
    background-image:none !important;
}
.card-header h6 {
    letter-spacing:-0.01em;
}
@media (max-width: 767.98px){
.card-body {
    padding:1.125rem !important;
}
.sidenav .nav-link {
    margin:2px 6px !important;
}
}
.text-primary {
    color:var(--atk-primary) !important;
}
.text-info {
    color:var(--atk-info) !important;
}
.text-success {
    color:var(--atk-success) !important;
}
.text-warning {
    color:var(--atk-warning) !important;
}
.text-danger {
    color:var(--atk-danger) !important;
}
.text-secondary {
    color:var(--atk-text-secondary) !important;
}
.text-muted {
    color:var(--atk-text-muted) !important;
}
.text-dark {
    color:var(--atk-text) !important;
}
.text-body {
    color:var(--atk-text) !important;
}
.text-white {
    color:#ffffff !important;
}
.bg-primary {
    background-color:var(--atk-primary) !important;
    color:#fff !important;
}
.bg-info {
    background-color:var(--atk-info) !important;
    color:#fff !important;
}
.bg-success {
    background-color:var(--atk-success) !important;
    color:#fff !important;
}
.bg-warning {
    background-color:var(--atk-warning) !important;
    color:#fff !important;
}
.bg-danger {
    background-color:var(--atk-danger) !important;
    color:#fff !important;
}
.bg-secondary {
    background-color:#eef0f2 !important;
    color:var(--atk-text-secondary) !important;
}
.bg-dark {
    background-color:#23272f !important;
}
.border-primary {
    border-color:var(--atk-primary) !important;
}
.border-info {
    border-color:var(--atk-info) !important;
}
.border-success {
    border-color:var(--atk-success) !important;
}
.border-warning {
    border-color:var(--atk-warning) !important;
}
.border-danger {
    border-color:var(--atk-danger) !important;
}
.bg-gradient-primary {
    background:linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
}
.bg-gradient-info {
    background:linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
}
.bg-gradient-success {
    background:linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
}
.bg-gradient-warning {
    background:linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
}
.bg-gradient-danger {
    background:linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
}
.bg-gradient-dark {
    background:linear-gradient(135deg, #374151 0%, #1f2937 100%) !important;
}
.bg-gradient-secondary {
    background:linear-gradient(135deg, #eef0f2 0%, #e2e5e9 100%) !important;
}
.btn.bg-gradient-primary, .btn.btn-primary {
    background:linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    background-image:linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    border:1px solid rgba(37, 99, 235, 0.6) !important;
    box-shadow:0 4px 12px rgba(37, 99, 235, 0.28), 0 1px 3px rgba(37, 99, 235, 0.2) !important;
}
.btn.bg-gradient-primary:hover, .btn.btn-primary:hover {
    background:linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    background-image:linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    box-shadow:0 6px 16px rgba(37, 99, 235, 0.35) !important;
}
.btn.bg-gradient-primary:active, .btn.btn-primary:active {
    box-shadow:0 2px 6px rgba(37, 99, 235, 0.3) !important;
}
body.login-page::before, body.login-page::after {
    content:"";
    position:fixed;
    border-radius:50%;
    filter:blur(90px);
    z-index:0;
    pointer-events:none;
}
body.login-page::before {
    width:420px;
    height:420px;
    background:radial-gradient(circle, rgba(37, 99, 235, 0.16), transparent 65%);
    top:-120px;
    left:-100px;
}
body.login-page::after {
    bottom:-140px;
    right:-120px;
}
.login-card {
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}
.login-brand {
    display:flex;
    align-items:center;
    gap:.75rem;
}
.login-brand img {
    height:40px;
    width:auto;
    object-fit:contain;
}
.login-card--split {
    max-width:1000px;
    overflow:hidden;
}
.login-card--split .card-body {
    padding:0 !important;
}
.login-card--split .form-control-lg {
    padding:0.875rem 1rem !important;
    font-size:0.9375rem !important;
}
.login-card--split .btn-lg {
    font-size:0.9375rem !important;
}
.login-side {
    color:#fff;
}
.login-side::before, .login-side::after {
    content:"";
    position:absolute;
    border-radius:50%;
    filter:blur(60px);
    pointer-events:none;
}
.login-side::before {
    width:300px;
    height:300px;
    background:rgba(255, 255, 255, 0.08);
    top:-80px;
    right:-80px;
}
.login-side::after {
    left:-70px;
}
.login-side > div {
    position:relative;
    z-index:1;
}
.login-side-check {
    flex-shrink:0;
}
@media (max-width: 991.98px){
.login-card--split {
    max-width:480px;
}
}
.dash-welcome {
    position:relative;
    overflow:hidden;
    border:none !important;
}
.dash-welcome::before, .dash-welcome::after {
    content:"";
    position:absolute;
    border-radius:50%;
    filter:blur(70px);
    pointer-events:none;
}
.dash-welcome::before {
    width:320px;
    height:320px;
    background:rgba(255, 255, 255, 0.09);
    top:-120px;
    right:8%;
}
.dash-welcome::after {
    width:280px;
    height:280px;
    background:rgba(37, 99, 235, 0.6);
    bottom:-130px;
    left:30%;
}
.dash-welcome .card-body {
    position:relative;
    z-index:1;
}
.dash-welcome-avatar {
    width:52px;
    height:52px;
    border-radius:16px;
    background:rgba(255, 255, 255, 0.16);
    border:1px solid rgba(255, 255, 255, 0.25);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:1.2rem;
    flex-shrink:0;
}
.dash-welcome .btn-white {
    background:#fff !important;
    border:none !important;
    color:#1e40af !important;
    font-weight:600 !important;
    box-shadow:0 4px 12px rgba(15, 23, 42, 0.25) !important;
}
.dash-welcome .btn-outline-light {
    border-color:rgba(255, 255, 255, 0.5) !important;
    color:#fff !important;
    font-weight:600 !important;
}
.dash-kpi {
    transition:transform 0.18s ease, box-shadow 0.18s ease;
}
.dash-kpi:hover {
    transform:translateY(-3px);
}
.dash-kpi-label {
    font-weight:700;
    text-transform:uppercase;
}
.dash-kpi-value {
    letter-spacing:-0.02em;
    color:var(--atk-text);
}
.dash-kpi-sub {
    color:var(--atk-text-muted);
    font-size:0.75rem;
}
.dash-kpi-icon {
    width:52px;
    height:52px;
    border-radius:14px !important;
}
.dash-kpi-icon i {
    font-size:1.15rem;
}
.dash-riwayat-icon {
    background:linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
    border:1px solid rgba(16, 20, 30, 0.06);
}
.dash-riwayat-icon i {
    color:var(--atk-warning) !important;
}
.card-header .icon-shape {
    flex-shrink:0;
}
.card-header .icon-shape i {
    font-size:0.9rem !important;
}
.timeline {
    padding-left:0;
}
.timeline::before {
    left:17px;
    background:rgba(16, 20, 30, 0.08);
}
.sidenav .sidenav-header {
    padding:1.1rem 1rem 0.9rem;
}
.sidenav .horizontal.dark {
    background-color:rgba(16, 20, 30, 0.07) !important;
    opacity:1 !important;
}
.sidenav .navbar-nav .nav-item > h6 {
    display:flex;
    align-items:center;
    gap:0.5rem;
    padding:0.75rem 1.5rem 0.35rem !important;
    margin:0 !important;
}
.sidenav .navbar-nav .nav-item > h6::after {
    content:"";
    flex:1;
    height:1px;
    background:rgba(16, 20, 30, 0.06);
}
.sidenav .nav-link {
    margin:2px 10px !important;
}
.sidenav .nav-link .icon {
    width:34px;
    height:34px;
}
.sidenav .nav-link.active {
    position:relative;
    box-shadow:0 6px 14px rgba(37, 99, 235, 0.14) !important;
}
.sidenav .nav-link.active::before {
    content:"";
    position:absolute;
    left:-10px;
    top:50%;
    transform:translateY(-50%);
    width:4px;
    height:60%;
    border-radius:0 4px 4px 0;
    background:var(--atk-primary);
}
.sidenav-footer {
    border-top:1px solid rgba(16, 20, 30, 0.06);
    padding-top:0.75rem;
    margin-top:auto;
}
.icon-shape {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
}
.icon-shape i, .icon-shape svg {
    position:static !important;
    top:auto !important;
    left:auto !important;
    opacity:1 !important;
}
.icon-shape.bg-gradient-primary i, .icon-shape.bg-gradient-success i, .icon-shape.bg-gradient-warning i, .icon-shape.bg-gradient-info i, .icon-shape.bg-gradient-danger i, .icon-shape.bg-gradient-dark i, .icon-shape.bg-gradient-secondary i {
    color:#ffffff !important;
}
.min-w-0 {
    min-width:0 !important;
}
.dash-kpi-value--money {
    letter-spacing:-0.015em !important;
}
.sidenav .navbar-brand {
    display:flex !important;
    align-items:center !important;
    white-space:nowrap;
    min-width:0;
}
.sidenav .nav-link .icon i {
    font-size:0.95rem;
    color:#3f4654;
    transition:color 0.15s ease;
}
.sidenav .nav-link .icon {
    border-radius:10px !important;
    transition:background 0.15s ease, box-shadow 0.15s ease;
}
.sidenav .nav-link:hover .icon i {
    color:var(--atk-primary);
}
.sidenav .nav-link.active .icon {
    background:var(--atk-primary-soft) !important;
    box-shadow:none !important;
}
.sidenav .nav-link.active .icon i {
    color:var(--atk-primary) !important;
}
.sidenav .nav-link-text {
    font-weight:600;
    font-size:0.875rem;
}
.modal-content, .dropdown-menu {
    box-shadow:0 4px 12px rgba(16, 20, 30, 0.05),
                0 24px 48px -16px rgba(37, 99, 235, 0.18) !important;
}
.table thead th {
    background:transparent !important;
    white-space:nowrap;
}
.table td, .table th {
    font-variant-numeric:tabular-nums;
}
.table > :not(caption) > * > * {
    border-bottom-color:#f0f2f6;
}
.table-hover tbody tr:hover {
    background-color:#f7f9fe !important;
}
.dash-kpi-value, .badge, .text-xs, .text-sm {
    font-variant-numeric:tabular-nums;
}
.btn {
    padding:0.55rem 1.05rem;
}
.btn-sm {
    padding:0.38rem 0.8rem;
}
.btn-lg {
    padding:0.75rem 1.4rem;
}
.btn:focus-visible {
    box-shadow:0 0 0 3px rgba(37, 99, 235, 0.18) !important;
    outline:none;
}
.dash-kpi {
    border-radius:16px !important;
}
.dash-kpi:hover {
    box-shadow:0 2px 4px rgba(16, 20, 30, 0.04),
                0 20px 36px -14px rgba(37, 99, 235, 0.16) !important;
}
.card-header h6, .card-header .h6 {
    font-weight:700 !important;
    font-size:0.95rem !important;
    letter-spacing:-0.01em;
}
.form-control::placeholder, .form-select::placeholder {
    color:#aab0bb;
}
a:not(.btn):not(.dropdown-item):not(.nav-link):not(.page-link):not(.app-nav-link) {
    color:#2563eb;
}
a:not(.btn):not(.dropdown-item):not(.nav-link):not(.page-link):not(.app-nav-link):hover {
    color:#1d4ed8;
}
body.login-page {
    background:#f6f8fd !important;
}
body.login-page::before {
    content:"";
    position:fixed;
    inset:0;
    background-image:radial-gradient(rgba(37, 99, 235, 0.11) 1px, transparent 1px);
    background-size:22px 22px;
    mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 70%);
    -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 70%);
    pointer-events:none;
    z-index:0;
}
body.login-page::after {
    content:"";
    position:fixed;
    width:620px;
    height:620px;
    top:-260px;
    left:50%;
    transform:translateX(-50%);
    background:radial-gradient(circle, rgba(37, 99, 235, 0.13), transparent 62%);
    pointer-events:none;
    z-index:0;
}
body.login-page .container {
    position:relative;
    z-index:1;
}
.login-card {
    background:#ffffff !important;
    border:1px solid #e8ebf2 !important;
    border-radius:22px !important;
    box-shadow:0 1px 2px rgba(16, 20, 30, 0.04),
                0 30px 60px -20px rgba(37, 99, 235, 0.22),
                0 8px 20px -12px rgba(16, 20, 30, 0.08) !important;
    overflow:hidden;
}
.login-title {
    font-weight:800 !important;
    letter-spacing:-0.02em;
    color:#10141e;
}
.login-sub {
    font-size:0.8125rem;
    color:#8a919c;
}
.login-heading {
    font-weight:800;
    letter-spacing:-0.03em;
    font-size:1.75rem;
    color:#0f172a;
}
.login-footnote {
    font-size:0.75rem;
    color:#9aa1ad;
}
.auth-field .input-group-text {
    background:#fff;
    border-color:#dfe3ec;
    color:#8a919c;
    border-radius:12px 0 0 12px;
    padding-left:1rem;
    padding-right:0.85rem;
}
.auth-field .form-control {
    border-color:#dfe3ec;
    border-radius:0 12px 12px 0;
    padding-top:0.7rem;
    padding-bottom:0.7rem;
}
.auth-field .form-control:focus {
    border-color:#2563eb;
    box-shadow:none;
    z-index:3;
}
.auth-field .input-group-text:has(+ .form-control:focus) {
    border-color:#2563eb;
}
.auth-field .btn-pw-toggle {
    border:1px solid #dfe3ec;
    border-left:0;
    border-radius:0 12px 12px 0;
    background:#fff;
    color:#8a919c;
    padding:0 1rem;
}
.auth-field .btn-pw-toggle:hover {
    color:#2563eb;
    background:#fff;
}
.login-btn {
    border-radius:12px !important;
    padding:0.8rem 1rem !important;
    font-weight:700 !important;
    font-size:0.95rem !important;
}
.login-side {
    background:linear-gradient(150deg, #2563eb 0%, #1e40af 58%, #172f8f 100%) !important;
    position:relative;
    overflow:hidden;
    padding:3rem 2.75rem;
    align-items:center;
}
.login-side::before {
    content:"";
    position:absolute;
    inset:0;
    background-image:radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px);
    background-size:26px 26px;
    opacity:0.5;
    pointer-events:none;
}
.login-side::after {
    content:"";
    position:absolute;
    width:380px;
    height:380px;
    right:-140px;
    bottom:-140px;
    background:radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 65%);
    pointer-events:none;
}
.login-side-inner {
    position:relative;
    z-index:1;
}
.login-side-name {
    font-weight:800;
    font-size:1.45rem;
    letter-spacing:-0.02em;
    color:#fff;
}
.login-side-headline {
    color:#fff;
    font-weight:700;
    font-size:1.9rem;
    line-height:1.22;
    letter-spacing:-0.035em;
}
.login-side-desc {
    color:rgba(255, 255, 255, 0.82);
    font-size:0.9375rem;
    line-height:1.6;
}
.login-side-item {
    display:flex;
    align-items:center;
    gap:0.75rem;
    margin-bottom:0.85rem;
    color:rgba(255, 255, 255, 0.95);
    font-size:0.875rem;
}
.login-side-check {
    width:26px;
    height:26px;
    flex:0 0 26px;
    border-radius:9px;
    background:rgba(255, 255, 255, 0.18);
    border:1px solid rgba(255, 255, 255, 0.28);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:0.7rem;
}
.login-side-foot {
    margin-top:2.25rem;
    padding-top:1.25rem;
    border-top:1px solid rgba(255, 255, 255, 0.22);
    color:rgba(255, 255, 255, 0.75);
    font-size:0.8125rem;
}
.login-footer-note {
    font-size:0.75rem;
    color:#9aa1ad;
}
.card-header h6 + small, .card-header .h6 + small {
    display:block;
    margin-top:0.15rem;
}
.card-header small.text-muted {
    font-size:0.75rem;
}
.app-nav-link {
    transition:background 0.16s ease, color 0.16s ease, padding-left 0.16s ease;
}
.dash-kpi-value {
    font-size:1.9rem !important;
    font-weight:800 !important;
}
.dash-kpi-value--money {
    font-size:1.35rem !important;
}
.dash-kpi-label {
    font-size:0.72rem !important;
    letter-spacing:0.06em;
    color:#8a919c !important;
}
.btn.bg-gradient-primary, .btn.bg-gradient-success, .btn.bg-gradient-info, .btn.bg-gradient-warning, .btn.bg-gradient-danger {
    box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.18),
                0 4px 12px rgba(37, 99, 235, 0.22) !important;
}
.dataTables_wrapper .dataTables_empty, .dataTables_empty {
    padding:2.25rem 1rem !important;
    text-align:center;
    color:#9aa1ad !important;
    font-size:0.875rem;
}
.dataTables_wrapper .dataTables_info {
    font-size:0.78rem;
    color:#9aa1ad;
    padding-top:1rem !important;
}
.dataTables_wrapper .dataTables_paginate {
    padding-top:0.75rem !important;
}
@keyframes maFadeUp{from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }}
.app-main-inner > .row, .app-main-inner > .card {
    animation:maFadeUp 0.35s ease both;
}
::selection {
    background:rgba(37, 99, 235, 0.16);
    color:#0f172a;
}
.badge {
    padding:0.42em 0.7em !important;
}
.table a:not(.btn) {
    font-weight:600;
}
.form-group {
    margin-bottom:1.15rem;
}
.form-group > label, .form-group > .form-label {
    display:block;
    font-weight:600;
    font-size:0.815rem;
    color:#3f4654;
    margin-bottom:0.4rem;
    letter-spacing:-0.005em;
}
.form-control, .form-select {
    min-height:44px;
    padding:0.6rem 0.9rem;
    font-size:0.9rem;
    color:#10141e;
    background-color:#fff;
    border:1px solid #e0e4ec;
    border-radius:11px !important;
    transition:border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.form-control:hover:not(:disabled):not(:focus), .form-select:hover:not(:disabled):not(:focus) {
    border-color:#c9d0dd;
}
.form-control:focus, .form-select:focus {
    border-color:#2563eb;
    background-color:#fff;
    box-shadow:0 0 0 3.5px rgba(37, 99, 235, 0.13) !important;
}
.form-control::placeholder {
    font-weight:400;
}
.form-control:disabled, .form-select:disabled, .form-control[readonly] {
    background:#f7f8fb;
    color:#8a919c;
    border-color:#e8ebf1;
}
textarea.form-control {
    min-height:96px;
    resize:vertical;
    line-height:1.6;
}
.form-select {
    padding-right:2.25rem;
    background-size:14px 11px;
}
.input-group > .form-control, .input-group > .form-select {
    border-radius:0 11px 11px 0 !important;
}
.input-group > .input-group-text {
    border:1px solid #e0e4ec;
    background:#fbfcfe;
    color:#8a919c;
    border-radius:11px 0 0 11px !important;
    padding:0 0.85rem;
}
.input-group > .input-group-text:has(+ .form-control:focus) {
    border-color:#2563eb;
    color:#2563eb;
}
.input-group > .btn {
    border-radius:0 11px 11px 0 !important;
}
.form-check-input {
    width:1.05em;
    height:1.05em;
    border-color:#cfd5e0;
    margin-top:0.16em;
}
.form-check-input:checked {
    background-color:#2563eb !important;
    border-color:#2563eb !important;
}
.form-switch .form-check-input {
    width:2.25em;
    height:1.15em;
}
.form-check-label {
    font-size:0.84rem;
    color:#3f4654;
}
.form-text {
    font-size:0.75rem;
    color:#9aa1ad;
}
.was-validated .form-control:invalid, .form-control.is-invalid {
    border-color:#dc2626 !important;
}
.form-control.is-invalid:focus {
    box-shadow:0 0 0 3.5px rgba(220, 38, 38, 0.12) !important;
}
.select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple {
    min-height:44px;
    border:1px solid #e0e4ec !important;
    border-radius:11px !important;
}
.select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color:#2563eb !important;
    box-shadow:0 0 0 3.5px rgba(37, 99, 235, 0.13);
}
.app-brand {
    gap:0.55rem;
}
.app-brand img {
    height:30px;
}
.app-brand-name {
    font-size:0.95rem;
}
.app-brand-sub {
    font-size:0.55rem;
}
.app-nav-wrap {
    padding:0.5rem 0 0.75rem;
}
.app-nav-section {
    font-size:0.585rem !important;
    letter-spacing:0.11em !important;
    padding:0.85rem 1.2rem 0.28rem !important;
}
.app-nav-link {
    font-size:0.8rem !important;
    padding:0.42rem 0.7rem !important;
    margin:1px 0.5rem !important;
    gap:0.6rem;
}
.app-nav-link .app-nav-icon {
    width:29px;
    height:29px;
    border-radius:9px;
    font-size:0.83rem !important;
}
.app-nav-link:hover {
    padding-left:0.8rem !important;
}
.app-sidebar-foot {
    padding:0.5rem;
}
.app-sidebar-foot .btn {
    font-size:0.79rem;
    padding:0.45rem 0.75rem;
}
.app-bottomnav {
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:1035;
    display:none;
    align-items:stretch;
    gap:0.15rem;
    padding:0.35rem 0.5rem calc(0.35rem + env(safe-area-inset-bottom));
    background:rgba(255, 255, 255, 0.94);
    backdrop-filter:blur(14px);
    border-top:1px solid #e8ebf2;
    box-shadow:0 -8px 28px -14px rgba(16, 20, 30, 0.22);
}
.app-bottomnav-item {
    flex:1 1 0;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    padding:0.45rem 0.2rem 0.4rem;
    border:0;
    background:transparent;
    border-radius:12px;
    color:#7a8290;
    font-size:0.635rem;
    font-weight:600;
    letter-spacing:-0.01em;
    position:relative;
    text-decoration:none;
    transition:color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}
.app-bottomnav-item i {
    font-size:1.02rem;
    line-height:1;
}
.app-bottomnav-item span {
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.app-bottomnav-item:active {
    transform:scale(0.95);
}
.app-bottomnav-item:hover {
    color:#2563eb;
}
.app-bottomnav-item.active {
    color:#1d4ed8;
    background:linear-gradient(180deg, #eff6ff 0%, #e7f0ff 100%);
}
.app-bottomnav-item.active::before {
    content:"";
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:26px;
    height:3px;
    border-radius:0 0 4px 4px;
    background:linear-gradient(90deg, #3b82f6, #1d4ed8);
}
@media (max-width: 1199.98px){
.app-bottomnav {
    display:flex;
}
.app-main-inner {
    padding-bottom:6rem;
}
.app-topbar button[data-sidebar-open] {
    display:none !important;
}
}
.table-responsive {
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
    max-width:100%;
}
.dataTables_wrapper {
    max-width:100%;
    overflow-x:auto;
}
.dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_length {
    max-width:100%;
}
.table td {
    white-space:normal;
}
.table td .btn {
    white-space:nowrap;
}
.table td .d-inline-flex, .table td .btn-group, td .aksi-buttons {
    display:inline-flex !important;
    flex-wrap:wrap !important;
    gap:0.3rem !important;
    max-width:100%;
}
.card-body:has(> .table-responsive) {
    overflow:hidden;
}
.card-body > .table-responsive {
    border-radius:0 0 16px 16px;
}
@media (max-width: 767.98px){
.table thead th {
    padding:0.55rem 0.5rem !important;
    font-size:0.58rem !important;
    letter-spacing:0.05em;
}
.table tbody td {
    padding:0.55rem 0.5rem !important;
    font-size:0.79rem;
}
.table .btn {
    padding:0.3rem 0.5rem !important;
    font-size:0.7rem !important;
    border-radius:7px !important;
    min-height:30px;
}
.table .btn i {
    font-size:0.72rem !important;
    margin-right:0 !important;
}
.table .badge {
    font-size:0.62rem !important;
    padding:0.3em 0.5em !important;
}
.table td .d-inline-flex, .table td .btn-group {
    flex-wrap:wrap !important;
    gap:0.28rem !important;
}
.table td .btn:not(:last-child) {
    margin-right:0 !important;
}
.dataTables_wrapper .row:first-child > div {
    flex:0 0 100%;
    max-width:100%;
}
.dataTables_wrapper .dataTables_filter {
    text-align:left !important;
    margin:0 0 0.5rem;
}
.dataTables_wrapper .dataTables_filter input {
    width:100%;
    margin-left:0 !important;
}
.dataTables_wrapper .dataTables_length {
    margin-bottom:0.5rem;
}
.dataTables_wrapper .dataTables_info {
    text-align:left !important;
}
.dataTables_wrapper .dataTables_paginate {
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start !important;
    gap:0.15rem;
}
.card-header .btn {
    font-size:0.76rem !important;
    padding:0.38rem 0.7rem !important;
}
.card-header .d-flex.flex-wrap {
    gap:0.4rem !important;
}
.card-header h6, .card-header .h6 {
    font-size:0.88rem !important;
}
}
@media (max-width: 575.98px){
.card-header .d-flex.flex-wrap > .btn {
    flex:1 1 46%;
}
.card-body .btn.w-100 {
    width:100% !important;
}
}
.card-header .d-flex {
    flex-wrap:wrap !important;
    gap:0.4rem !important;
    max-width:100%;
    min-width:0;
}
.card-header {
    overflow:visible !important;
}
.card-header .d-flex > .btn, .card-header .d-flex > a.btn {
    margin-right:0 !important;
    margin-bottom:0 !important;
}
@media (max-width: 991.98px){
.card-header {
    flex-direction:column;
    align-items:flex-start !important;
    gap:0.6rem;
}
.card-header > h6, .card-header > .h6, .card-header > h5 {
    margin-bottom:0 !important;
}
.card-header .d-flex {
    width:100%;
    flex-wrap:wrap !important;
}
.card-header .d-flex > .btn {
    flex:1 1 calc(50% - 0.4rem);
}
.card-header .d-flex > .btn:only-child {
    flex:0 1 auto;
}
}
body {
    background:#f7f8fc !important;
    letter-spacing:-0.006em;
    font-feature-settings:"cv11", "ss01";
}
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
    letter-spacing:-0.02em;
    font-weight:700;
}
h6, .h6 {
    font-weight:650;
    letter-spacing:-0.012em;
}
:root {
    --ma-sidebar-w:252px;
}
.app-sidebar {
    top:12px;
    bottom:12px;
    left:12px;
    width:var(--ma-sidebar-w);
    border:1px solid rgba(16, 20, 30, 0.05) !important;
    border-radius:20px;
    box-shadow:0 1px 2px rgba(16, 20, 30, 0.04),
                0 12px 32px -12px rgba(16, 20, 30, 0.14);
    overflow:hidden;
}
.app-main {
    margin-left:0;
}
@media (min-width: 1200px){
.app-main {
    margin-left:calc(var(--ma-sidebar-w) + 24px);
}
}
.app-brand {
    padding:1.05rem 1.15rem 0.95rem;
    border-bottom:1px solid #f1f3f8;
}
.app-nav-link {
    border-radius:11px;
}
.app-nav-link.active {
    background:#eef4ff !important;
    box-shadow:none !important;
}
.app-nav-link.active::before {
    display:none;
}
.app-nav-icon {
    background:transparent !important;
    border-color:transparent !important;
}
.app-nav-link:not(.active):hover .app-nav-icon {
    background:#f4f6fb !important;
}
.app-nav-link.active .app-nav-icon {
    background:#fff !important;
    box-shadow:0 2px 6px rgba(37, 99, 235, 0.16) !important;
}
.app-bottomnav {
    border-radius:0;
}
.app-topbar {
    background:rgba(247, 248, 252, 0.82) !important;
    border-bottom:0 !important;
    box-shadow:none !important;
    padding:0.85rem 1.75rem 0.55rem;
}
.app-topbar-title {
    font-size:1.06rem !important;
    font-weight:700;
}
.app-topbar-sub {
    font-size:0.74rem;
    color:#98a0ad;
}
.app-icon-btn {
    border:1px solid #e9ecf3;
    background:#fff;
    box-shadow:0 1px 2px rgba(16, 20, 30, 0.03);
}
.card {
    border:0 !important;
    border-radius:18px !important;
    box-shadow:0 1px 2px rgba(16, 20, 30, 0.035),
                0 10px 30px -14px rgba(16, 20, 30, 0.12) !important;
}
.card-header {
    border-bottom:1px solid #f2f4f9 !important;
    padding:1.15rem 1.4rem 1rem !important;
}
.card-body {
    padding:1.4rem;
}
.dash-kpi {
    border:0 !important;
    background:#fff !important;
}
.btn {
    border-radius:10px !important;
    font-weight:600 !important;
    letter-spacing:-0.005em;
    transition:background 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease, border-color 0.15s ease;
}
.btn:active {
    transform:translateY(0.5px);
}
.btn.bg-gradient-primary, .btn.btn-primary, .btn-primary {
    background:#2563eb !important;
    background-image:none !important;
    border:0 !important;
    color:#fff !important;
    box-shadow:0 1px 2px rgba(16, 20, 30, 0.06), 0 5px 14px -6px rgba(37, 99, 235, 0.5) !important;
}
.btn.bg-gradient-primary:hover, .btn.btn-primary:hover, .btn-primary:hover {
    background:#1d4ed8 !important;
    box-shadow:0 2px 4px rgba(16, 20, 30, 0.08), 0 8px 20px -6px rgba(37, 99, 235, 0.55) !important;
}
.btn.bg-gradient-success {
    background:#16a34a !important;
    background-image:none !important;
    border:0 !important;
    box-shadow:0 4px 12px -6px rgba(22, 163, 74, 0.5) !important;
}
.btn.bg-gradient-info {
    background:#0891b2 !important;
    background-image:none !important;
    border:0 !important;
    box-shadow:0 4px 12px -6px rgba(8, 145, 178, 0.5) !important;
}
.btn.bg-gradient-warning {
    background:#d97706 !important;
    background-image:none !important;
    border:0 !important;
    box-shadow:0 4px 12px -6px rgba(217, 119, 6, 0.5) !important;
}
.btn.bg-gradient-danger {
    background:#dc2626 !important;
    background-image:none !important;
    border:0 !important;
    box-shadow:0 4px 12px -6px rgba(220, 38, 38, 0.5) !important;
}
.btn.bg-gradient-dark {
    background:#1f2937 !important;
    background-image:none !important;
    border:0 !important;
}
.btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-info {
    border-width:1px !important;
    background:#fff !important;
}
.auth-field .form-control, .auth-field .input-group-text {
    background:#fff !important;
}
.table thead th {
    text-transform:none !important;
    font-size:0.72rem !important;
    font-weight:600 !important;
    letter-spacing:0 !important;
    color:#8b93a1 !important;
    border-bottom:1px solid #f0f2f7 !important;
    padding:0.75rem 1rem !important;
}
.table tbody td {
    padding:0.95rem 1rem !important;
    border-bottom:1px solid #f4f6fa !important;
    color:#202634;
}
.table tbody tr:hover {
    background:#fafbff !important;
}
.table tbody tr:last-child td {
    border-bottom:0 !important;
}
.table tbody tr {
    transition:background 0.12s ease;
}
.dataTables_wrapper .dataTables_filter input {
    background:#f1f4fa !important;
    border:1px solid #e1e7f1 !important;
    border-radius:10px !important;
    padding:0.5rem 0.9rem !important;
    min-width:220px;
}
.dataTables_wrapper .dataTables_filter input:focus {
    background:#fff !important;
    border-color:#2563eb !important;
    box-shadow:0 0 0 3.5px rgba(37, 99, 235, 0.14) !important;
}
.dataTables_wrapper .dataTables_length select {
    background:#f1f4fa !important;
    border:1px solid #e1e7f1 !important;
    border-radius:10px !important;
    padding:0.4rem 1.9rem 0.4rem 0.7rem !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border:1px solid #eceff5 !important;
    border-radius:9px !important;
    background:#fff !important;
    color:#5f6672 !important;
    font-weight:600;
    margin:0 2px !important;
    padding:0.34rem 0.7rem !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background:#f4f6fb !important;
    color:#2563eb !important;
    border-color:#dbe4f7 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background:#2563eb !important;
    border-color:#2563eb !important;
    color:#fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    opacity:0.45;
    color:#b6bcc7 !important;
    background:#fff !important;
}
.badge {
    border-radius:7px !important;
    font-weight:600 !important;
}
.dropdown-menu {
    border:1px solid #eef1f7 !important;
    border-radius:14px !important;
    padding:0.45rem !important;
}
.dropdown-item {
    border-radius:9px !important;
    padding:0.55rem 0.75rem !important;
    font-weight:500;
}
.list-group-item {
    border-color:#f4f6fa !important;
}
::-webkit-scrollbar {
    width:10px;
    height:10px;
}
::-webkit-scrollbar-thumb {
    background:#d7dce5;
    border:3px solid transparent;
    background-clip:content-box;
    border-radius:10px;
}
::-webkit-scrollbar-thumb:hover {
    background:#b9c0cd;
    background-clip:content-box;
}
@media (max-width: 1199.98px){
.app-sidebar {
    transform:translateX(calc(-100% - 20px)) !important;
    box-shadow:none !important;
    visibility:hidden;
    transition:transform 0.22s ease, visibility 0s linear 0.22s !important;
}
.app-sidebar.show {
    transform:translateX(0) !important;
    box-shadow:0 18px 48px -18px rgba(16, 20, 30, 0.35) !important;
    visibility:visible;
    transition:transform 0.22s ease, visibility 0s !important;
}
body:has(.app-sidebar.show) {
    overflow:hidden;
}
}
.stat-mini {
    cursor:pointer;
    border:0 !important;
    border-radius:16px !important;
    box-shadow:0 1px 2px rgba(16, 20, 30, 0.035), 0 10px 26px -16px rgba(16, 20, 30, 0.16) !important;
    transition:transform 0.16s ease, box-shadow 0.16s ease;
}
.stat-mini .card-body {
    padding:1rem 1.1rem;
}
.stat-mini:hover {
    transform:translateY(-2px);
    box-shadow:0 2px 6px rgba(16, 20, 30, 0.05), 0 18px 34px -16px rgba(37, 99, 235, 0.24) !important;
}
.stat-icon {
    width:46px;
    height:46px;
    flex:0 0 46px;
    border-radius:14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:1.05rem;
}
.stat-icon--warning {
    background:#fff6e5;
    color:#b45309;
}
.stat-icon--info {
    background:#e5f7fb;
    color:#0e7490;
}
.stat-icon--success {
    background:#e7f8ee;
    color:#15803d;
}
.stat-icon--danger {
    background:#fdeeee;
    color:#b91c1c;
}
.stat-label {
    font-size:0.7rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.07em;
    color:#9aa1ad;
}
.stat-value {
    font-size:1.65rem;
    font-weight:800;
    letter-spacing:-0.03em;
    color:#10141e;
    font-variant-numeric:tabular-nums;
}
.app-tabs {
    display:inline-flex;
    flex-wrap:wrap;
    gap:0.3rem;
    padding:0.35rem;
    background:#fff;
    border-radius:14px;
    box-shadow:0 1px 2px rgba(16, 20, 30, 0.04), 0 8px 20px -14px rgba(16, 20, 30, 0.16);
}
.app-tabs .nav-link {
    border-radius:10px;
    font-weight:600;
    font-size:0.83rem;
    color:#5f6672;
    padding:0.5rem 0.85rem;
    display:inline-flex;
    align-items:center;
    gap:0.35rem;
    border:0;
    background:transparent;
}
.app-tabs .nav-link:hover {
    background:#f4f6fb;
    color:#2563eb;
}
.app-tabs .nav-link.active {
    background:#2563eb;
    color:#fff;
    box-shadow:0 4px 12px -4px rgba(37, 99, 235, 0.5);
}
.tab-count {
    background:#eef2f8;
    color:#5f6672;
    border-radius:999px;
    padding:0.05rem 0.45rem;
    font-size:0.7rem;
    font-weight:700;
    font-variant-numeric:tabular-nums;
}
.app-tabs .nav-link.active .tab-count {
    background:rgba(255, 255, 255, 0.24);
    color:#fff;
}
.avatar-initials {
    width:38px;
    height:38px;
    flex:0 0 38px;
    border-radius:12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:0.78rem;
    letter-spacing:0.02em;
    background:#eff4ff;
    color:#1d4ed8;
}
.avatar-initials--info {
    background:#e5f7fb;
    color:#0e7490;
}
.avatar-initials--success {
    background:#e7f8ee;
    color:#15803d;
}
.avatar-initials--danger {
    background:#fdeeee;
    color:#b91c1c;
}
.item-chip {
    display:inline-flex;
    align-items:center;
    gap:0.3rem;
    background:#f5f7fb;
    border:1px solid #eaeef6;
    border-radius:999px;
    padding:0.18rem 0.55rem;
    font-size:0.73rem;
    color:#3f4654;
    white-space:nowrap;
}
.item-chip i {
    font-size:0.62rem;
    color:#98a0ad;
}
.item-qty {
    font-weight:700;
    color:#1d4ed8;
    font-size:0.7rem;
}
.empty-state {
    text-align:center;
    padding:2.5rem 1rem;
    color:#9aa1ad;
}
.empty-state i {
    font-size:1.85rem;
    opacity:0.5;
    display:block;
    margin-bottom:0.6rem;
}
.empty-state p {
    font-size:0.85rem;
}
#tabel-peminjaman tbody tr.selected-row {
    background:#eff4ff !important;
}
#tabel-peminjaman .input-jumlah {
    min-height:34px;
    padding:0.25rem 0.4rem;
    font-size:0.82rem;
    text-align:center;
}
.card-header h6 + small.text-muted, .card-header .h6 + small.text-muted, .card-header h5 + small.text-muted {
    display:block;
    margin-top:0.15rem;
    font-size:0.76rem;
    color:#98a0ad !important;
    font-weight:400;
    letter-spacing:0;
}
.card-header {
    gap:0.6rem;
}
.card-header > div:first-child {
    min-width:0;
}
.table thead th {
    opacity:1 !important;
}
.table thead th.text-secondary, .table thead th .text-secondary {
    color:#8b93a1 !important;
}
.table thead th.text-uppercase {
    text-transform:none !important;
}
.row-selected, #tabel-barang tbody tr.row-selected {
    background:#eff4ff !important;
}
.table tbody tr.selected-row {
    background:#eff4ff !important;
}
.badge-soft-primary {
    background:#eaf1ff;
    color:#1d4ed8;
    border:1px solid #c9d9f7;
}
.badge-soft-success {
    background:#e7f8ee;
    color:#15803d;
    border:1px solid #bfe8cd;
}
.badge-soft-warning {
    background:#fff6e5;
    color:#b45309;
    border:1px solid #f9dd9c;
}
.badge-soft-danger {
    background:#fdeeee;
    color:#b91c1c;
    border:1px solid #f6c8c8;
}
.badge-soft-info {
    background:#e5f7fb;
    color:#0e7490;
    border:1px solid #b3e5ef;
}
.badge-soft-primary, .badge-soft-success, .badge-soft-warning, .badge-soft-danger, .badge-soft-info {
    font-weight:600;
    border-radius:7px;
    padding:0.42em 0.7em;
}
.app-avatar-btn {
    width:38px;
    height:38px;
    flex:0 0 38px;
    border-radius:12px;
    overflow:hidden;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg, #2563eb, #60a5fa);
    color:#fff;
    font-weight:700;
    font-size:0.8rem;
    letter-spacing:0.01em;
    text-decoration:none;
    box-shadow:0 8px 18px -12px rgba(37, 99, 235, 0.95);
    transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.app-avatar-btn:hover {
    transform:translateY(-1px);
    box-shadow:0 12px 24px -14px rgba(37, 99, 235, 1);
}
.app-avatar-btn img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.modal-backdrop.show {
    opacity:1;
    background:rgba(15, 23, 42, 0.46);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
}
.modal-content {
    position:relative;
    border:1px solid #edf0f5;
    border-radius:18px;
    box-shadow:0 1px 2px rgba(16, 20, 30, 0.04),
                0 18px 40px -20px rgba(16, 20, 30, 0.28),
                0 48px 90px -50px rgba(16, 20, 30, 0.45);
    overflow:hidden;
    font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.modal-content::before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:3px;
    background:linear-gradient(90deg, #2563eb, #60a5fa);
    z-index:2;
}
.modal-header {
    background:#fafbfe;
    border-bottom:1px solid #eef2f7;
    align-items:center;
    gap:0.65rem;
}
.modal-header .modal-title {
    font-size:0.98rem;
    font-weight:700;
    letter-spacing:-0.015em;
    color:#0f172a;
    line-height:1.35;
}
.modal-body {
    background:#ffffff;
    padding:1.3rem;
    max-height:66vh;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:#d7dde8 transparent;
}
.modal-body::-webkit-scrollbar {
    width:8px;
}
.modal-body::-webkit-scrollbar-thumb {
    background:#dbe1ea;
    border-radius:999px;
    border:2px solid #fff;
}
.modal-body > h6, .modal-body .modal-section {
    font-size:0.82rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.06em;
    color:#8a919c;
    margin:1.1rem 0 0.6rem;
    padding-top:1rem;
    border-top:1px solid #f1f4f9;
}
.modal-body > h6:first-child, .modal-body .modal-section:first-child {
    margin-top:0;
    padding-top:0;
    border-top:0;
}
.modal-body hr {
    border-color:#f1f4f9;
    opacity:1;
    margin:1.1rem 0;
}
.modal-body .text-muted, .modal-body small.text-muted {
    font-size:0.79rem;
    color:#8a919c !important;
}
.modal-footer {
    background:#fafbfe;
    border-top:1px solid #eef2f7;
    padding:0.95rem 1.3rem;
    gap:0.5rem;
    justify-content:flex-end;
}
.modal-footer > * {
    margin:0;
}
.form-control, .form-select, textarea.form-control {
    background-color:#f1f4fa;
    border:1px solid #e1e7f1;
    color:#0f172a;
    border-radius:10px;
    transition:background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control::placeholder {
    color:#a9b1be;
}
.form-control:hover:not(:focus):not(:disabled), .form-select:hover:not(:focus):not(:disabled) {
    background-color:#eaeff7;
    border-color:#cdd7e6;
}
.form-control:focus, .form-select:focus, textarea.form-control:focus {
    background-color:#ffffff;
    border-color:#2563eb;
    box-shadow:0 0 0 3.5px rgba(37, 99, 235, 0.14);
}
.form-control:disabled, .form-control[readonly], .form-select:disabled {
    background-color:#eef1f6;
    border-color:#e6eaf2;
    color:#8a919c;
}
.form-select {
    background-position:right 0.75rem center;
}
.input-group-text {
    background:#eaeff7;
    border:1px solid #e1e7f1;
    color:#5f6672;
    font-size:0.86rem;
}
.form-control[type="file"] {
    padding:0.45rem 0.6rem;
}
.form-control[type="file"]::file-selector-button {
    border:0;
    border-radius:8px;
    background:#e8eefc;
    color:#1d4ed8;
    font-weight:600;
    font-size:0.82rem;
    padding:0.35rem 0.75rem;
    margin-right:0.7rem;
    cursor:pointer;
    transition:background 0.15s ease;
}
.form-control[type="file"]::file-selector-button:hover {
    background:#dbe6fb;
}
.select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple {
    background-color:#f1f4fa;
    border:1px solid #e1e7f1;
    transition:background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default.select2-container--open .select2-selection--single {
    background-color:#ffffff;
    border-color:#2563eb;
    box-shadow:0 0 0 3.5px rgba(37, 99, 235, 0.14);
}
.input-group > .form-control:not(:first-child):not(:last-child) {
    border-radius:0;
}
.input-group > .form-control:first-child:not(:last-child) {
    border-radius:10px 0 0 10px;
}
.input-group > .form-control:last-child:not(:first-child) {
    border-radius:0 10px 10px 0;
}
.modal-body .form-check-input {
    border-color:#ced6e3;
    background-color:#f1f4fa;
    width:1.05em;
    height:1.05em;
    margin-top:0.2em;
}
.modal-body .form-check-input:checked {
    background-color:#2563eb;
    border-color:#2563eb;
}
.modal-body .form-check-label {
    font-size:0.86rem;
    color:#3f4654;
}
.modal-dialog {
    margin:1.25rem auto;
}
.modal-lg, .modal-xl {
    max-width:760px;
}
@media (max-width: 575.98px){
.modal-dialog {
    margin:0.65rem;
}
.modal-content {
    border-radius:16px;
}
.modal-header {
    padding:0.95rem 1rem 0.85rem;
}
.modal-body {
    padding:1.05rem;
    max-height:70vh;
}
.modal-footer {
    padding:0.85rem 1rem;
    flex-direction:column-reverse;
}
.modal-footer .btn {
    width:100%;
}
}
.modal-header .btn-close {
    width:34px;
    height:34px;
    flex:0 0 34px;
    padding:0;
    margin:0 0 0 auto;
    border:1px solid #e6eaf2;
    border-radius:10px;
    background-color:#f3f5fa;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6672' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
    background-size:14px 14px;
    background-position:center;
    background-repeat:no-repeat;
    opacity:1;
    box-shadow:none;
    transition:background-color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.modal-header .btn-close:hover, .modal-header .btn-close:focus {
    background-color:#e7ecf5;
    border-color:#d5dce8;
    opacity:1;
}
.modal-header .btn-close:hover {
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b91c1c' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}
.modal-header .btn-close:active {
    transform:scale(0.95);
}
.modal-header .btn-close:focus-visible {
    outline:none;
    box-shadow:0 0 0 3px rgba(37, 99, 235, 0.18);
}
.modal-header .modal-title {
    display:flex;
    align-items:center;
    gap:0.6rem;
    padding-right:0.5rem;
}
.modal-header .modal-title::before {
    content:"";
    flex:0 0 auto;
    width:4px;
    height:17px;
    border-radius:3px;
    background:linear-gradient(180deg, #2563eb, #60a5fa);
}
.modal-header {
    padding:1.05rem 1.15rem 1rem 1.3rem;
}
.modal-header + .modal-body {
    border-top:0;
}
.modal-footer .btn {
    min-width:96px;
    justify-content:center;
}
.modal-dialog-centered {
    min-height:calc(100% - 2.5rem);
}
.app-topbar .btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:0.45rem;
    line-height:1;
}
.app-topbar .btn > i {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1;
    font-size:0.95rem;
}
.app-user-btn {
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    background:#fff;
    border:1px solid #e6ebf4;
    border-radius:999px;
    padding:0.22rem 0.6rem 0.22rem 0.25rem;
    transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.app-user-btn:hover {
    border-color:#cfdcf3;
    background:#fbfdff;
}
.app-user-btn:focus-visible {
    outline:2px solid #2563eb;
    outline-offset:2px;
}
.app-user-avatar {
    width:32px;
    height:32px;
    flex:0 0 32px;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg, #2563eb, #5b8def);
    color:#fff;
    font-weight:700;
    font-size:0.76rem;
    letter-spacing:0.02em;
}
.app-user-avatar--lg {
    width:42px;
    height:42px;
    flex:0 0 42px;
    font-size:0.95rem;
}
.app-user-nama {
    font-size:0.82rem;
    font-weight:600;
    color:#0f172a;
    max-width:150px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.app-user-caret {
    font-size:0.68rem;
    color:#94a3b8;
}
.app-user-menu {
    min-width:250px;
    border-radius:14px;
    padding:0.4rem;
    border:1px solid #eef2f7;
    box-shadow:0 18px 45px -22px rgba(15, 23, 42, 0.35);
}
.app-user-menu-head {
    display:flex;
    align-items:center;
    gap:0.7rem;
    padding:0.6rem 0.65rem;
}
.app-user-menu .dropdown-divider {
    margin:0.35rem 0.25rem;
}
.app-user-item {
    display:flex;
    align-items:center;
    gap:0.6rem;
    border-radius:10px;
    font-size:0.85rem;
    font-weight:500;
    padding:0.55rem 0.7rem;
}
.app-user-item i {
    width:16px;
    text-align:center;
    color:#64748b;
    font-size:0.85rem;
}
.app-user-item:hover {
    background:#f4f7fe;
}
.app-user-item:hover i {
    color:#2563eb;
}
.app-user-item--danger, .app-user-item--danger i {
    color:#dc2626;
}
.app-user-item--danger:hover {
    background:#fef2f2;
}
@media (max-width: 575.98px){
.app-user-btn {
    padding:0.22rem;
}
.app-user-caret {
    display:none;
}
}
.app-topbar .btn:hover, .app-topbar .btn:focus, .app-topbar .btn:active, .app-topbar .app-user-btn:hover, .app-topbar .app-user-btn:focus {
    transform:none !important;
    box-shadow:none !important;
}
.app-topbar .app-user-btn:hover {
    border-color:#cfdcf3;
    background:#fbfdff;
}
.app-topbar .app-icon-btn {
    transition:background-color .16s ease, border-color .16s ease, color .16s ease;
}
.app-topbar-right > .btn {
    margin-right:0.35rem;
}
.app-topbar .app-icon-btn {
    width:auto;
    min-width:40px;
    height:34px;
    padding:0 0.6rem;
    border-radius:8px !important;
    border:1px solid #2563eb !important;
    background:#fff !important;
    color:#2563eb !important;
    font-size:0.8125rem;
    box-shadow:none !important;
}
.app-topbar .app-icon-btn:hover, .app-topbar .app-icon-btn:focus-visible {
    background:#2563eb !important;
    border-color:#2563eb !important;
    color:#fff !important;
}
.app-topbar .app-icon-btn:hover i, .app-topbar .app-icon-btn:focus-visible i {
    color:#fff !important;
}
.app-topbar .app-icon-btn:active {
    background:#1d4ed8 !important;
    border-color:#1d4ed8 !important;
    color:#fff !important;
}
.app-topbar-right {
    gap:0.5rem;
}
.app-topbar-right > .dropdown:last-child {
    margin-left:-0.1rem;
}
.app-topbar-right > .app-user-btn, .app-topbar-right > .dropdown > .app-user-btn {
    margin-left:0;
}
#notif-dropdown .notif-item {
    position:relative;
    padding-left:1.75rem;
}
#notif-dropdown .notif-dot {
    position:absolute;
    left:0.85rem;
    top:1.1rem;
    width:9px;
    height:9px;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    border-radius:50%;
    background:#dc2626;
}
#notif-dropdown .notif-item.notif-terbaca {
    opacity:0.82;
}
#notif-dropdown .notif-item.notif-terbaca .notif-dot {
    display:none;
}
#notif-dropdown .notif-status {
    color:#94a3b8;
}
#notif-dropdown .notif-status-teks {
    color:#94a3b8;
}
.app-icon-btn .notif-badge {
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    background:#dc2626 !important;
    color:#fff !important;
    border-radius:999px !important;
    min-width:17px;
    height:17px;
    padding:0 5px;
    font-size:0.6rem;
    font-weight:700;
    line-height:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.dash-welcome {
    background:#2563eb !important;
    background-image:none !important;
    box-shadow:0 12px 30px -12px rgba(30, 64, 175, 0.45) !important;
}
.dash-welcome::before, .dash-welcome::after {
    display:none !important;
}
.dash-total {
    background:#ffffff !important;
    border:1px solid #e9ecf2 !important;
    border-left:4px solid var(--atk-primary) !important;
    border-radius:16px !important;
}
.dash-total-label {
    font-size:0.72rem !important;
    font-weight:700 !important;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:#8a919c !important;
    margin-bottom:0.35rem;
}
.dash-total-value {
    font-size:2.35rem;
    font-weight:800;
    line-height:1.05;
    letter-spacing:-0.03em;
    color:#10141e;
    font-variant-numeric:tabular-nums;
}
.dash-total-note {
    font-size:0.8125rem;
    color:var(--atk-text-muted);
}
.dash-total-bd {
    display:flex;
    flex-wrap:wrap;
    gap:0.5rem;
    margin-top:1.05rem;
    padding-top:0.95rem;
    border-top:1px solid #eef1f6;
}
.dash-bd {
    display:inline-flex;
    align-items:center;
    gap:0.55rem;
    padding:0.4rem 0.8rem 0.4rem 0.5rem;
    background:#f7f9fc;
    border:1px solid #e9ecf2;
    border-radius:10px;
}
.dash-bd-ico {
    width:28px;
    height:28px;
    border-radius:8px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:0.72rem;
    flex-shrink:0;
}
.dash-bd-txt {
    display:flex;
    flex-direction:column;
    line-height:1.15;
}
.dash-bd-label {
    font-size:0.68rem;
    font-weight:600;
    color:#8a919c;
}
.dash-bd-value {
    font-size:0.85rem;
    font-weight:700;
    color:#10141e;
    font-variant-numeric:tabular-nums;
}
.dash-chip {
    display:inline-flex;
    align-items:center;
    gap:0.35rem;
    padding:0.3rem 0.65rem;
    border-radius:999px;
    font-size:0.72rem;
    font-weight:600;
    background:#f1f5f9;
    color:#475569;
    border:1px solid #e2e8f0;
    white-space:nowrap;
}
.dash-chip--up {
    background:#ecfdf5;
    color:#15803d;
    border-color:#c9ecda;
}
.dash-chip--down {
    background:#fef2f2;
    color:#b91c1c;
    border-color:#f3cfcf;
}
.kico--blue {
    background:#eff6ff !important;
    color:#2563eb !important;
}
.kico--green {
    background:#ecfdf5 !important;
    color:#059669 !important;
}
.kico--cyan {
    background:#ecfeff !important;
    color:#0891b2 !important;
}
.kico--amber {
    background:#fffbeb !important;
    color:#d97706 !important;
}
.kico--slate {
    background:#f1f5f9 !important;
    color:#475569 !important;
}
.icon-shape.kico--blue i {
    color:#2563eb !important;
}
.icon-shape.kico--green i {
    color:#059669 !important;
}
.icon-shape.kico--cyan i {
    color:#0891b2 !important;
}
.icon-shape.kico--amber i {
    color:#d97706 !important;
}
.icon-shape.kico--slate i {
    color:#475569 !important;
}
.dash-kpi-icon.kico--blue, .dash-kpi-icon.kico--green, .dash-kpi-icon.kico--cyan, .dash-kpi-icon.kico--amber, .dash-kpi-icon.kico--slate {
    background-image:none !important;
}
.dash-kpi-grid .dash-kpi .card-body {
    padding:1.15rem 1.2rem;
}
.dash-kpi-icon--sm {
    width:38px !important;
    height:38px !important;
    border-radius:11px !important;
}
.dash-kpi-icon--sm i {
    font-size:0.95rem !important;
}
.dash-kpi-grid .dash-kpi-label {
    line-height:1.15;
}
.dash-kpi-value {
    font-variant-numeric:tabular-nums;
}
.dash-kpi-value--money-sm {
    font-size:1.1rem !important;
    letter-spacing:-0.01em !important;
}
@media (max-width: 575.98px){
.dash-total-value {
    font-size:1.7rem;
}
}
.dh {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:.75rem 1rem;
    margin-bottom:1rem;
}
.dh-title {
    font-size:1.35rem;
    font-weight:800;
    letter-spacing:-.02em;
    margin:0;
    color:#10141e;
}
.dh-sub {
    margin:.15rem 0 0;
    font-size:.8125rem;
    color:#8a919c;
}
.dh-actions {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:.5rem;
}
.dh-scope {
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    padding:.35rem .7rem;
    border-radius:999px;
    font-size:.75rem;
    font-weight:700;
    white-space:nowrap;
    background:#eff6ff;
    color:#1d4ed8;
    border:1px solid #dbe7ff;
}
.dh-scope--unit {
    background:#f5f3ff;
    color:#6d28d9;
    border-color:#e6e2fb;
}
.dh-scope i {
    font-size:.7rem;
}
.dk-hero {
    background:#fff;
    border:1px solid #e9ecf2;
    border-left:3px solid var(--atk-primary);
    border-radius:14px;
    box-shadow:0 1px 2px rgba(16, 20, 30, .04);
}
.dk-hero-body {
    padding:1.15rem 1.35rem;
}
.dk-hero-label {
    margin:0 0 .3rem;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:#8a919c;
}
.dk-hero-value {
    font-size:2.1rem;
    font-weight:800;
    line-height:1.05;
    letter-spacing:-.025em;
    color:#10141e;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}
.dk-hero-value .cur {
    font-size:.6em;
    font-weight:700;
    color:#5f6672;
    margin-right:.18rem;
}
.dk-hero-note {
    margin:.35rem 0 0;
    font-size:.8125rem;
    color:#8a919c;
}
.dk-hero-chips {
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
    align-content:flex-start;
}
.dk-grid > [class*="col"] {
    display:flex;
}
.dk {
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    width:100%;
    background:#fff;
    border:1px solid #e9ecf2;
    border-radius:14px;
    padding:1rem 1.1rem;
    box-shadow:0 1px 2px rgba(16, 20, 30, .04);
    transition:box-shadow .16s ease, border-color .16s ease;
}
.dk:hover {
    border-color:#dbe4f3;
    box-shadow:0 4px 14px -6px rgba(16, 20, 30, .14);
}
.dk-top {
    display:flex;
    align-items:center;
    gap:.6rem;
    margin-bottom:.55rem;
}
.dk-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.5rem;
    margin-bottom:.6rem;
}
.dk-ico {
    width:34px;
    height:34px;
    border-radius:10px;
    flex-shrink:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:.9rem;
}
.dk-label {
    margin:0 0 .1rem;
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:#8a919c;
    line-height:1.3;
}
.dk-value {
    margin:auto 0 0;
    font-size:1.9rem;
    font-weight:800;
    line-height:1.05;
    letter-spacing:-.02em;
    color:#10141e;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}
.dk-value .cur {
    font-size:.6em;
    font-weight:700;
    color:#5f6672;
    margin-right:.14rem;
}
.dk-value--money {
    font-size:1.12rem;
    letter-spacing:-.01em;
}
.dk-sub {
    margin:.3rem 0 0;
    font-size:.74rem;
    color:#8a919c;
    line-height:1.45;
}
.dk-scope {
    display:inline-flex;
    align-items:center;
    gap:.28rem;
    padding:.18rem .5rem;
    border-radius:999px;
    font-size:.64rem;
    font-weight:700;
    white-space:nowrap;
    background:#f1f5f9;
    color:#475569;
    border:1px solid #e2e8f0;
}
.dk-scope--school {
    background:#eff6ff;
    color:#1d4ed8;
    border-color:#dbe7ff;
}
.dk-scope--unit {
    background:#f5f3ff;
    color:#6d28d9;
    border-color:#e6e2fb;
}
.dk-scope i {
    font-size:.6rem;
}
@media (min-width: 1400px){
.dk-value--money {
    font-size:1.22rem;
}
.dk-hero-value {
    font-size:2.3rem;
}
}
@media (max-width: 1199.98px){
.dk-value--money {
    font-size:1.5rem;
}
}
@media (max-width: 575.98px){
.dk-hero-value {
    font-size:1.45rem;
}
.dk-value {
    font-size:1.6rem;
}
.dk-value--money {
    font-size:1.05rem;
}
}
.sec-head {
    display:flex;
    align-items:center;
    gap:.6rem;
    padding:.95rem 1.15rem;
    border-bottom:1px solid #f0f2f6;
}
.sec-head .dk-ico {
    width:32px;
    height:32px;
    border-radius:10px;
}
.sec-title {
    margin:0;
    font-size:.95rem;
    font-weight:700;
    letter-spacing:-.01em;
    color:#10141e;
}
.sec-sub {
    margin:.05rem 0 0;
    font-size:.72rem;
    color:#9aa1ac;
}
/* Tautan "Lihat semua" di kepala bagian (beranda) */
.sec-link {
    margin-left:auto;
    display:inline-flex;
    align-items:center;
    gap:.3rem;
    font-size:.74rem;
    font-weight:600;
    color:#2563eb !important;
    text-decoration:none;
    white-space:nowrap;
}
.sec-link:hover { color:#1d4ed8 !important; }
.sec-link i { font-size:.68rem; }
.dl {
    list-style:none;
    margin:0;
    padding:0;
}
.dl li {
    display:flex;
    align-items:center;
    gap:.7rem;
    padding:.6rem .1rem;
    border-top:1px solid #f2f4f9;
}
.dl li:first-child {
    border-top:0;
}
.dl-ico {
    width:32px;
    height:32px;
    border-radius:9px;
    flex-shrink:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:.8rem;
}
.dl-main {
    min-width:0;
    flex:1 1 auto;
}
.dl-name {
    margin:0;
    font-size:.85rem;
    font-weight:700;
    color:#10141e;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.dl-meta {
    margin:.1rem 0 0;
    font-size:.72rem;
    color:#9aa1ac;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.dl-meta i {
    margin-right:.25rem;
}
.dl-table td {
    padding-top:.55rem !important;
    padding-bottom:.55rem !important;
}
.dl-table .badge {
    font-variant-numeric:tabular-nums;
}
.dk-empty {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:190px;
    text-align:center;
    padding:1.25rem .5rem;
    color:#9aa1ac;
}
.dk-empty i {
    font-size:1.4rem;
    display:block;
    margin-bottom:.5rem;
    color:#cbd2dd;
}
.dk-empty p {
    margin:0;
    font-size:.8rem;
}
.dash-chip i {
    font-size:.68rem;
}
.dk {
    position:relative;
    overflow:hidden;
    background-color:#ffffff !important;
    background-image:linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%) !important;
    --dk-accent:#2563eb;
    --dk-accent-soft:rgba(37, 99, 235, .45);
}
.dk::before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:3px;
    background:linear-gradient(90deg,
        var(--dk-accent) 0%,
        var(--dk-accent-soft) 52%,
        transparent 100%);
    opacity:.9;
    pointer-events:none;
    z-index:1;
}
.dk--blue {
    --dk-accent:#2563eb;
    --dk-accent-soft:rgba(37, 99, 235, .45);
}
.dk--green {
    --dk-accent:#059669;
    --dk-accent-soft:rgba(5, 150, 105, .45);
}
.dk--cyan {
    --dk-accent:#0891b2;
    --dk-accent-soft:rgba(8, 145, 178, .45);
}
.dk--amber {
    --dk-accent:#d97706;
    --dk-accent-soft:rgba(217, 119, 6, .45);
}
.dk--slate {
    --dk-accent:#475569;
    --dk-accent-soft:rgba(71, 85, 105, .45);
}
.dk-hero {
    background-image:linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
}
.dk-spark-wrap {
    margin-top:.6rem;
    display:flex;
    flex-direction:column;
    gap:.18rem;
}
.dk-spark {
    display:block;
    width:100%;
    height:30px;
    overflow:visible;
}
.dk-spark-cap {
    font-size:.62rem;
    font-weight:600;
    letter-spacing:.01em;
    color:#9aa1ac;
    white-space:nowrap;
}
.dk .dk-value {
    margin-top:0;
}
.dk-value, .dk-hero-value {
    text-shadow:none;
}
@media (max-width: 575.98px){
.dk-spark {
    height:26px;
}
}
.dk-spark-wrap--note {
    margin-top:.62rem;
    padding:.32rem .55rem;
    border:1px dashed #e3e7ef;
    border-radius:8px;
    background:#f8fafc;
    align-self:flex-start;
}
.dk-spark-wrap--note .dk-spark-cap {
    display:inline-flex;
    align-items:center;
    gap:.3rem;
    color:#8a919c;
    font-style:italic;
    font-weight:600;
}
.dk-spark-wrap--note .dk-spark-cap i {
    font-size:.68rem;
    color:#94a3b8;
}
#kategoriChart {
    overflow:visible;
}