@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ============================================================
   NEXTJS ADMIN DESIGN SYSTEM — MIFTAHUL ULUM
   Global override untuk seluruh aplikasi (layouts + auth)
   ============================================================ */
:root {
  --nx-primary: #5750f1;
  --nx-primary-hover: #4338ca;
  --nx-primary-soft: #eef2ff;
  --nx-accent: #06b6d4;
  --nx-success: #10b981;
  --nx-warning: #f59e0b;
  --nx-danger: #ef4444;
  --nx-info: #3b82f6;
  --nx-bg: #f7f8fc;
  --nx-surface: #ffffff;
  --nx-surface-2: #f8fafc;
  --nx-sidebar: #111827;
  --nx-sidebar-hover: #1f2937;
  --nx-text: #111827;
  --nx-text-soft: #64748b;
  --nx-text-muted: #94a3b8;
  --nx-border: #e5e7eb;
  --nx-border-strong: #d1d5db;
  --nx-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
  --nx-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .04);
  --nx-shadow-lg: 0 20px 50px rgba(15, 23, 42, .12);
  --nx-radius: 14px;
  --nx-radius-sm: 10px;
  --nx-sidebar-width: 268px;
  --primary: var(--nx-primary);
  --accent: var(--nx-accent);
  --info: var(--nx-info);
  --success: var(--nx-success);
  --warning: var(--nx-warning);
  --danger: var(--nx-danger);
}

* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
html, body { font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; }
body {
  color: var(--nx-text);
  background: var(--nx-bg);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, .content-header h1 { font-weight: 700 !important; color: var(--nx-text) !important; letter-spacing: -.025em; }
a { color: var(--nx-primary); transition: color .15s ease; }
a:hover { color: var(--nx-primary-hover); }
hr { border-color: var(--nx-border); opacity: 1; }
::selection { background: #ddd9ff; color: #1e1b4b; }

/* Ikon hasil konversi Font Awesome -> Lucide */
.nx-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.25em; height: 1.25em; flex: 0 0 auto; line-height: 1; vertical-align: -.18em; }
.nx-icon svg { width: 100%; height: 100%; display: block; }
.nx-i-xs { font-size: .75rem; } .nx-i-sm { font-size: .875rem; } .nx-i-lg { font-size: 1.25rem; }
.nx-i-2x { font-size: 2em; } .nx-i-3x { font-size: 3em; } .nx-i-4x { font-size: 4em; } .nx-i-5x { font-size: 5em; }
.nx-i-fw { width: 1.25em; } .nx-spin svg { animation: nx-spin .8s linear infinite; }
.nx-rot-90 { transform: rotate(90deg); } .nx-rot-180 { transform: rotate(180deg); } .nx-rot-270 { transform: rotate(270deg); }
.nx-flip-x { transform: scaleX(-1); }
@keyframes nx-spin { to { transform: rotate(360deg); } }

/* Layout utama */
.wrapper { background: var(--nx-bg); }
.content-wrapper { min-height: calc(100vh - 64px - 54px); background: var(--nx-bg); outline: 0; }
.content { padding: 0 28px 28px; }
.content-header { padding: 22px 0 16px; background: transparent; }
.content-header h1 { font-size: 22px !important; margin: 0 0 5px !important; }
.content-header > h1 small { font-size: 13px; color: var(--nx-text-soft); font-weight: 500; }
.breadcrumb { padding: 0; margin: 0; background: transparent; font-size: 12px; line-height: 1.5; }
.breadcrumb-item + .breadcrumb-item::before { content: "/"; color: var(--nx-text-muted); padding: 0 8px; }
.breadcrumb-item a { color: var(--nx-text-soft) !important; font-weight: 500; }
.breadcrumb-item.active { color: var(--nx-text) !important; font-weight: 600 !important; }

/* Navbar */
.main-header.navbar { min-height: 64px; height: 64px; border: 0 !important; background: rgba(255,255,255,.92) !important; box-shadow: 0 1px 0 rgba(15,23,42,.06); backdrop-filter: blur(12px); }
.main-header .navbar-nav { gap: 4px; }
.main-header .nav-link { color: var(--nx-text-soft) !important; padding: .55rem .75rem !important; border-radius: 10px; font-weight: 600; display: flex; align-items: center; }
.main-header .nav-link:hover, .main-header .nav-link:focus { color: var(--nx-primary) !important; background: var(--nx-primary-soft); }
.main-header .nav-link .dropdown-toggle::after { margin: 0 0 0 8px; opacity: .55; }
.main-header .dropdown-menu { margin-top: 10px !important; border: 1px solid var(--nx-border); border-radius: 12px; box-shadow: var(--nx-shadow-lg); padding: 7px; min-width: 210px; }
.main-header .dropdown-item { border-radius: 8px; padding: 9px 11px; color: var(--nx-text-soft); font-weight: 600; display: flex; align-items: center; }
.main-header .dropdown-item:hover { color: var(--nx-primary); background: var(--nx-primary-soft); }


/* Sidebar */
.main-sidebar { background: var(--nx-sidebar) !important; border-right: 1px solid var(--nx-border); box-shadow: none; }
.brand-link { height: 64px !important; display: flex !important; align-items: center; border-bottom: 1px solid var(--nx-border) !important; padding: 0 20px !important; background: transparent !important; }
.brand-link .brand-image { width: 34px !important; height: 34px !important; margin-right: 11px !important; margin-left: 0 !important; object-fit: contain; border-radius: 9px; box-shadow: none; }
.brand-text { font-size: 16px !important; font-weight: 800 !important; color: var(--nx-text) !important; white-space: nowrap; }
.sidebar { height: calc(100vh - 64px) !important; overflow-y: auto; padding: 14px 12px 20px; }
.user-panel { border-bottom: 1px solid var(--nx-border) !important; margin: 0 0 12px !important; padding: 0 4px 14px !important; }
.user-panel .image img { width: 36px !important; height: 36px !important; object-fit: cover; }
.user-panel .info { padding: 3px 0 0 9px !important; line-height: 1.25; }
.user-panel .info a { font-size: 13px !important; font-weight: 700; color: var(--nx-text) !important; }
.user-panel .info span { color: var(--nx-text-muted); font-size: 11px; text-transform: capitalize; }
.nav-sidebar { flex-direction: column; gap: 3px; }
.nav-sidebar .nav-item { width: 100%; }
.nav-sidebar .nav-link { color: #64748b !important; border-radius: 10px; padding: 10px 12px !important; font-size: 13px; font-weight: 600; display: flex; align-items: center; transition: .16s ease; }
.nav-sidebar .nav-link .nx-icon { margin-right: 12px; color: #94a3b8; }
.nav-sidebar .nav-link:hover { color: var(--nx-primary) !important; background: #f3f4f6; }
.nav-sidebar .nav-link:hover .nx-icon { color: var(--nx-primary); }
.nav-sidebar .nav-link.active { color: var(--nx-primary) !important; background: var(--nx-primary-soft) !important; font-weight: 700; }
.nav-sidebar .nav-link.active .nx-icon { color: var(--nx-primary); }
.nav-treeview { display: block; padding: 3px 0 4px 34px; }
.nav-treeview .nav-link { padding: 7px 12px !important; font-size: 12.5px; font-weight: 500; }
.nav-treeview .nav-link .nx-icon { margin-right: 9px; }
.nav-sidebar .nav-arrow { margin-left: auto; margin-right: 0; font-size: 10px; transition: transform .2s; }
.nav-sidebar .nav-link.active > .nav-arrow { transform: rotate(-90deg); }
.nav-pills .nav-link.active { background: var(--nx-primary-soft); }

/* Kartu dan komponen umum */
.card { background: var(--nx-surface) !important; border: 1px solid var(--nx-border) !important; border-radius: var(--nx-radius) !important; box-shadow: var(--nx-shadow) !important; }
.card-header { background: var(--nx-surface) !important; color: var(--nx-text) !important; border-color: var(--nx-border) !important; padding: 16px 20px !important; font-weight: 700; display: flex; align-items: center; min-height: 58px; }
.card-header h3, .card-header h5 { font-size: 15px; margin: 0; color: var(--nx-text); }
.card-header .card-tools { margin-left: auto; }
.card-body { padding: 20px; color: var(--nx-text); }
.card-footer { background: var(--nx-surface-2) !important; border-color: var(--nx-border) !important; padding: 13px 20px; }
.small-box, .info-box, .dash-card, .chart-card { border-radius: var(--nx-radius) !important; box-shadow: var(--nx-shadow) !important; border: 1px solid var(--nx-border) !important; }
.dash-card { box-shadow: var(--nx-shadow) !important; }
.dash-icon { border-radius: 12px !important; }
.dash-info h3 { color: var(--nx-text) !important; }

/* Tombol */
.btn { border-radius: 9px !important; font-weight: 650 !important; font-size: 13px; padding: .55rem .95rem; line-height: 1.5; display: inline-flex; align-items: center; justify-content: center; gap: 7px; box-shadow: none !important; }
.btn-sm { padding: .38rem .7rem; font-size: 12.5px; border-radius: 8px !important; }
.btn-lg { padding: .7rem 1.2rem; border-radius: 10px !important; }
.btn-primary, .btn-info, .btn-blue { background: var(--nx-primary) !important; border-color: var(--nx-primary) !important; color: #fff !important; }
.btn-primary:hover, .btn-info:hover, .btn-blue:hover { background: var(--nx-primary-hover) !important; border-color: var(--nx-primary-hover) !important; }
.btn-success { background: var(--nx-success) !important; border-color: var(--nx-success) !important; }
.btn-warning { background: var(--nx-warning) !important; border-color: var(--nx-warning) !important; color: #fff !important; }
.btn-danger { background: var(--nx-danger) !important; border-color: var(--nx-danger) !important; }
.btn-secondary { background: #f1f5f9 !important; border-color: #e2e8f0 !important; color: #475569 !important; }
.btn-secondary:hover { background: #e2e8f0 !important; color: #1e293b !important; }
.btn-outline-secondary { background: transparent !important; border-color: var(--nx-border-strong) !important; color: var(--nx-text-soft) !important; }
.btn i, .btn .nx-icon { font-size: .95em; }


/* Form */
.form-group { margin-bottom: 17px; }
label, .control-label { color: var(--nx-text-soft) !important; font-size: 12.5px !important; font-weight: 650 !important; margin-bottom: 6px !important; }
.form-control, .custom-select, .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple { border: 1px solid var(--nx-border-strong) !important; border-radius: 9px !important; color: var(--nx-text) !important; min-height: 42px; box-shadow: none !important; font-size: 13px; }
.form-control:focus, .custom-select:focus, .select2-container--default.select2-container--focus .select2-selection--single { border-color: var(--nx-primary) !important; box-shadow: 0 0 0 3px rgba(87,80,241,.12) !important; }
.form-control::placeholder { color: #a1a8b4; }
.form-control:disabled, .form-control[readonly] { background: var(--nx-surface-2) !important; }
.select2-container--default .select2-selection--single { padding: 6px 12px; }
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--nx-text); line-height: 28px; padding: 0; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; right: 8px; }
.input-group-text { background: var(--nx-surface-2); border-color: var(--nx-border-strong); color: var(--nx-text-soft); border-radius: 9px; }
.custom-control-label { color: var(--nx-text-soft); font-weight: 500; }
.custom-control-label::before, .custom-control-label::after { border-color: var(--nx-border-strong); border-radius: 5px; }
.custom-control-input:checked ~ .custom-control-label::before, .custom-control-input:checked ~ .custom-control-label::after { background: var(--nx-primary); border-color: var(--nx-primary); }
.custom-control-input:focus ~ .custom-control-label::before, .custom-control-input:focus ~ .custom-control-label::after { box-shadow: 0 0 0 3px rgba(87,80,241,.12) !important; }

/* Tabel dan DataTables */
.table { color: var(--nx-text); border-color: var(--nx-border) !important; }
.table thead th { color: var(--nx-text-soft); background: var(--nx-surface-2); border-bottom: 1px solid var(--nx-border) !important; font-size: 11px; font-weight: 750; letter-spacing: .035em; text-transform: uppercase; padding: 12px 14px; white-space: nowrap; }
.table tbody td { border-top: 1px solid var(--nx-border) !important; padding: 13px 14px; vertical-align: middle; }
.table tbody tr { transition: background .12s; }
.table-hover tbody tr:hover { background: #fafaff; }
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { border: 1px solid var(--nx-border-strong); border-radius: 8px; min-height: 36px; padding: 5px 10px; }
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--nx-primary); box-shadow: 0 0 0 3px rgba(87,80,241,.1); outline: 0; }
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length label, .dataTables_wrapper .dataTables_filter label { color: var(--nx-text-soft); font-size: 12px; }
.pagination { margin-top: 18px; }
.page-link { color: var(--nx-text-soft); border-color: var(--nx-border); padding: 8px 12px; }
.page-item.active .page-link { background: var(--nx-primary); border-color: var(--nx-primary); }
.page-link:hover { color: var(--nx-primary); background: var(--nx-primary-soft); border-color: #d8d6ff; }

/* Badge, alert, navigasi, progress */
.badge { border-radius: 6px !important; padding: .34em .6em; font-size: 11px; font-weight: 700; letter-spacing: .01em; }
.alert { border: 1px solid transparent; border-radius: var(--nx-radius-sm) !important; padding: 13px 15px; font-size: 13px; box-shadow: none !important; }
.alert-success { color: #065f46; background: #ecfdf5; border-color: #a7f3d0; }
.alert-danger { color: #991b1b; background: #fef2f2; border-color: #fecaca; }
.alert-warning { color: #92400e; background: #fffbeb; border-color: #fde68a; }
.alert-info { color: #1e40af; background: #eff6ff; border-color: #bfdbfe; }
.nav-tabs { border-bottom-color: var(--nx-border); gap: 4px; }
.nav-tabs .nav-link { color: var(--nx-text-soft); border: 0; border-bottom: 2px solid transparent; border-radius: 8px 8px 0 0; font-weight: 650; padding: 9px 14px; }
.nav-tabs .nav-link.active { color: var(--nx-primary); background: var(--nx-primary-soft); border-bottom-color: var(--nx-primary); }
.nav-tabs .nav-link:hover { color: var(--nx-primary); border-color: transparent; }
.progress { background: #eef2f7; border-radius: 20px; height: 7px; box-shadow: none; }

/* Modal, dropdown, footer, loading */
.modal-content { border: 0 !important; border-radius: var(--nx-radius) !important; box-shadow: var(--nx-shadow-lg) !important; }
.modal-header { border-color: var(--nx-border) !important; padding: 17px 21px; align-items: center; }
.modal-title { font-size: 17px; font-weight: 750; }
.modal-body { padding: 21px; color: var(--nx-text); }
.modal-footer { border-color: var(--nx-border) !important; padding: 13px 21px; }
.dropdown-menu { border-color: var(--nx-border); border-radius: 11px; box-shadow: var(--nx-shadow-lg); }
.main-footer { background: var(--nx-surface) !important; color: var(--nx-text-soft) !important; border-top: 1px solid var(--nx-border) !important; padding: 15px 22px; font-size: 12px; }
.main-footer strong { color: var(--nx-text) !important; }
#loading-overlay { background: rgba(247,248,252,.8); backdrop-filter: blur(3px); }

/* Login */

/* ===== LOGIN MODERN — shared admin/siswa ===== */
body.login-modern { background: #f5f7fb; color: var(--nx-text); }
body.login-modern #login-page { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 32px 20px; background: #f5f7fb; }
body.login-modern #login-page::before, body.login-modern #login-page::after { content: ''; position: absolute; pointer-events: none; border-radius: 50%; }
body.login-modern #login-page::before { width: 520px; height: 520px; top: -260px; right: -120px; background: #e8e7ff; }
body.login-modern #login-page::after { width: 360px; height: 360px; bottom: -220px; left: -100px; background: #dff8fb; }
body.login-modern .login-box { position: relative; z-index: 1; width: 100%; max-width: 930px; }
body.login-modern .login-card { display: grid; grid-template-columns: .9fr 1.1fr; min-height: 535px; padding: 0; overflow: hidden; border: 1px solid #e5e9f2; border-radius: 24px; background: #fff; box-shadow: 0 25px 70px rgba(15,23,42,.13); }
body.login-modern .login-brand { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 39px 35px; overflow: hidden; color: #fff; background: linear-gradient(145deg, #111827 0%, #312e81 58%, #5750f1 100%); }
body.login-modern .login-brand::before { content: ''; position: absolute; width: 270px; height: 270px; right: -110px; top: 12%; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; box-shadow: 0 0 0 30px rgba(255,255,255,.04), 0 0 0 60px rgba(255,255,255,.025); }
body.login-modern .login-brand::after { content: ''; position: absolute; width: 180px; height: 180px; left: -90px; bottom: -70px; border-radius: 50%; background: rgba(255,255,255,.06); }
body.login-modern .login-brand > * { position: relative; z-index: 1; }
body.login-modern .login-brand .brand-chip { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 7px 11px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: #d9d8ff; background: rgba(255,255,255,.1); font-size: 11px; font-weight: 700; }
body.login-modern .login-brand h1 { margin: 28px 0 10px; color: #fff; font-size: 28px; font-weight: 800; letter-spacing: -.04em; line-height: 1.15; }
body.login-modern .login-brand p { margin: 0; color: #c7c5ff; font-size: 13px; line-height: 1.65; }
body.login-modern .login-brand .brand-footer { display: flex; align-items: center; gap: 10px; color: #c7c5ff; font-size: 11px; }
body.login-modern .login-brand .brand-footer strong { display: block; color: #fff; font-size: 12px; }
body.login-modern .login-logo-img { width: 64px !important; height: 64px !important; margin: 0 0 4px !important; border-radius: 15px !important; object-fit: contain; }
body.login-modern .login-form-panel { display: flex; flex-direction: column; justify-content: center; padding: 45px 52px; }
body.login-modern .login-form-panel .logo-text { justify-content: flex-start; color: var(--nx-text); font-size: 24px; font-weight: 800; letter-spacing: -.035em; }
body.login-modern .login-form-panel .logo-text i, body.login-modern .login-form-panel .logo-text .nx-icon { color: var(--nx-primary); }
body.login-modern .login-form-panel .logo-sub { margin: 7px 0 28px; color: var(--nx-text-soft); font-size: 12px; line-height: 1.5; }
body.login-modern .form-group { margin-bottom: 17px; }
body.login-modern .form-group label { display: block; margin-bottom: 7px; color: var(--nx-text-soft); font-size: 12px; font-weight: 700; }
body.login-modern .form-control { min-height: 47px; border: 1px solid #dbe1ec; border-radius: 11px; color: var(--nx-text); background: #fbfcfe; box-shadow: none; font-size: 13px; }
body.login-modern .form-control::placeholder { color: #9aa7b8; }
body.login-modern .form-control:focus { border-color: var(--nx-primary); background: #fff; box-shadow: 0 0 0 4px rgba(87,80,241,.11) !important; }

#login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(circle at 15% 20%, #e8e7ff 0, transparent 36%), radial-gradient(circle at 90% 90%, #dff8fb 0, transparent 30%), var(--nx-bg); }
.login-box { width: 100%; max-width: 455px; margin: auto; }
.login-card { padding: 34px 36px 30px; border: 1px solid rgba(226,232,240,.9); border-radius: 20px; background: rgba(255,255,255,.94); box-shadow: 0 22px 60px rgba(15,23,42,.11); }
.login-logo-img { border: 0 !important; box-shadow: none !important; background: transparent; }
.logo-text { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--nx-text); font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.logo-sub { color: var(--nx-text-soft); font-size: 12px; margin: 5px 0 25px; }
.btn-login { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 10px; padding: 12px 18px; color: #fff; background: var(--nx-primary); font-weight: 700; box-shadow: 0 8px 18px rgba(87,80,241,.22); transition: .18s ease; }
body.login-modern .password-wrap { position: relative; }
body.login-modern .password-wrap .form-control { padding-right: 45px; }
body.login-modern .password-toggle { position: absolute; top: 50%; right: 12px; display: flex; align-items: center; justify-content: center; width: 25px; height: 25px; padding: 0; border: 0; color: #8b98aa; background: transparent; transform: translateY(-50%); cursor: pointer; }
body.login-modern .password-toggle:hover { color: var(--nx-primary); }
body.login-modern .password-toggle .nx-icon { width: 17px; height: 17px; }
body.login-modern .btn-login { min-height: 48px; margin-top: 4px; border-radius: 11px; font-size: 13px; }
body.login-modern .btn-login .nx-icon, body.login-modern .btn-login i { width: 17px; height: 17px; }
body.login-modern .login-siswa-link { margin-top: 23px; padding-top: 18px; border-top: 1px solid #edf0f5; color: var(--nx-primary); font-size: 12px; }
body.login-modern .login-siswa-link:hover { color: var(--nx-primary-hover); opacity: 1; }
body.login-modern .info-box-login { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 22px !important; padding: 12px 14px !important; font-size: 11px !important; line-height: 1.5; }
body.login-modern .info-box-login i, body.login-modern .info-box-login .nx-icon { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 1px; }
body.login-modern .login-back { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 23px; padding-top: 18px; border-top: 1px solid #edf0f5; color: var(--nx-primary); font-size: 12px; font-weight: 650; text-decoration: none; }
body.login-modern .login-back:hover { color: var(--nx-primary-hover); text-decoration: none; }
body.login-modern .login-back .nx-icon, body.login-modern .login-back i { width: 15px; height: 15px; }
@media (max-width: 767.98px) { body.login-modern #login-page { padding: 16px; } body.login-modern .login-card { display: block; min-height: 0; border-radius: 19px; } body.login-modern .login-brand { min-height: 205px; padding: 24px 25px; } body.login-modern .login-brand h1 { margin: 20px 0 5px; font-size: 23px; } body.login-modern .login-brand p { font-size: 12px; } body.login-modern .login-brand .brand-footer { display: none; } body.login-modern .login-form-panel { padding: 31px 25px 25px; } body.login-modern .login-form-panel .logo-text { font-size: 21px; } }

.btn-login:hover { background: var(--nx-primary-hover); transform: translateY(-1px); color: #fff; }
.info-box-login { background: var(--nx-primary-soft) !important; border: 1px solid #dcd9ff !important; color: #4338ca !important; border-radius: 10px !important; }

/* SweetAlert2 */
.swal2-popup { border-radius: var(--nx-radius) !important; font-family: inherit !important; }
.swal2-confirm.swal2-styled { background: var(--nx-primary) !important; border-radius: 9px !important; box-shadow: none !important; }
.swal2-cancel.swal2-styled { background: #f1f5f9 !important; color: var(--nx-text-soft) !important; border-radius: 9px !important; box-shadow: none !important; }

/* Responsif */
@media (max-width: 991.98px) {
  .content { padding-left: 15px; padding-right: 15px; }
  .content-header { padding-top: 16px; }
  .main-header .nav-link { padding: .55rem !important; }
  #nav-user-name { display: none; }
}
@media (max-width: 575.98px) {
  .card-body { padding: 15px; }
  .card-header { padding: 14px 15px !important; }
  .login-card { padding: 27px 21px 23px; }
  .logo-text { font-size: 19px; }
  .dataTables_wrapper .dataTables_filter { margin-top: 10px; }
}

/* Mode gelap opsional (aktif melalui body.nx-dark) */
body.nx-dark {
  --nx-bg: #0f172a; --nx-surface: #111c31; --nx-surface-2: #172338; --nx-sidebar: #111827;
  --nx-text: #e5e7eb; --nx-text-soft: #9ca3af; --nx-border: #263248; --nx-border-strong: #35435d;
  background: var(--nx-bg); color: var(--nx-text);
}
body.nx-dark .main-header.navbar { background: rgba(17,24,39,.92) !important; }
body.nx-dark .main-sidebar { background: var(--nx-sidebar) !important; }
body.nx-dark .card, body.nx-dark .main-footer, body.nx-dark .dropdown-menu { background: var(--nx-surface) !important; }
body.nx-dark .table, body.nx-dark .form-control, body.nx-dark .custom-select { color: var(--nx-text) !important; background-color: var(--nx-surface-2) !important; }
body.nx-dark .nav-sidebar .nav-link, body.nx-dark label { color: var(--nx-text-soft) !important; }
body.nx-dark .login-card { background: rgba(17,28,49,.96); }


/* ===== SIDEBAR GELAP — final visual layer ===== */
body .main-sidebar,
body .main-sidebar.sidebar,
body .main-sidebar .sidebar { background: #111827 !important; }
body .main-sidebar { border-right: 0 !important; box-shadow: 8px 0 28px rgba(15,23,42,.08) !important; }
body .main-sidebar .brand-link { background: #111827 !important; border-bottom-color: rgba(255,255,255,.08) !important; }
body .main-sidebar .brand-link .brand-text { filter: brightness(0) invert(1); opacity: .94; height: 46px !important; margin: auto !important; }
body .main-sidebar .sidebar .nav-sidebar .nav-item > .nav-link { color: #aab6c8 !important; border-radius: 10px !important; }
body .main-sidebar .sidebar .nav-sidebar .nav-item > .nav-link:hover { color: #fff !important; background: #1f2937 !important; }
body .main-sidebar .sidebar .nav-sidebar .nav-item > .nav-link.active { color: #fff !important; background: linear-gradient(90deg, #5750f1, #6d67f5) !important; box-shadow: 0 8px 18px rgba(87,80,241,.22) !important; }
body .main-sidebar .sidebar .nav-sidebar .nav-item > .nav-link .nav-icon,
body .main-sidebar .sidebar .nav-sidebar .nav-item > .nav-link i { color: #8f9bb0 !important; }
body .main-sidebar .sidebar .nav-sidebar .nav-item > .nav-link.active .nav-icon,
body .main-sidebar .sidebar .nav-sidebar .nav-item > .nav-link.active i { color: #fff !important; }
body .main-sidebar .nav-header { color: #718096 !important; font-size: 10px !important; letter-spacing: .12em; text-transform: uppercase; }
body .main-sidebar .nav-treeview { background: rgba(0,0,0,.12) !important; }
body .main-sidebar .user-panel { border-bottom-color: rgba(255,255,255,.08) !important; }
body .main-sidebar .user-panel .info a { color: #fff !important; }
body .main-sidebar .user-panel .info span { color: #94a3b8 !important; }

/* ===== DASHBOARD v2 ===== */
.dashboard-hero { position: relative; overflow: hidden; margin: 0 0 22px; padding: 27px 30px; border-radius: 18px; color: #fff; background: linear-gradient(120deg, #312e81 0%, #5750f1 56%, #7c3aed 100%); box-shadow: 0 16px 32px rgba(87,80,241,.22); }
.dashboard-hero::after { content: ''; position: absolute; width: 280px; height: 280px; right: -70px; top: -125px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; box-shadow: 0 0 0 30px rgba(255,255,255,.04), 0 0 0 60px rgba(255,255,255,.03); }
.dashboard-hero h2 { position: relative; z-index: 1; margin: 0 0 5px; color: #fff !important; font-size: 25px !important; font-weight: 800 !important; }
.dashboard-hero p { position: relative; z-index: 1; margin: 0; color: #d9d8ff; font-size: 13px; }
.dashboard-hero .hero-mark { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 9px; margin-bottom: 12px; padding: 6px 11px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(255,255,255,.12); font-size: 11px; font-weight: 700; }
.dashboard-hero .hero-mark .nx-icon { width: 14px; height: 14px; }
.dashboard-hero .hero-date { position: relative; z-index: 1; margin-top: 16px; color: #c7c5ff; font-size: 11px; }
.dashboard-hero .hero-date strong { color: #fff; }
.dashboard-section-title { display: flex; align-items: center; gap: 9px; margin: 0 0 13px; color: var(--nx-text-soft); font-size: 12px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.dashboard-section-title::after { content: ''; flex: 1; height: 1px; background: var(--nx-border); }
.chart-card-header small { color: var(--nx-text-muted); font-size: 10px; font-weight: 600; }
.dashboard-hero .hero-date .nx-icon { vertical-align: -2px; }
.dashboard-hero + .row .dash-card, .dashboard-hero ~ .row .dash-card { border: 1px solid var(--nx-border) !important; border-radius: 16px !important; box-shadow: var(--nx-shadow-sm) !important; }
@media (max-width: 575.98px) { .dashboard-hero { padding: 22px 20px; border-radius: 15px; } .dashboard-hero h2 { font-size: 21px !important; } }

/* ===== DASHBOARD ANALYTICS COMPONENTS — final layer ===== */
.nx-stat-card,
.nx-insight-card {
  position: relative;
  height: 100%;
  background: var(--nx-surface) !important;
  border: 1px solid var(--nx-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--nx-shadow-sm) !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.nx-stat-card { display: flex; flex-direction: column; min-height: 154px; padding: 18px 18px 14px; overflow: hidden; }
.nx-stat-card::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--nx-stat-accent, #5750f1); }
.nx-stat-card:hover, .nx-insight-card:hover { transform: translateY(-3px); border-color: var(--nx-border-strong) !important; box-shadow: var(--nx-shadow-lg) !important; }
.nx-stat-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nx-stat-label { color: var(--nx-text-soft); font-size: 12px; font-weight: 700; line-height: 1.35; }
.nx-stat-icon, .nx-insight-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; color: var(--nx-stat-accent, #5750f1); background: var(--nx-stat-soft, var(--nx-primary-soft)); }
.nx-stat-icon i, .nx-insight-icon i, .nx-stat-foot i, .nx-status-badge i { width: 17px; height: 17px; stroke-width: 2; }
.nx-stat-value { display: block; margin-top: 13px; color: var(--nx-text); font-size: 25px; font-weight: 800; line-height: 1.12; letter-spacing: -.025em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-stat-period { font-size: 17px !important; }
.nx-stat-money { font-size: 20px !important; }
.nx-stat-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 13px; color: var(--nx-text-muted); font-size: 11px; font-weight: 600; }
.nx-stat-foot .is-positive { color: #059669; }
.nx-stat-foot .is-negative { color: #e11d48; }
.nx-stat-indigo { --nx-stat-accent: #5750f1; --nx-stat-soft: #eef0ff; }
.nx-stat-cyan { --nx-stat-accent: #0891b2; --nx-stat-soft: #ecfeff; }
.nx-stat-amber { --nx-stat-accent: #d97706; --nx-stat-soft: #fffbeb; }
.nx-stat-violet { --nx-stat-accent: #7c3aed; --nx-stat-soft: #f5f3ff; }
.nx-stat-emerald { --nx-stat-accent: #059669; --nx-stat-soft: #ecfdf5; }
.nx-stat-sky { --nx-stat-accent: #0284c7; --nx-stat-soft: #f0f9ff; }
.nx-stat-rose { --nx-stat-accent: #e11d48; --nx-stat-soft: #fff1f2; }
.nx-insight-card { overflow: hidden; }
.nx-insight-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 19px 21px 15px; border-bottom: 1px solid var(--nx-border); }
.nx-insight-title { display: flex; align-items: center; gap: 11px; min-width: 0; }
.nx-insight-title > div { min-width: 0; }
.nx-insight-title h3 { margin: 0 0 3px; color: var(--nx-text); font-size: 15px; font-weight: 750; }
.nx-insight-title p { margin: 0; color: var(--nx-text-muted); font-size: 11px; font-weight: 500; }
.nx-insight-icon { width: 40px; height: 40px; border-radius: 12px; }
.nx-insight-icon.is-indigo { color: #5750f1; background: #eef0ff; }
.nx-insight-icon.is-emerald { color: #059669; background: #ecfdf5; }
.nx-status-badge { display: inline-flex; align-items: center; flex: 0 0 auto; padding: 5px 9px; border-radius: 999px; font-size: 10px; font-weight: 750; letter-spacing: .02em; }
.nx-status-badge.is-indigo { color: #4338ca; background: #eef0ff; }
.nx-status-badge.is-emerald { color: #047857; background: #ecfdf5; }
.nx-insight-body { height: 285px; padding: 18px 19px 20px; }
.nx-insight-body canvas { width: 100% !important; height: 245px !important; }
.nx-dashboard-user { padding: 14px 18px !important; border: 1px solid var(--nx-border) !important; border-radius: 15px !important; background: var(--nx-surface) !important; box-shadow: var(--nx-shadow-sm) !important; }
body.nx-dark .nx-stat-indigo, body.nx-dark .nx-insight-icon.is-indigo { --nx-stat-soft: #28245c; }
body.nx-dark .nx-stat-cyan { --nx-stat-soft: #123b47; }
body.nx-dark .nx-stat-amber { --nx-stat-soft: #4a3510; }
body.nx-dark .nx-stat-violet { --nx-stat-soft: #38245c; }
body.nx-dark .nx-stat-emerald { --nx-stat-soft: #123d32; }
body.nx-dark .nx-stat-sky { --nx-stat-soft: #12364d; }
body.nx-dark .nx-stat-rose { --nx-stat-soft: #4b1d2c; }
body.nx-dark .nx-insight-head, body.nx-dark .nx-insight-body { border-color: var(--nx-border); }
body.nx-dark .nx-insight-icon.is-indigo { color: #b8b5ff; }
body.nx-dark .nx-insight-icon.is-emerald { color: #6ee7b7; }
body.nx-dark .nx-status-badge.is-indigo { color: #c7d2fe; background: #312e81; }
body.nx-dark .nx-status-badge.is-emerald { color: #a7f3d0; background: #064e3b; }
@media (max-width: 767.98px) { .nx-insight-head { padding: 16px; } .nx-status-badge { display: none; } .nx-insight-body { height: 250px; padding: 14px 10px 16px; } .nx-insight-body canvas { height: 215px !important; } }
@media (max-width: 575.98px) { .nx-stat-card { min-height: 142px; padding: 15px 14px 12px; } .nx-stat-value { font-size: 21px; } .nx-stat-money { font-size: 16px !important; } .nx-stat-label { font-size: 11px; } }

@media print {

  .main-header, .main-sidebar, .main-footer, .content-header, .btn, button { display: none !important; }
  .content-wrapper { margin: 0 !important; background: #fff !important; }
  .card { box-shadow: none !important; border: 1px solid #ddd !important; }
}

.progress-bar { background: var(--nx-primary) !important; border-radius: 20px; }