/* ============================================================
   Asetku Custom Theme — Light Mode (Notion-inspired warm minimalism)
   Dimuat SETELAH soft-ui-dashboard.css.
   Referensi: DESIGN.md (design tokens)
   ============================================================ */

:root {
    /* Warna inti */
    --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;

    /* Radius */
    --atk-radius-sm: 8px;
    --atk-radius-md: 12px;
    --atk-radius-lg: 16px;
    --atk-radius-xl: 20px;
    --atk-radius-pill: 999px;

    /* Bayangan lembut (gaya Notion: berlapis, opasitas rendah) */
    --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);
}

/* ============ DASAR ============ */
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;
}

/* Halaman login: gradien hangat (khusus, menang atas body di atas) */
body.login-page {
    background: linear-gradient(160deg, #f7f8fc 0%, #eef2fb 55%, #e8eefc 100%) !important;
    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;
}

/* Focus ring yang terlihat (aksesibilitas keyboard) */
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);
}

/* ============ KARTU ============ */
.card {
    border: 1px solid var(--atk-border) !important;
    border-radius: var(--atk-radius-lg) !important;
    box-shadow: var(--atk-shadow-card) !important;
    background-color: var(--atk-surface);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--atk-border) !important;
    padding: 1.25rem 1.5rem 0.75rem !important;
}
.card-body { padding: 1.5rem !important; }
.card-footer {
    background: transparent !important;
    border-top: 1px solid var(--atk-border) !important;
}

/* Kartu statistik dashboard: hover lembut */
.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;
}

/* ============ TOMBOL ============ */
.btn {
    border-radius: var(--atk-radius-md) !important;
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    transition: all 0.15s ease !important;
}
.btn:active { transform: scale(0.97); }
.btn:hover { transform: translateY(-1px); }

.btn.bg-gradient-primary, .btn.btn-primary {
    background: var(--atk-primary) !important;
    background-image: none !important;
    border: 1px solid var(--atk-primary) !important;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25) !important;
}
.btn.bg-gradient-primary:hover, .btn.btn-primary:hover {
    background: var(--atk-primary-hover) !important;
    border-color: var(--atk-primary-hover) !important;
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.3) !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 == gradien brand (identik dengan bg-gradient-primary, apa pun class yang dipakai view) */
.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; }

/* Gradien semantik: hover lebih gelap (teks tetap putih) */
.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; }

/* Tombol aksi di tabel: lebih ramah */
.btn-sm { border-radius: var(--atk-radius-sm) !important; }

/* ============ FORM ============ */
.form-control, .form-select {
    border: 1px solid #d8dce3 !important;
    border-radius: 10px !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;
    box-shadow: var(--atk-shadow-focus) !important;
}
.form-label, label.form-label {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--atk-text-secondary);
    margin-bottom: 0.4rem;
}
.form-check-input:checked {
    background-color: var(--atk-primary) !important;
    border-color: var(--atk-primary) !important;
}
.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 (dropdown pencarian) */
.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;
}

/* ============ SIDEBAR ============ */
.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;
    margin: 2px 10px !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;
    box-shadow: inset 3px 0 0 var(--atk-primary);
}
.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;
    border-radius: var(--atk-radius-sm) !important;
}
.sidenav .nav-link.active .icon {
    background: var(--atk-surface) !important;
}
/* Label seksi sidebar */
.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;
}

/* ============ TABEL ============ */
.table {
    --bs-table-border-color: var(--atk-border);
    font-size: 0.8125rem !important;
}
.table thead th {
    background: #f4f5f7 !important;
    border-bottom: 1px solid var(--atk-border) !important;
    color: var(--atk-text-secondary) !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    padding: 0.75rem 0.875rem !important;
}
.table tbody td {
    padding: 0.75rem 0.875rem !important;
    vertical-align: middle !important;
}
.table tbody tr {
    transition: background-color 0.12s ease;
}
.table-hover tbody tr:hover {
    background-color: rgba(37, 99, 235, 0.035) !important;
}
.table-responsive {
    border-radius: var(--atk-radius-md);
}

