:root {
    --red: #e30613;
    --red-dark: #b9000b;
    --bg: #f1f2f4;
    --text: #252525;
    --muted: #7a7f87;
    --border: #e5e6e8;
    --sidebar: #ffffff;
}
* { box-sizing: border-box; }
body { margin:0; font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; background:var(--bg); color:var(--text); }
a { text-decoration:none; }
/* Login */
.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#eeeeee 0%,#f7f7f7 55%,#e9e9e9 100%); }
.login-wrapper { width:100%; max-width:440px; padding:20px; }
.login-card { background:#fff; border-radius:20px; padding:34px; border-top:5px solid var(--red); }
.login-brand { text-align:center; margin-bottom:26px; }
.login-logo { width:92px; height:92px; object-fit:contain; margin-bottom:8px; }
.login-brand h1 { font-size:25px; font-weight:800; color:var(--red); margin:0; letter-spacing:1px; }
.login-brand p { margin:2px 0; font-weight:700; letter-spacing:1px; }
.login-brand small { color:var(--muted); }
.form-label { font-weight:600; font-size:14px; }
.input-group-text { background:#fff; border-right:0; color:var(--red); }
.input-group .form-control { border-left:0; }
.form-control:focus { border-color:#ff9ba0; box-shadow:0 0 0 .2rem rgba(227,6,19,.1); }
.btn-wiradhana { background:var(--red); color:#fff; border:0; font-weight:700; border-radius:9px; }
.btn-wiradhana:hover { background:var(--red-dark); color:#fff; }
.login-footer { text-align:center; color:#8a8a8a; font-size:12px; margin-top:15px; }
/* Layout */
.app-shell { min-height:100vh; display:flex; }
.sidebar { width:255px; background:var(--sidebar); border-right:1px solid var(--border); min-height:100vh; position:fixed; left:0; top:0; z-index:1030; display:flex; flex-direction:column; }
.sidebar-brand { padding:20px 18px; display:flex; align-items:center; gap:11px; border-bottom:1px solid var(--border); }
.sidebar-brand img { width:49px; height:49px; object-fit:contain; }
.sidebar-brand strong { display:block; color:var(--red); font-size:17px; line-height:1.1; }
.sidebar-brand span { display:block; font-size:9px; color:#777; letter-spacing:.4px; margin-top:3px; }
.sidebar-nav { padding:15px 12px; flex:1; }
.nav-link { color:#656a72; border-radius:9px; padding:11px 13px; margin-bottom:4px; display:flex; align-items:center; gap:12px; font-size:14px; font-weight:600; }
.nav-link i { font-size:17px; width:20px; text-align:center; }
.nav-link:hover { background:#fff1f2; color:var(--red); }
.nav-link.active { background:var(--red); color:#fff; box-shadow:0 4px 12px rgba(227,6,19,.18); }
.nav-section { font-size:10px; font-weight:800; color:#a0a3a8; letter-spacing:1px; padding:18px 13px 7px; }
.sidebar-bottom { padding:12px; border-top:1px solid var(--border); }
.logout-link { color:#d6000e; }
.main-content { margin-left:255px; width:calc(100% - 255px); min-height:100vh; }
.topbar { height:72px; background:#fff; border-bottom:1px solid var(--border); display:flex; align-items:center; padding:0 25px; gap:16px; position:sticky; top:0; z-index:1000; }
.sidebar-toggle { display:none; color:var(--red); font-size:23px; }
.topbar-title { flex:1; }
.topbar-title span { display:block; font-size:10px; letter-spacing:1px; }
.topbar-title strong { font-size:18px; }
.topbar-user { display:flex; align-items:center; gap:10px; }
.topbar-user strong,.topbar-user small { display:block; }
.topbar-user strong { font-size:13px; }
.topbar-user small { color:#888; font-size:11px; }
.user-avatar { width:38px; height:38px; border-radius:50%; background:#fff0f1; color:var(--red); display:grid; place-items:center; }
.content-area { padding:25px; }
.page-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
.page-heading h2 { font-size:23px; font-weight:800; margin:0; }
.page-heading p { color:var(--muted); margin:3px 0 0; font-size:13px; }
.date-badge { background:#fff; border:1px solid var(--border); padding:9px 13px; border-radius:8px; font-size:12px; color:#666; }
.stat-card { background:#fff; border:1px solid var(--border); border-radius:12px; padding:18px; display:flex; align-items:center; gap:14px; min-height:104px; }
.stat-icon { width:48px; height:48px; border-radius:11px; display:grid; place-items:center; font-size:21px; }
.stat-icon.red { background:#ffeaec; color:var(--red); }.stat-icon.dark{background:#ececef;color:#34343a}.stat-icon.orange{background:#fff0df;color:#d77a00}.stat-icon.gray{background:#edf0f2;color:#67717a}.stat-icon.green{background:#e9f7ef;color:#21864d}.stat-icon.blue{background:#eaf3ff;color:#2c73c9}.stat-icon.purple{background:#f2ebff;color:#7a43c2}
.stat-info span { display:block; color:#7d8289; font-size:12px; margin-bottom:5px; }.stat-info strong { font-size:23px; }
.content-card { background:#fff; border:1px solid var(--border); border-radius:12px; padding:20px; }
.card-heading { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #eee; padding-bottom:14px; margin-bottom:20px; }.card-heading h5 { margin:0; font-size:16px; font-weight:800; }.card-heading small { color:#888; }
.chart-placeholder { display:flex; align-items:center; justify-content:center; gap:55px; min-height:235px; }
.donut { width:165px; height:165px; border-radius:50%; background:conic-gradient(var(--red) 0 var(--p1), #303036 var(--p1) calc(var(--p1) + var(--p2)), #f3a33b calc(var(--p1) + var(--p2)) 100%); display:grid; place-items:center; }
.donut > div { width:108px; height:108px; border-radius:50%; background:#fff; display:grid; place-items:center; align-content:center; }.donut strong{font-size:24px}.donut small{color:#888}
.legend-list { min-width:220px; }.legend-list div { display:flex; align-items:center; gap:9px; padding:9px 0; color:#666; font-size:13px; border-bottom:1px dashed #eee; }.legend-list strong{margin-left:auto;color:#222}.dot{width:9px;height:9px;border-radius:50%;display:inline-block}.red-dot{background:var(--red)}.dark-dot{background:#303036}.orange-dot{background:#f3a33b}
.quick-menu a { display:flex; align-items:center; gap:12px; padding:15px 5px; color:#555; border-bottom:1px solid #eee; font-size:13px; }.quick-menu a > i:first-child { color:var(--red); font-size:18px; }.quick-menu a > i:last-child { margin-left:auto; color:#aaa; }.quick-menu a:hover{color:var(--red)}
.footer { padding:20px 25px; color:#92969b; font-size:11px; }
@media (max-width: 900px) { .sidebar{transform:translateX(-100%);transition:.2s}.sidebar.show{transform:translateX(0)}.main-content{margin-left:0;width:100%}.sidebar-toggle{display:block}.chart-placeholder{gap:25px} }
@media (max-width: 575px) { .content-area{padding:16px}.topbar{padding:0 16px}.page-heading{align-items:flex-start;gap:10px;flex-direction:column}.date-badge{display:none}.chart-placeholder{flex-direction:column}.login-card{padding:25px}.stat-info strong{font-size:21px} }
.table thead th { font-size:12px; color:#6d7279; white-space:nowrap; background:#fafafa; }
.table tbody td { font-size:12px; }
.page-link { color:var(--red); }
.page-item.active .page-link { background:var(--red); border-color:var(--red); }
.form-select:focus { border-color:#ff9ba0; box-shadow:0 0 0 .2rem rgba(227,6,19,.1); }

/* v6.2 - Data Master aligned with Report UI */
.content-card{background:#fff;border:1px solid #e7e9ed;border-radius:14px;padding:18px;box-shadow:0 6px 24px rgba(20,25,35,.06)}
.page-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}
.page-heading h2{font-weight:800;margin:0 0 4px}
.page-heading p{color:#747b84;margin:0}
.card-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:16px}
.card-heading h5{font-weight:750;margin:0 0 3px}.card-heading small{color:#747b84}
.btn-wiradhana{background:#c8102e;border-color:#c8102e;color:#fff;border-radius:9px}.btn-wiradhana:hover{background:#a90d26;border-color:#a90d26;color:#fff}
.stat-card{height:100%;background:#fff;border:1px solid #e7e9ed;border-radius:14px;padding:17px;display:flex;align-items:center;gap:14px;box-shadow:0 6px 24px rgba(20,25,35,.06)}
.stat-icon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:20px}.stat-icon.red{background:#fff0f2;color:#c8102e}.stat-icon.green{background:#edf9f0;color:#16833b}.stat-icon.dark{background:#f0f1f3;color:#555}
.stat-info{display:flex;flex-direction:column;gap:2px}.stat-info span{font-size:13px;color:#747b84}.stat-info strong{font-size:25px;line-height:1.1}
.data-master-filter{background:#fff;border:1px solid #e7e9ed;border-radius:14px;padding:16px;box-shadow:0 6px 24px rgba(20,25,35,.06)}
.table thead th{background:#fafbfc}

/* v6.4 - Data Nasabah refinement */
.stat-icon.blue{background:#eef5ff;color:#1769d1}
.stat-info small{font-size:11px;color:#8a919a}
.btn-add-data{padding:.72rem 1.15rem;border-radius:10px;font-weight:700}
.nasabah-table thead th{white-space:nowrap;font-size:13px;font-weight:700}
.nasabah-table tbody td{font-size:13px}
.nasabah-table .address-cell{min-width:170px;max-width:260px}
.action-btn{width:32px;height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;margin:0 2px;border-radius:8px}
.input-group .input-group-text{border-left:0}
.input-group .form-control:focus + .input-group-text{border-color:#c8102e}
.pagination .page-link{color:#c8102e}
.pagination .active .page-link{background:#c8102e;border-color:#c8102e;color:#fff}
@media(max-width:1200px){.nasabah-table{min-width:1050px}}

/* v6.5 - Data Master visual alignment and overflow fix */
.main-content{min-width:0;overflow-x:hidden}
.content-area{width:100%;max-width:1600px;margin:0 auto;padding:25px}
.page-heading{min-width:0}
.page-heading>div:first-child{min-width:0}
.page-heading h2,.page-heading p{overflow-wrap:anywhere}
.page-heading .btn-wiradhana{white-space:nowrap;flex:0 0 auto}
.content-card{min-width:0;overflow:hidden}
.content-card .table-responsive{overflow-x:auto}
@media (max-width:1100px){
  .page-heading{align-items:flex-start}
  .page-heading .btn-wiradhana{font-size:13px}
}
@media (max-width:768px){
  .content-area{padding:16px}
  .page-heading{flex-direction:column}
  .page-heading .btn-wiradhana{width:100%}
}



/* v6.9 - Logout sidebar */
.sidebar-bottom{
    margin-top:auto;
    padding:12px;
    border-top:1px solid var(--border);
    background:#fff;
}
.sidebar-bottom .logout-link{
    color:#d6000e !important;
    margin-bottom:0;
}
.sidebar-bottom .logout-link:hover{
    background:#fff1f2;
    color:#b9000b !important;
}

/* v7.0 - Logout selalu terlihat di bagian bawah sidebar */
.sidebar{
    overflow:hidden;
}
.sidebar-nav{
    min-height:0;
    overflow-y:auto;
    padding-bottom:85px;
    scrollbar-width:thin;
}
.sidebar-bottom{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:5;
    padding:12px 12px 14px;
    border-top:1px solid var(--border);
    background:#fff;
}
.sidebar-bottom .logout-link{
    width:100%;
    margin:0;
    color:#d6000e !important;
    background:#fff;
    border-radius:9px;
}
.sidebar-bottom .logout-link:hover{
    background:#fff1f2;
    color:#b9000b !important;
}
@media (max-width:900px){
    .sidebar-bottom{display:block;}
}

.sidebar-nav {
    padding:15px 12px;
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:thin;
    scrollbar-color:#c8102e #f3f4f6;
}
.sidebar-nav::-webkit-scrollbar{width:7px;}
.sidebar-nav::-webkit-scrollbar-track{background:#f3f4f6;border-radius:10px;}
.sidebar-nav::-webkit-scrollbar-thumb{background:#c8102e;border-radius:10px;}
.sidebar-nav::-webkit-scrollbar-thumb:hover{background:#a90d23;}
/* v7.0 - Sidebar vertical scroll */
.sidebar{
    height:100vh;
    overflow:hidden;
}
.sidebar-nav{
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
}


/* v7.0 - Area Logout terpisah di bagian paling bawah */
.sidebar{
    display:flex;
    flex-direction:column;
}
.sidebar-nav{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
}
.sidebar-bottom{
    flex:0 0 auto;
    padding:12px 16px;
    border-top:1px solid var(--border);
    background:#fff;
}
.logout-bottom-link{
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
    box-sizing:border-box;
    padding:12px 14px;
    border-radius:9px;
    color:var(--red) !important;
    text-decoration:none;
    font-weight:700;
    transition:background .2s ease,color .2s ease;
}
.logout-bottom-link:hover{
    background:#fff1f2;
    color:var(--red-dark) !important;
}
.logout-bottom-link i{
    font-size:19px;
}

/* v7.0 - Print laporan bersih */
@media print {
  @page { size: A4 portrait; margin: 12mm; }

  html, body {
    background:#fff !important;
    margin:0 !important;
    padding:0 !important;
    width:100% !important;
  }

  /* Semua navigasi/header aplikasi */
  .sidebar, .sidebar-bottom, .sidebar-brand,
  .topbar, .navbar, .header, nav, aside, footer {
    display:none !important;
  }

  /* Semua tombol/aksi/menu interaktif */
  button, .btn, .btn-print, .btn-cetak, .print-button,
  .action-buttons, .toolbar, .report-actions, .no-print,
  a[href*="export"], a[href*="cetak"], a[href*="print"] {
    display:none !important;
  }

  /* Filter dan kartu ringkasan */
  .filter-card, .filter-panel, .filter-box, .search-filter,
  .report-filter, .filter-form, .stat-card, .stats-grid,
  .statistics, .summary-cards, .summary-card,
  .dashboard-card, .quick-access, .quick-actions, .date-card {
    display:none !important;
  }

  .main-content {
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    min-height:0 !important;
  }

  .content-area, .report-content, .report-page,
  .container, .container-fluid {
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    background:#fff !important;
    box-shadow:none !important;
  }

  .page-heading {
    margin:0 0 8mm !important;
    padding:0 !important;
  }

  .card, .table-card, .report-card {
    border:0 !important;
    box-shadow:none !important;
    background:#fff !important;
    margin:0 !important;
    padding:0 !important;
  }

  table {
    width:100% !important;
    border-collapse:collapse !important;
    page-break-inside:auto;
  }

  thead { display:table-header-group; }
  tr { page-break-inside:avoid; page-break-after:auto; }

  th, td {
    border:1px solid #777 !important;
    padding:5px !important;
    color:#000 !important;
    background:#fff !important;
  }

  a {
    color:#000 !important;
    text-decoration:none !important;
  }
}

/* v7.0 - Menu Pengaturan */
.sidebar-nav{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
}
.sidebar-bottom{
    flex:0 0 auto;
}

/* v7.0 - FINAL SIDEBAR SCROLL FIX
   Menu (termasuk PENGATURAN) berada di area scroll sendiri.
   Logout tetap berada di area terpisah paling bawah. */
.sidebar{
    height:100vh !important;
    height:100dvh !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
}
.sidebar-brand{
    flex:0 0 auto !important;
}
.sidebar-nav{
    flex:1 1 auto !important;
    min-height:0 !important;
    height:auto !important;
    max-height:none !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding-bottom:24px !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:thin !important;
    scrollbar-color:#c8102e #f3f4f6 !important;
}
.sidebar-nav::-webkit-scrollbar{width:8px !important;}
.sidebar-nav::-webkit-scrollbar-track{background:#f3f4f6 !important;}
.sidebar-nav::-webkit-scrollbar-thumb{background:#c8102e !important;border-radius:10px !important;}
.sidebar-bottom{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    flex:0 0 auto !important;
    width:100% !important;
    box-sizing:border-box !important;
    z-index:10 !important;
    background:#fff !important;
    border-top:1px solid var(--border) !important;
}
@media (max-height:700px){
    .sidebar-nav{padding-bottom:18px !important;}
}