/* ============ BADGE & CHIP ============ */
.badge {
    border-radius: var(--atk-radius-pill, 999px) !important;
    padding: 0.45em 0.8em !important;
    font-weight: 600 !important;
    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 (chip statistik) ============ */
.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 & MODAL ============ */
.dropdown-menu {
    border: 1px solid var(--atk-border) !important;
    border-radius: var(--atk-radius-md) !important;
    box-shadow: var(--atk-shadow-pop) !important;
    padding: 0.5rem !important;
}
.dropdown-item {
    border-radius: var(--atk-radius-sm) !important;
    padding: 0.5rem 0.75rem !important;
    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 ============ */
.alert {
    border-radius: var(--atk-radius-md) !important;
    border: 1px solid transparent;
}

/* ============ PAGINATION ============ */
.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 ATAS (aplikasi pinjam) ============ */
.navbar.bg-white {
    border-bottom: 1px solid var(--atk-border) !important;
}

/* ============ TAB ============ */
.nav-pills .nav-link.active {
    background: var(--atk-primary-soft) !important;
    color: var(--atk-primary) !important;
    font-weight: 600;
}

/* ============ SCROLLBAR (halus, ringan) ============ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: #d4d7dd;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: #b9bdc5; }

/* ============ UTILITAS ============ */
.text-primary { color: var(--atk-primary) !important; }
.bg-gradient-primary { background: var(--atk-primary) !important; background-image: none !important; }
.bg-gradient-success { background: var(--atk-success) !important; background-image: none !important; }
.bg-gradient-danger  { background: var(--atk-danger)  !important; background-image: none !important; }
.bg-gradient-warning { background: var(--atk-warning) !important; background-image: none !important; }
.bg-gradient-info    { background: var(--atk-info)    !important; background-image: none !important; }

/* Judul halaman di dalam kartu: konsisten */
.card-header h6 { letter-spacing: -0.01em; }

/* ============ RESPONSIF ============ */
@media (max-width: 767.98px) {
    .card-body { padding: 1.125rem !important; }
    .sidenav .nav-link { margin: 2px 6px !important; }
}

/* ============================================================
   v2 — KONSISTENSI WARNA SEMANTIK (Soft UI -> palet myAset)
   ============================================================ */

/* Teks semantik */
.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; }

/* Latar semantik (non-gradien) */
.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 semantik */
.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; }

/* Gradient semantik: versi halus & konsisten (135deg) */
.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; }

/* ============================================================
   v2 — POLES PREMIUM
   ============================================================ */

/* Tombol primer: gradien halus + bayangan warna (mahal) */
.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;
}

/* Chip ikon: solid via brand-lock + ikon putih via aturan v4 (lihat bawah) */
/* Kartu: kilau halus di atas (premium) */
.card {
    box-shadow: 0 1px 2px rgba(16, 20, 30, 0.03),
                0 4px 12px rgba(16, 20, 30, 0.04),
                0 16px 32px rgba(16, 20, 30, 0.05) !important;
}

/* Teks terpilih */
::selection { background: rgba(37, 99, 235, 0.18); color: #172554; }

/* Halaman login: blob dekoratif (v2) */
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 {
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(8, 145, 178, 0.14), transparent 65%);
    bottom: -140px; right: -120px;
}
body.login-page .container { position: relative; z-index: 1; }
.login-card {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Elemen brand & teks halaman login (dipakai login.php & salah.php) */
.login-brand { display: flex; align-items: center; gap: .75rem; }
.login-brand img { height: 40px; width: auto; object-fit: contain; }
.login-title { font-weight: 700; letter-spacing: -0.02em; color: #1f2328; }
.login-sub { color: #5f6672; font-size: .875rem; }
.login-footer-note { font-size: .8125rem; color: #9aa1ac; }

/* ============================================================
   v3 — LOGIN SPLIT (premium, responsive)
   ============================================================ */
.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 {
    background: linear-gradient(150deg, #2563eb 0%, #1e40af 60%, #172f8f 100%);
    color: #fff;
    padding: 3.5rem 3rem;
    position: relative;
    overflow: hidden;
}
/* blob dekoratif di panel kanan */
.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 {
    width: 260px; height: 260px;
    background: rgba(37, 99, 235, 0.55);
    bottom: -90px; left: -70px;
}
.login-side > div { position: relative; z-index: 1; }
.login-side-check {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem;
    flex-shrink: 0;
}

@media (max-width: 991.98px) {
    .login-card--split { max-width: 480px; }
}

/* ============================================================
   v4 — DASHBOARD PREMIUM
   ============================================================ */
.dash-welcome {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 55%, #172f8f 100%);
    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);
    box-shadow: 0 6px 16px rgba(16, 20, 30, 0.06), 0 20px 40px rgba(16, 20, 30, 0.08) !important;
}
.dash-kpi-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--atk-text-secondary);
}
.dash-kpi-value {
    font-weight: 800 !important;
    letter-spacing: -0.02em;
    color: var(--atk-text);
    font-size: 1.75rem;
}
.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 aset terbaru */
.timeline { padding-left: 0; }
.timeline::before { left: 17px; background: rgba(16, 20, 30, 0.08); }

/* ============================================================
   v4 — SIDEBAR PREMIUM
   ============================================================ */
.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;
}

/* v4 — Ikon sidebar Font Awesome: konsisten, muted -> biru saat hover/aktif */
/* Ikon di chip: dipaksa flex-center (Soft UI memposisikan absolute -> tidak center) */
.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;
}
/* Ikon di chip solid: PUTIH (chip sudah gradien penuh via brand-lock) */
.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 { font-size: 1.3rem !important; 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; }

/* ============================================================
   v5 — PREMIUM POLISH (referensi Stripe / Linear / Notion)
   Elevasi berlapis ber-tint biru, tabel hairline, angka tabular,
   banner & kartu lebih dalam, fokus konsisten.
   ============================================================ */

/* --- Elevasi: shadow berlapis (chromatic depth ala Stripe) --- */
.card {
    box-shadow: 0 1px 2px rgba(16, 20, 30, 0.04),
                0 8px 24px -12px rgba(37, 99, 235, 0.08) !important;
}
.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;
}
.app-topbar {
    box-shadow: 0 1px 0 rgba(16, 20, 30, 0.03), 0 8px 20px -14px rgba(16, 20, 30, 0.12);
}

/* --- Banner dashboard: kilau premium --- */
.dash-welcome {
    box-shadow: 0 12px 30px -10px rgba(30, 64, 175, 0.45) !important;
}

/* --- Tabel: kepala micro-caps, divider hairline, angka tabular --- */
.table thead th {
    text-transform: uppercase;
    font-size: 0.66rem !important;
    letter-spacing: 0.07em;
    color: #9aa1ad !important;
    font-weight: 700 !important;
    border-bottom: 1px solid #eef0f4 !important;
    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;
}
.table tbody tr:last-child td {
    border-bottom: 0;
}

/* --- Angka konsisten di semua tempat numerik --- */
.dash-kpi-value,
.badge,
.text-xs,
.text-sm {
    font-variant-numeric: tabular-nums;
}

/* --- Tombol: tinggi & radius seragam di seluruh aplikasi --- */
.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;
}

/* --- Kartu statistik: border halus + hover mengambang --- */
.dash-kpi {
    border: 1px solid #e9ecf2 !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #ffffff 0%, #fdfdfe 100%);
}
.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;
}

/* --- Header kartu: judul lebih tegas --- */
.card-header h6,
.card-header .h6 {
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    letter-spacing: -0.01em;
}

/* --- Form: input premium, placeholder lembut --- */
.form-control::placeholder,
.form-select::placeholder { color: #aab0bb; }

/* --- Link dalam teks --- */
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;
}

/* ============================================================
   v6 — PREMIUM POLISH LANJUTAN (light theme)
   Login kelas premium + poles tipografi, sidebar, kartu, animasi.
   ============================================================ */

/* ---------- HALAMAN LOGIN ---------- */
body.login-page {
    background: #f6f8fd !important;
}
/* Pola dot-grid halus + glow lembut (Stripe/Linear style) */
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;
}

/* Field login: ikon di dalam input */
.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;
}

/* Panel kanan: gradien dalam + pola dot */
.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; }

/* ---------- POLES GLOBAL ---------- */
/* Kartu: sudut lebih lembut & rapi */
.card { border-radius: 16px !important; }
.card-body { padding: 1.35rem 1.35rem; }

/* Judul halaman/kartu & subjudul */
.card-header h6 + small,
.card-header .h6 + small { display: block; margin-top: 0.15rem; }
.card-header small.text-muted { font-size: 0.75rem; }

/* Sidebar: item bergeser halus saat hover */
.app-nav-link { transition: background 0.16s ease, color 0.16s ease, padding-left 0.16s ease; }
.app-nav-link:hover { padding-left: 1rem; }
.app-nav-section { letter-spacing: 0.1em; font-size: 0.63rem; }

/* KPI: angka lebih berkarakter */
.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; }

/* Tombol gradien: kilau atas halus (kesan timbul) */
.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: keadaan kosong & pencarian lebih cantik */
.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; }

/* Animasi masuk halaman (halus) */
@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; }

/* Seleksi teks bertema */
::selection { background: rgba(37, 99, 235, 0.16); color: #0f172a; }

/* Badge ukuran lebih rapi */
.badge { padding: 0.42em 0.7em !important; border-radius: 7px !important; }

/* Tautan dalam tabel */
.table a:not(.btn) { font-weight: 600; }

/* ============================================================
   v7 — FORM PREMIUM + SIDEBAR RINGKAS + BOTTOM NAV MOBILE
   ============================================================ */

/* ---------- 1. FORM: kelas form-group (pola Bootstrap 4) diberi nyawa ---------- */
.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;
}

/* Input & select: tinggi lega, border halus, fokus biru ber-ring */
.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 { color: #aab0bb; 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; }

/* Select: panah rapi + padding kanan cukup */
.form-select {
    padding-right: 2.25rem;
    background-position: right 0.85rem center;
    background-size: 14px 11px;
}

/* File input: tombol bergaya */
.form-control[type="file"] { padding: 0.45rem 0.5rem; }
.form-control[type="file"]::file-selector-button {
    border: 0;
    border-radius: 8px;
    padding: 0.42rem 0.85rem;
    margin-right: 0.75rem;
    background: #eff4ff;
    color: #1d4ed8;
    font-weight: 600;
    font-size: 0.82rem;
    transition: background 0.15s ease;
}
.form-control[type="file"]::file-selector-button:hover { background: #dfe9ff; }

/* Input group: ikon menyatu rapi */
.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; }

/* Checkbox & switch */
.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; }

/* Validasi */
.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 ikut gaya form */
.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);
}

/* ---------- 2. SIDEBAR: lebih ringkas (teks kecil, jarak rapat) ---------- */
:root { --ma-sidebar-w: 244px; }
.app-sidebar { width: var(--ma-sidebar-w); }
.app-brand { padding: 1rem 1.1rem 0.85rem; 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; }

/* ---------- 3. BOTTOM NAV (mobile) ---------- */
.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; }
    /* hamburger topbar tidak perlu lagi (Menu ada di bottom nav) */
    .app-topbar button[data-sidebar-open] { display: none !important; }
}

/* ============================================================
   v8 — RESPONSIVE: TABEL & TOMBOL DI LAYAR KECIL
   Tombol aksi tidak boleh melebihi lebar tabel/kartu di HP.
   ============================================================ */

/* Kontainer tabel: selalu bisa digeser horizontal, tidak menembus kartu */
.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%; }

/* Sel aksi: tombol boleh membungkus, tidak memaksa tabel melebar */
.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%;
}

/* Kartu berisi tabel: jangan sampai tombol keluar dari kartu */
.card-body:has(> .table-responsive) { overflow: hidden; }
.card-body > .table-responsive { border-radius: 0 0 16px 16px; }

/* ---------- MOBILE ---------- */
@media (max-width: 767.98px) {
    /* Tabel lebih padat */
    .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;
    }

    /* Tombol di dalam tabel: mungil, ikon rapat, tetap mudah disentuh */
    .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; }

    /* Deret tombol aksi membungkus ke bawah bila sempit */
    .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: kontrol atas menumpuk rapi, tidak meluber */
    .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;
    }

    /* Tombol di kepala kartu (toolbar halaman) lebih kecil & rapi */
    .card-header .btn { font-size: 0.76rem !important; padding: 0.38rem 0.7rem !important; }
    .card-header .d-flex.flex-wrap { gap: 0.4rem !important; }

    /* Judul & subjudul kartu */
    .card-header h6, .card-header .h6 { font-size: 0.88rem !important; }
}

@media (max-width: 575.98px) {
    /* Toolbar halaman: tombol memenuhi lebar agar rapi, bukan menggantung */
    .card-header .d-flex.flex-wrap > .btn { flex: 1 1 46%; }
    .card-body .btn.w-100 { width: 100% !important; }
}

/* ============================================================
   v9 — TOOLBAR KEPALA KARTU RESPONSIF
   Deret tombol aksi (tanpa class flex-wrap) tidak boleh
   memaksa kartu/halaman melebar di HP.
   ============================================================ */
.card-header .d-flex {
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
    max-width: 100%;
    min-width: 0;
}
.card-header { overflow: hidden; }
.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;
    }
    /* Tombol toolbar membagi lebar baris (2 per baris) */
    .card-header .d-flex > .btn { flex: 1 1 calc(50% - 0.4rem); }
    .card-header .d-flex > .btn:only-child { flex: 0 1 auto; }
}

/* ============================================================
   v10 — MODERN SAAS REDESIGN (2025)
   Referensi: Linear / Vercel / Notion / Stripe modern.
   Sidebar mengambang, tombol flat solid, kartu tanpa border,
   input filled, tabel lapang, DataTables rapi.
   ============================================================ */

/* ---------- Latar & tipografi dasar ---------- */
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; }

/* ---------- SIDEBAR MENGAMBANG (floating panel) ---------- */
: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; }

/* ---------- TOPBAR MINIMAL ---------- */
.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); }

/* ---------- KARTU: tanpa border, bayangan lembut besar ---------- */
.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; }

/* ---------- TOMBOL: flat solid modern (tanpa gradien) ---------- */
.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; }

/* ---------- INPUT: gaya filled (modern) ----------
   Catatan: aturan gaya input sekarang satu tempat di blok v18
   (INPUT BERLAPIS) di bagian bawah berkas ini. */
.auth-field .form-control, .auth-field .input-group-text { background: #fff !important; }

/* ---------- TABEL MODERN ---------- */
.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: kontrol modern ---------- */
.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 & PIL MODERN ---------- */
.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; }
/* Catatan: bentuk modal diatur pada blok v18 (MODAL PREMIUM). */
.list-group-item { border-color: #f4f6fa !important; }

/* Scrollbar modern */
::-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; }

/* ============================================================
   v11 — FIX SIDEBAR MENGAMBANG DI MOBILE
   Sebelumnya tersembunyi dengan translateX(-100%) padahal sudah
   digeser 12px dari tepi -> tersisa ~12px "nyempil" di layar.
   Kini disembunyikan penuh (lebar + offset).
   ============================================================ */
@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; }
}

/* ============================================================
   v12 — KOMPONEN HALAMAN VERIFIKASI / RIWAYAT PINJAM
   Kartu statistik, tab pill, avatar inisial, chip barang, empty state.
   ============================================================ */

/* Kartu statistik mini (dapat diklik) */
.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;
}

/* Tab pill modern */
.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 inisial siswa */
.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; }

/* Chip barang dalam tabel */
.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 */
.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; }

/* Baris terpilih di tabel kelola status */
#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; }

/* ============================================================
   v13 — PENYERAGAMAN HALAMAN LIST (final)
   Subjudul kartu, netralisasi sisa class lama, baris terpilih.
   ============================================================ */
.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; }

/* Sisa class lama pada header tabel dinetralkan */
.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; }

/* Baris terpilih / highlight baris */
.row-selected,
#tabel-barang tbody tr.row-selected { background: #eff4ff !important; }
.table tbody tr.selected-row { background: #eff4ff !important; }

/* ============================================================
   v14 — Badge lembut (dipakai aplikasi pinjam & aset)
   ============================================================ */
.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; }

/* ============================================================
   v17 — Avatar pengguna di topbar + halaman akun
   ============================================================ */
.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; }

/* ============================================================
   v18 — MODAL PREMIUM & INPUT BERLAPIS
   Masalah lama: latar modal putih dan kotak input juga putih sehingga
   batas input tidak terlihat. Sekarang permukaannya dibedakan:
   kepala/kaki modal abu sangat muda, isi putih, input abu terisi.
   ============================================================ */

/* --- Latar belakang gelap + blur --- */
.modal-backdrop.show {
    opacity: 1;
    background: rgba(15, 23, 42, 0.46);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* --- Kartu modal --- */
.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;
}
/* garis aksen merek di tepi atas modal */
.modal-content::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #2563eb, #60a5fa);
    z-index: 2;
}

/* --- Kepala modal --- */
.modal-header {
    background: #fafbfe;
    border-bottom: 1px solid #eef2f7;
    padding: 1.1rem 1.3rem 1rem;
    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;
}
/* Tombol tutup modal diatur pada blok v19 di bagian bawah berkas. */

/* --- Isi modal (putih) dengan gulir sendiri agar kaki tetap terlihat --- */
.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; }

/* --- Kaki modal (abu muda) --- */
.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; }

/* ============================================================
   INPUT BERLAPIS — abu terisi, berbeda dari permukaan putih
   ============================================================ */
.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; }

/* Awalan/akhiran input */
.input-group-text {
    background: #eaeff7;
    border: 1px solid #e1e7f1;
    color: #5f6672;
    font-size: 0.86rem;
}

/* Berkas (unggah) */
.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 mengikuti gaya input */
.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);
}

/* Sudut input di dalam kelompok input (dengan awalan/akhiran) */
.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; }

/* Kotak centang / radio di dalam modal */
.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; }

/* Lebar modal & jarak di layar kecil */
.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%; }
}

/* ============================================================
   v19 — TOMBOL TUTUP MODAL & KEPALA MODAL
   Tombol silang bawaan Bootstrap tampil sebagai ikon X telanjang
   dengan opacity rendah. Sekarang dibuat tombol kotak berisi yang
   jelas terlihat, ikon lebih tegas, dan ada penanda kecil di judul.
   ============================================================ */
.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);
}

/* Penanda kecil di kiri judul modal */
.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);
}

/* Kepala modal sedikit lebih lega & judul sejajar tombol tutup */
.modal-header {
    padding: 1.05rem 1.15rem 1rem 1.3rem;
}
.modal-header + .modal-body { border-top: 0; }

/* Kaki modal: tombol lebih tegas, jarak antar tombol konsisten */
.modal-footer .btn { min-width: 96px; justify-content: center; }

/* Dialog modal: sudut isi tidak terpotong saat isi modal digulir */
.modal-dialog-centered { min-height: calc(100% - 2.5rem); }

/* ============================================================
   v20 — Avatar pengguna (inisial) & menu akun di topbar
   ============================================================ */

/* ikon di dalam tombol topbar selalu sejajar tengah */
.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; }
}

/* ============================================================
   v21 — Area kanan topbar: tanpa bayangan saat hover,
   tombol notifikasi memakai hover yang sama dengan "Hubungi Admin"
   ============================================================ */

/* tidak ada bayangan / geseran saat kursor di atas profil & tombol topbar */
.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;
}

/* tombol notifikasi: hover biru penuh seperti tombol "Hubungi Admin" */
.app-topbar .app-icon-btn {
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.app-topbar .app-icon-btn:hover,
.app-topbar .app-icon-btn:focus-visible {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}
.app-topbar .app-icon-btn:hover i,
.app-topbar .app-icon-btn:focus-visible i {
    color: #ffffff;
}
.app-topbar .app-icon-btn:active {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #ffffff;
}

/* Penataan: tombol "Hubungi Admin" terpisah sedikit, sedangkan tombol notifikasi
   dan profil berdempet sebagai satu kelompok (notifikasi tepat di sebelah profil). */
.app-topbar-right { gap: 0.5rem; }
.app-topbar-right > .btn { margin-right: 0.35rem; }

/* ============================================================
   v22 — Tombol notifikasi disamakan dengan tombol "Hubungi Admin"
   (tombol outline, radius & tinggi sama), lalu dirapatkan ke profil.
   ============================================================ */

.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;      /* sama dengan ukuran huruf tombol Hubungi Admin */
    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;
}

/* notifikasi dirapatkan supaya tepat menempel di sebelah profil */
.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; }


/* ============================================================
   v23 — Penanda notifikasi pengumuman ber-kadaluarsa
   Pengumuman tetap tampil di lonceng sampai kadaluarsa;
   titik biru = belum dibaca, item disamarkan bila sudah dibaca.
   ============================================================ */
#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;              /* tanpa outline */
    outline: 0 !important;
    box-shadow: none !important;
    border-radius: 50%;
    background: #dc2626;               /* bulat merah */
}
#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;
}

/* v24 — Penanda notifikasi: bulat merah tanpa outline */
.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;
}