/* =========================================================
   Modern UI Upgrade - Si-MasBay
   Fokus: tampilan lebih modern, elegan, profesional, hidup,
   tanpa mengubah proses database dan alur fungsi aplikasi.
   ========================================================= */
:root{
  --modern-primary:#2563eb;
  --modern-primary-2:#06b6d4;
  --modern-secondary:#7c3aed;
  --modern-accent:#22c55e;
  --modern-warning:#f59e0b;
  --modern-danger:#ef4444;
  --modern-dark:#0f172a;
  --modern-muted:#64748b;
  --modern-bg:#eef6ff;
  --modern-card:rgba(255,255,255,.88);
  --modern-border:rgba(148,163,184,.24);
  --modern-shadow:0 18px 50px rgba(15,23,42,.12);
  --modern-shadow-soft:0 10px 28px rgba(15,23,42,.10);
  --modern-radius:22px;
}

html,body{min-height:100%;}
body.hold-transition,
body.skin-blue,
body.skin-blue-light,
body.skin-purple,
body.skin-purple-light,
body.skin-green,
body.skin-green-light,
body.skin-red,
body.skin-red-light,
body.skin-yellow,
body.skin-yellow-light{
  background:
    radial-gradient(circle at 12% 10%, rgba(37,99,235,.22), transparent 28%),
    radial-gradient(circle at 88% 0%, rgba(6,182,212,.24), transparent 30%),
    radial-gradient(circle at 85% 88%, rgba(124,58,237,.15), transparent 32%),
    linear-gradient(135deg,#f8fbff 0%,#eef6ff 45%,#f7fbff 100%) !important;
  color:#1f2937;
  font-family:"Inter","Segoe UI",Roboto,Arial,sans-serif;
}

body:before,
body:after{
  content:"";
  position:fixed;
  z-index:-1;
  pointer-events:none;
  filter:blur(2px);
  opacity:.75;
  animation:modernFloat 12s ease-in-out infinite alternate;
}
body:before{width:290px;height:290px;border-radius:55px;top:110px;right:50px;background:linear-gradient(135deg,rgba(37,99,235,.13),rgba(6,182,212,.13));transform:rotate(15deg);}
body:after{width:210px;height:210px;border-radius:999px;bottom:55px;left:245px;background:linear-gradient(135deg,rgba(124,58,237,.13),rgba(34,197,94,.11));animation-delay:-3s;}
@keyframes modernFloat{from{transform:translate3d(0,0,0) rotate(8deg);}to{transform:translate3d(18px,-20px,0) rotate(18deg);}}
@keyframes modernFadeUp{from{opacity:0;transform:translate3d(0,18px,0);}to{opacity:1;transform:translate3d(0,0,0);}}
@keyframes modernPulse{0%,100%{transform:scale(1);box-shadow:0 0 0 rgba(37,99,235,0);}50%{transform:scale(1.045);box-shadow:0 0 0 12px rgba(37,99,235,.08);}}
@keyframes modernShimmer{0%{background-position:-220% 0;}100%{background-position:220% 0;}}
@keyframes modernSpinGlow{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}

/* Layout */
.wrapper{background:transparent !important;}
.content-wrapper,
.right-side{
  background:transparent !important;
  min-height:calc(100vh - 52px) !important;
}
.content{padding:22px !important;}
.content-header{padding:22px 24px 0 !important;}
.content-header h1{
  display:inline-flex;align-items:center;gap:10px;
  margin:0 0 8px;
  padding:12px 18px;
  font-size:22px;
  font-weight:800;
  color:var(--modern-dark);
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.78);
  border-radius:18px;
  box-shadow:0 10px 30px rgba(15,23,42,.06);
  backdrop-filter:blur(16px);
}
.content-header h1 .fa{color:var(--modern-primary);}

/* Header */
.main-header{
  position:sticky;top:0;z-index:1030;
  box-shadow:0 12px 35px rgba(15,23,42,.12);
}
.main-header .logo,
.skin-blue .main-header .logo,
.skin-purple .main-header .logo,
.skin-green .main-header .logo,
.skin-red .main-header .logo,
.skin-yellow .main-header .logo,
.skin-blue-light .main-header .logo,
.skin-purple-light .main-header .logo,
.skin-green-light .main-header .logo,
.skin-red-light .main-header .logo,
.skin-yellow-light .main-header .logo{
  height:58px !important;
  line-height:58px !important;
  background:linear-gradient(135deg,#0f172a,#1d4ed8 65%,#06b6d4) !important;
  color:#fff !important;
  border-right:1px solid rgba(255,255,255,.14);
  overflow:hidden;
}
.main-header .logo:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.20) 45%,transparent 70%);
  background-size:220% 100%;
  animation:modernShimmer 5s linear infinite;
}
.main-header .logo .logo-lg,
.main-header .logo .logo-mini{position:relative;z-index:1;font-weight:900;letter-spacing:.2px;}
.main-header .logo .logo-mini{font-size:15px;}
.main-header .navbar,
.skin-blue .main-header .navbar,
.skin-purple .main-header .navbar,
.skin-green .main-header .navbar,
.skin-red .main-header .navbar,
.skin-yellow .main-header .navbar,
.skin-blue-light .main-header .navbar,
.skin-purple-light .main-header .navbar,
.skin-green-light .main-header .navbar,
.skin-red-light .main-header .navbar,
.skin-yellow-light .main-header .navbar{
  min-height:58px !important;
  background:rgba(255,255,255,.82) !important;
  border:0 !important;
  backdrop-filter:blur(18px);
}
.main-header .sidebar-toggle{height:58px;line-height:28px;color:#0f172a !important;border-radius:0 18px 18px 0;transition:.25s ease;}
.main-header .sidebar-toggle:hover{background:rgba(37,99,235,.10) !important;color:var(--modern-primary) !important;}
.navbar-custom-menu>.navbar-nav>li>a{line-height:28px;color:#0f172a !important;transition:.25s ease;}
.navbar-custom-menu>.navbar-nav>li>a:hover{background:rgba(37,99,235,.08) !important;color:var(--modern-primary) !important;}
.navbar-nav>.user-menu .user-image{border:2px solid rgba(37,99,235,.22);box-shadow:0 6px 14px rgba(37,99,235,.18);}
.navbar-nav>.user-menu>.dropdown-menu{
  border:0;border-radius:20px;overflow:hidden;box-shadow:var(--modern-shadow);padding:0;margin-top:8px;
}
.navbar-nav>.user-menu>.dropdown-menu>.user-header{
  background:linear-gradient(135deg,var(--modern-primary),var(--modern-secondary)) !important;
  min-height:175px;
}
.navbar-nav>.user-menu>.dropdown-menu>.user-footer{background:#f8fafc;padding:14px;}

/* Sidebar */
.main-sidebar,
.left-side{
  padding-top:58px !important;
  background:linear-gradient(180deg,#0f172a 0%,#172554 55%,#0e7490 100%) !important;
  box-shadow:16px 0 35px rgba(15,23,42,.18);
}
.sidebar{padding:14px 12px 24px;}
.sidebar .user-panel{
  margin:6px 0 16px;padding:14px 12px !important;border-radius:22px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.sidebar .user-panel:before{content:"";display:block;clear:both;}
.sidebar .user-panel>.image>img{border:3px solid rgba(255,255,255,.35);box-shadow:0 10px 24px rgba(0,0,0,.20);}
.sidebar .user-panel>.info{position:static !important;left:auto !important;padding-left:12px;white-space:normal;}
.sidebar .user-panel>.info>p{font-weight:800;color:#fff;margin-bottom:5px;}
.sidebar .user-panel>.info>a{font-size:11px;color:rgba(255,255,255,.78);}
.sidebar-menu>li.header{
  color:rgba(255,255,255,.72) !important;
  background:transparent !important;
  letter-spacing:.08em;
  font-weight:800;
  font-size:10px;
  padding:10px 14px;
}
.sidebar-menu>li>a,
.sidebar-menu .treeview-menu>li>a{
  border-radius:15px;
  margin:3px 0;
  color:rgba(255,255,255,.82) !important;
  transition:all .23s ease;
}
.sidebar-menu>li>a{padding:12px 12px 12px 14px !important;}
.sidebar-menu .treeview-menu{background:rgba(255,255,255,.06) !important;border-radius:16px;margin:4px 0 8px;padding:7px;}
.sidebar-menu .treeview-menu>li>a{padding:9px 10px 9px 18px !important;font-size:13px;}
.sidebar-menu>li>a>.fa,
.sidebar-menu .treeview-menu>li>a>.fa{
  width:30px;height:30px;line-height:30px;text-align:center;border-radius:12px;
  background:rgba(255,255,255,.12);
  color:#fff !important;
  margin-right:6px;
  transition:.23s ease;
}
.sidebar-menu>li:hover>a,
.sidebar-menu>li.active>a,
.sidebar-menu .treeview-menu>li.active>a,
.sidebar-menu .treeview-menu>li>a:hover{
  background:rgba(255,255,255,.16) !important;
  color:#fff !important;
  transform:translateX(4px);
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.sidebar-menu>li:hover>a>.fa,
.sidebar-menu>li.active>a>.fa,
.sidebar-menu .treeview-menu>li.active>a>.fa,
.sidebar-menu .treeview-menu>li>a:hover>.fa{
  background:linear-gradient(135deg,var(--modern-primary-2),var(--modern-primary));
  animation:modernPulse 1.8s ease-in-out infinite;
}
.sidebar-menu li>a>.pull-right-container,
.sidebar-menu li>a>.fa-angle-left{margin-top:8px;}

/* Cards, boxes, dashboard */
.box,
.panel,
.nav-tabs-custom,
.callout,
.well{
  border:1px solid rgba(255,255,255,.76) !important;
  border-radius:var(--modern-radius) !important;
  background:var(--modern-card) !important;
  box-shadow:var(--modern-shadow-soft) !important;
  backdrop-filter:blur(16px);
  overflow:hidden;
  animation:modernFadeUp .45s ease both;
}
.box{border-top:0 !important;}
.box.box-primary,
.box.box-success,
.box.box-info,
.box.box-warning,
.box.box-danger{border-top:0 !important;}
.box.box-solid>.box-header,
.box>.box-header,
.panel-heading{
  color:#0f172a !important;
  background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(239,246,255,.82)) !important;
  border-bottom:1px solid rgba(148,163,184,.18) !important;
  padding:15px 18px !important;
}
.box.box-primary.box-solid>.box-header,
.box.box-info.box-solid>.box-header,
.box.box-success.box-solid>.box-header,
.box.box-warning.box-solid>.box-header,
.box.box-danger.box-solid>.box-header{
  background:linear-gradient(135deg,var(--modern-primary),var(--modern-primary-2)) !important;
  color:#fff !important;
}
.box-header .box-title,
.panel-title{font-weight:850;letter-spacing:.1px;}
.box-body,.panel-body{padding:18px !important;}
.info-box,
.small-box{
  position:relative;
  border:1px solid rgba(255,255,255,.76);
  border-radius:22px !important;
  background:rgba(255,255,255,.90) !important;
  box-shadow:var(--modern-shadow-soft);
  overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease;
  animation:modernFadeUp .5s ease both;
}
.info-box:before,
.small-box:before{
  content:"";position:absolute;right:-35px;top:-35px;width:100px;height:100px;border-radius:999px;background:rgba(37,99,235,.10);
}
.info-box:hover,.small-box:hover{transform:translateY(-5px);box-shadow:0 20px 42px rgba(15,23,42,.15);}
.info-box-icon{
  width:86px !important;
  height:92px !important;
  line-height:92px !important;
  border-radius:0 24px 24px 0 !important;
  box-shadow:12px 0 25px rgba(15,23,42,.10);
}
.info-box-icon .fa,.small-box .icon{filter:drop-shadow(0 8px 14px rgba(15,23,42,.18));}
.info-box-content{padding:15px 14px;margin-left:92px !important;}
.info-box-text{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--modern-muted);}
.info-box-number{font-size:19px;color:#0f172a;white-space:normal;line-height:1.25;}
.bg-aqua,.bg-blue{background:linear-gradient(135deg,#2563eb,#06b6d4) !important;color:#fff !important;}
.bg-green{background:linear-gradient(135deg,#16a34a,#22c55e) !important;color:#fff !important;}
.bg-yellow{background:linear-gradient(135deg,#f59e0b,#f97316) !important;color:#fff !important;}
.bg-red{background:linear-gradient(135deg,#ef4444,#f43f5e) !important;color:#fff !important;}
.bg-purple{background:linear-gradient(135deg,#7c3aed,#a855f7) !important;color:#fff !important;}

/* Forms */
.form-control,
select.form-control,
textarea.form-control,
.input-group-addon,
.select2-container--default .select2-selection--single{
  border-radius:14px !important;
  border:1px solid rgba(148,163,184,.32) !important;
  box-shadow:none !important;
}
.form-control,
select.form-control,
textarea.form-control{
  min-height:40px;
  background:rgba(255,255,255,.86) !important;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.form-control:focus,
select.form-control:focus,
textarea.form-control:focus{
  border-color:rgba(37,99,235,.65) !important;
  box-shadow:0 0 0 4px rgba(37,99,235,.10) !important;
  background:#fff !important;
}
.input-group-addon{background:#f8fafc !important;color:var(--modern-primary);font-weight:700;}
label{color:#334155;font-weight:700;}

/* Buttons */
.btn,
.button,
input[type="submit"],
button{
  border-radius:14px !important;
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}
.btn:hover,.button:hover,input[type="submit"]:hover,button:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(15,23,42,.14);}
.btn-primary,.btn-info,.btn-success,.button,input[type="submit"]{
  border:0 !important;
  color:#fff !important;
  background:linear-gradient(135deg,var(--modern-primary),var(--modern-primary-2)) !important;
  box-shadow:0 12px 24px rgba(37,99,235,.23);
  font-weight:800;
}
.btn-success{background:linear-gradient(135deg,#16a34a,#22c55e) !important;}
.btn-warning{border:0 !important;color:#fff !important;background:linear-gradient(135deg,#f59e0b,#f97316) !important;font-weight:800;}
.btn-danger{border:0 !important;color:#fff !important;background:linear-gradient(135deg,#ef4444,#f43f5e) !important;font-weight:800;}
.btn-default{border:1px solid rgba(148,163,184,.25) !important;background:#fff !important;color:#0f172a !important;font-weight:700;}
.btn .fa{margin-right:4px;}
.btn-xs,.btn-sm{border-radius:12px !important;}

/* Tables */
.table-responsive{border:0 !important;border-radius:18px;}
table.table,
.table{background:rgba(255,255,255,.88);border-radius:18px;overflow:hidden;}
.table>thead>tr>th,
.table-bordered>thead>tr>th{
  background:linear-gradient(135deg,#0f172a,#1d4ed8) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.14) !important;
  font-weight:800;
  vertical-align:middle !important;
}
.table>tbody>tr>td,
.table-bordered>tbody>tr>td{border-color:rgba(148,163,184,.18) !important;vertical-align:middle !important;}
.table-striped>tbody>tr:nth-of-type(odd){background-color:rgba(239,246,255,.72) !important;}
.table-hover>tbody>tr:hover,
.table>tbody>tr:hover{background:rgba(37,99,235,.07) !important;}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{border-radius:14px;border:1px solid rgba(148,163,184,.32);padding:7px 10px;}
.pagination>li>a,
.pagination>li>span{border-radius:12px !important;margin:0 2px;border:1px solid rgba(148,163,184,.24);color:var(--modern-primary);}
.pagination>.active>a,
.pagination>.active>span{background:linear-gradient(135deg,var(--modern-primary),var(--modern-primary-2)) !important;border-color:transparent !important;}

/* Alerts and modals */
.alert{border:0 !important;border-radius:18px !important;box-shadow:var(--modern-shadow-soft);}
.alert-success{background:linear-gradient(135deg,rgba(22,163,74,.92),rgba(34,197,94,.86)) !important;color:#fff !important;}
.alert-danger{background:linear-gradient(135deg,rgba(239,68,68,.92),rgba(244,63,94,.86)) !important;color:#fff !important;}
.alert-warning{background:linear-gradient(135deg,rgba(245,158,11,.92),rgba(249,115,22,.86)) !important;color:#fff !important;}
.modal-content{border:0;border-radius:24px;box-shadow:var(--modern-shadow);overflow:hidden;}
.modal-header{background:linear-gradient(135deg,var(--modern-primary),var(--modern-primary-2));color:#fff;border:0;}
.modal-footer{background:#f8fafc;border:0;}
.toast{border-radius:16px !important;box-shadow:var(--modern-shadow) !important;}

/* Login & Landing shared */
.modern-public-body{
  min-height:100vh;
  margin:0;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 12% 12%,rgba(37,99,235,.28),transparent 26%),
    radial-gradient(circle at 90% 8%,rgba(6,182,212,.25),transparent 29%),
    radial-gradient(circle at 80% 86%,rgba(124,58,237,.18),transparent 28%),
    linear-gradient(135deg,#eff6ff 0%,#f8fafc 48%,#eef2ff 100%);
  color:#0f172a;
  font-family:"Inter","Segoe UI",Roboto,Arial,sans-serif;
}
.modern-public-bg{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none;}
.modern-blob{position:absolute;border-radius:999px;filter:blur(1px);opacity:.72;animation:modernFloat 10s ease-in-out infinite alternate;}
.modern-blob.one{width:280px;height:280px;left:-70px;top:80px;background:rgba(37,99,235,.18);}
.modern-blob.two{width:230px;height:230px;right:-45px;top:35px;background:rgba(6,182,212,.22);animation-delay:-2s;}
.modern-blob.three{width:190px;height:190px;right:15%;bottom:25px;background:rgba(124,58,237,.16);animation-delay:-4s;}
.modern-public-wrap{position:relative;z-index:1;min-height:100vh;padding:28px;display:flex;align-items:center;justify-content:center;}
.modern-shell{width:min(1160px,100%);}
.modern-hero-card,
.modern-login-card{
  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.82);
  box-shadow:0 25px 70px rgba(15,23,42,.16);
  border-radius:34px;
  backdrop-filter:blur(20px);
  overflow:hidden;
}
.modern-hero-card{display:grid;grid-template-columns:1.12fr .88fr;min-height:620px;}
.modern-hero-left{padding:54px;position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(15,23,42,.96),rgba(29,78,216,.92) 58%,rgba(6,182,212,.85));color:#fff;}
.modern-hero-left:after{content:"";position:absolute;right:-90px;bottom:-120px;width:360px;height:360px;border-radius:999px;border:38px solid rgba(255,255,255,.10);}
.modern-kicker{display:inline-flex;gap:9px;align-items:center;padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.18);font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;}
.modern-title{font-size:clamp(34px,5vw,58px);line-height:1.02;margin:24px 0 16px;font-weight:950;letter-spacing:-1.8px;}
.modern-title span{display:block;margin-top:8px;font-size:clamp(28px,4.1vw,46px);letter-spacing:-1px;text-transform:uppercase;color:rgba(255,255,255,.96);}
.modern-subtitle{font-size:18px;line-height:1.72;color:rgba(255,255,255,.84);max-width:660px;}
.modern-feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:34px 0;}
.modern-feature{padding:16px;border-radius:20px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);}
.modern-feature .fa{width:36px;height:36px;line-height:36px;text-align:center;border-radius:13px;background:rgba(255,255,255,.16);margin-bottom:10px;}
.modern-feature strong{display:block;font-size:15px;margin-bottom:4px;}
.modern-feature span{font-size:12px;color:rgba(255,255,255,.74);line-height:1.55;}
.modern-hero-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.modern-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:12px 18px;border-radius:16px;text-decoration:none !important;font-weight:900;transition:.22s ease;}
.modern-btn.primary{background:#fff;color:#1d4ed8;box-shadow:0 16px 35px rgba(0,0,0,.18);}
.modern-btn.ghost{border:1px solid rgba(255,255,255,.26);color:#fff;background:rgba(255,255,255,.10);}
.modern-btn:hover{transform:translateY(-3px);filter:brightness(1.03);}
.modern-hero-right{padding:42px;background:rgba(255,255,255,.72);display:flex;flex-direction:column;justify-content:center;gap:18px;}
.modern-portal-card{position:relative;display:flex;align-items:center;gap:18px;padding:22px;border-radius:24px;text-decoration:none !important;color:#0f172a;background:rgba(255,255,255,.86);border:1px solid rgba(148,163,184,.20);box-shadow:0 12px 34px rgba(15,23,42,.08);transition:.25s ease;overflow:hidden;}
.modern-portal-card:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 0%,rgba(37,99,235,.08) 45%,transparent 70%);background-size:220% 100%;opacity:0;}
.modern-portal-card:hover{transform:translateY(-5px) scale(1.01);box-shadow:0 22px 48px rgba(15,23,42,.14);color:#0f172a;}
.modern-portal-card:hover:after{opacity:1;animation:modernShimmer 1.8s linear infinite;}
.modern-portal-icon{width:58px;height:58px;border-radius:20px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--modern-primary),var(--modern-primary-2));color:#fff;font-size:24px;box-shadow:0 13px 28px rgba(37,99,235,.25);}
.modern-portal-card:nth-child(2) .modern-portal-icon{background:linear-gradient(135deg,#16a34a,#22c55e);}
.modern-portal-card:nth-child(3) .modern-portal-icon{background:linear-gradient(135deg,#f59e0b,#f97316);}
.modern-portal-card h3{margin:0 0 5px;font-size:20px;font-weight:900;}
.modern-portal-card p{margin:0;color:#64748b;line-height:1.5;}
.modern-footer-note{margin-top:20px;text-align:center;color:#64748b;font-weight:700;}

.modern-login-wrap{width:min(1080px,100%);display:grid;grid-template-columns:.95fr 1.05fr;gap:24px;align-items:stretch;}
.modern-login-side{position:relative;padding:42px;border-radius:34px;background:linear-gradient(135deg,#0f172a,#1d4ed8 62%,#06b6d4);color:#fff;overflow:hidden;box-shadow:0 25px 70px rgba(15,23,42,.20);}
.modern-login-side:before{content:"";position:absolute;right:-80px;bottom:-100px;width:310px;height:310px;border-radius:999px;border:34px solid rgba(255,255,255,.10);}
.modern-login-side img{width:92px;height:92px;object-fit:contain;border-radius:24px;background:rgba(255,255,255,.92);padding:10px;margin-bottom:22px;box-shadow:0 16px 34px rgba(0,0,0,.18);}
.modern-login-side h1{font-size:40px;line-height:1.06;font-weight:950;margin:0 0 12px;letter-spacing:-1px;}
.modern-login-side p{font-size:16px;line-height:1.7;color:rgba(255,255,255,.82);}
.modern-login-points{display:grid;gap:11px;margin-top:30px;}
.modern-login-points span{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);font-weight:750;}
.modern-login-card{padding:44px;display:flex;flex-direction:column;justify-content:center;}
.modern-login-card .login-form-header{text-align:left;margin-bottom:24px;}
.modern-login-card h2{font-size:30px;font-weight:950;letter-spacing:-.6px;margin:0 0 8px;color:#0f172a;}
.modern-login-card .login-desc{color:#64748b;line-height:1.65;margin:0;}
.modern-login-card .input-container{position:relative;margin-bottom:16px;}
.modern-login-card .input-container>i:first-child{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#2563eb;z-index:2;}
.modern-login-card .input,
.modern-login-card input.input{
  width:100%;height:52px;border-radius:16px;border:1px solid rgba(148,163,184,.32);background:rgba(255,255,255,.92);padding:0 46px;color:#0f172a;font-weight:700;outline:0;transition:.2s ease;
}
.modern-login-card .input:focus{border-color:rgba(37,99,235,.65);box-shadow:0 0 0 5px rgba(37,99,235,.10);}
.modern-login-card #show-password{position:absolute;right:15px;top:50%;transform:translateY(-50%);color:#94a3b8;cursor:pointer;}
.modern-login-card .button{width:100%;height:52px;margin-top:6px;font-size:16px;}
.modern-login-mini{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0 18px;color:#64748b;font-size:13px;}
.modern-back-link{display:inline-flex;align-items:center;gap:8px;margin-top:18px;color:#2563eb;font-weight:850;text-decoration:none !important;}
.modern-login-credit{margin-top:20px;text-align:center;color:#64748b;font-size:12px;font-weight:700;}

/* Responsive */
@media (max-width:991px){
  .main-header{position:relative;}
  .main-sidebar,.left-side{padding-top:0 !important;}
  .content{padding:16px !important;}
  .content-header{padding:16px 16px 0 !important;}
  .modern-hero-card,.modern-login-wrap{grid-template-columns:1fr;}
  .modern-hero-left,.modern-hero-right,.modern-login-side,.modern-login-card{padding:30px;}
  .modern-feature-grid{grid-template-columns:1fr;}
  .modern-public-wrap{padding:16px;align-items:flex-start;}
  .modern-hero-card{min-height:auto;}
}
@media (max-width:767px){
  .main-header .logo,.main-header .navbar{height:54px !important;line-height:54px !important;}
  .main-header .sidebar-toggle{height:54px;}
  .content-header h1{font-size:18px;display:flex;width:100%;}
  .info-box{min-height:94px;}
  .info-box-icon{width:72px !important;height:94px !important;line-height:94px !important;}
  .info-box-content{margin-left:78px !important;padding:13px 12px;}
  .box-body,.panel-body{padding:14px !important;}
  .modern-title{font-size:34px;}
  .modern-subtitle{font-size:15px;}
  .modern-portal-card{padding:17px;align-items:flex-start;}
  .modern-portal-icon{width:50px;height:50px;border-radius:17px;font-size:21px;}
  .modern-login-side h1{font-size:32px;}
  .modern-login-card h2{font-size:26px;}
  .table-responsive{overflow-x:auto;}
}

@media print{
  body,body:before,body:after,.content-wrapper{background:#fff !important;box-shadow:none !important;}
  .main-header,.main-sidebar,.main-footer,.modern-public-bg{display:none !important;}
  .box,.panel,.info-box{box-shadow:none !important;border:1px solid #ddd !important;animation:none !important;}
  .content{padding:0 !important;}
}

/* Account chooser popup on landing page */
.modern-open-account,
.modern-portal-button{
  border:0;
  cursor:pointer;
  font-family:inherit;
}
.modern-portal-button{
  width:100%;
  text-align:left;
}
.modern-account-modal{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  opacity:0;
  visibility:hidden;
  transition:opacity .24s ease, visibility .24s ease;
}
.modern-account-modal.is-open{
  opacity:1;
  visibility:visible;
}
.modern-account-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.62);
  backdrop-filter:blur(12px);
}
.modern-account-dialog{
  position:relative;
  z-index:1;
  width:min(850px,100%);
  background:rgba(255,255,255,.94);
  border:1px solid rgba(255,255,255,.80);
  border-radius:30px;
  box-shadow:0 35px 95px rgba(15,23,42,.34);
  padding:34px;
  transform:translateY(24px) scale(.96);
  transition:transform .28s cubic-bezier(.2,.8,.2,1);
  overflow:hidden;
}
.modern-account-dialog:before{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  border-radius:999px;
  right:-90px;
  top:-105px;
  background:linear-gradient(135deg,rgba(37,99,235,.18),rgba(6,182,212,.18));
}
.modern-account-modal.is-open .modern-account-dialog{
  transform:translateY(0) scale(1);
}
.modern-modal-open{overflow:hidden;}
.modern-modal-close{
  position:absolute;
  top:18px;
  right:18px;
  width:42px;
  height:42px;
  border:0;
  border-radius:16px !important;
  background:rgba(15,23,42,.08) !important;
  color:#0f172a !important;
  font-size:28px;
  line-height:38px;
  cursor:pointer;
  z-index:2;
}
.modern-account-dialog .modern-kicker{
  color:#1d4ed8;
  background:rgba(37,99,235,.10);
  border-color:rgba(37,99,235,.16);
}
.modern-account-dialog h2{
  position:relative;
  margin:18px 56px 8px 0;
  font-size:32px;
  line-height:1.15;
  font-weight:950;
  letter-spacing:-.7px;
  color:#0f172a;
}
.modern-modal-desc{
  position:relative;
  color:#64748b;
  margin:0 0 24px;
  line-height:1.65;
}
.modern-account-grid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.modern-account-choice{
  display:flex;
  flex-direction:column;
  min-height:230px;
  padding:22px;
  border-radius:24px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(148,163,184,.22);
  color:#0f172a;
  text-decoration:none !important;
  box-shadow:0 15px 38px rgba(15,23,42,.08);
  transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease;
  overflow:hidden;
}
.modern-account-choice:hover{
  transform:translateY(-7px);
  color:#0f172a;
  border-color:rgba(37,99,235,.32);
  box-shadow:0 24px 55px rgba(15,23,42,.15);
}
.modern-account-icon{
  width:62px;
  height:62px;
  border-radius:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:25px;
  background:linear-gradient(135deg,#2563eb,#06b6d4);
  box-shadow:0 16px 30px rgba(37,99,235,.24);
  margin-bottom:18px;
}
.modern-account-choice:nth-child(2) .modern-account-icon{background:linear-gradient(135deg,#16a34a,#22c55e);}
.modern-account-choice:nth-child(3) .modern-account-icon{background:linear-gradient(135deg,#f59e0b,#f97316);}
.modern-account-choice strong{
  font-size:21px;
  font-weight:950;
  margin-bottom:8px;
}
.modern-account-choice small{
  color:#64748b;
  line-height:1.55;
  font-size:13px;
}
.modern-account-choice em{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#2563eb;
  font-style:normal;
  font-weight:900;
}
@media (max-width:767px){
  .modern-account-dialog{padding:24px;border-radius:24px;max-height:92vh;overflow:auto;}
  .modern-account-grid{grid-template-columns:1fr;}
  .modern-account-choice{min-height:auto;}
  .modern-account-dialog h2{font-size:25px;margin-right:45px;}
}


/* =========================================================
   Final layout fix: sidebar & topbar tetap diam, area tengah saja yang scroll
   ========================================================= */
body:not(.modern-public-body){overflow:hidden !important;}
body:not(.modern-public-body) .wrapper{height:100vh;overflow:hidden;background:transparent !important;}
body:not(.modern-public-body) .main-header{
  position:fixed !important;top:0;left:0;right:0;width:100%;z-index:1050 !important;
}
body:not(.modern-public-body) .main-sidebar,
body:not(.modern-public-body) .left-side{
  position:fixed !important;top:0;left:0;bottom:0;z-index:1040 !important;
  height:100vh !important;max-height:100vh !important;overflow-y:auto !important;overflow-x:hidden !important;
  scrollbar-width:thin;
}
body:not(.modern-public-body) .main-sidebar::-webkit-scrollbar{width:6px;}
body:not(.modern-public-body) .main-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.24);border-radius:999px;}
body:not(.modern-public-body) .content-wrapper,
body:not(.modern-public-body) .right-side{
  position:relative;z-index:1;margin-top:58px !important;height:calc(100vh - 58px) !important;
  overflow-y:auto !important;overflow-x:hidden !important;padding-bottom:28px;
  scroll-behavior:smooth;
}
body:not(.modern-public-body) .main-footer{display:none;}
.sidebar-menu a{position:relative;z-index:5;pointer-events:auto !important;cursor:pointer;}
.sidebar-menu>li>a[href*="view=pembayaran"],
.sidebar-menu>li>a[href*="view=hutangtoko"]{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.sidebar-menu>li>a[href*="view=pembayaran"]>.fa{background:linear-gradient(135deg,#22c55e,#06b6d4) !important;}
.sidebar-menu>li>a[href*="view=hutangtoko"]>.fa{background:linear-gradient(135deg,#f59e0b,#ef4444) !important;}

/* Dashboard baru: lebih rapi, seimbang, dan hidup */
.modern-dashboard-page{float:none !important;width:100% !important;}
.modern-dashboard-shell{
  position:relative;padding:0;margin:0 auto 28px;max-width:1500px;
  animation:modernFadeUp .45s ease both;
}
.modern-dashboard-hero{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:22px;
  min-height:170px;margin-bottom:22px;padding:30px;
  border-radius:30px;overflow:hidden;color:#fff;
  background:linear-gradient(135deg,#0f172a 0%,#1d4ed8 56%,#06b6d4 100%);
  box-shadow:0 24px 70px rgba(15,23,42,.20);
}
.modern-dashboard-hero:before{
  content:"";position:absolute;right:-120px;top:-145px;width:360px;height:360px;border-radius:999px;
  border:42px solid rgba(255,255,255,.10);animation:modernSpinGlow 22s linear infinite;
}
.modern-dashboard-hero:after{
  content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.14) 45%,transparent 70%);
  background-size:220% 100%;animation:modernShimmer 6s linear infinite;pointer-events:none;
}
.modern-dashboard-hero>*{position:relative;z-index:1;}
.modern-dashboard-kicker{
  display:inline-flex;align-items:center;gap:9px;padding:8px 13px;border-radius:999px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  font-weight:900;font-size:12px;text-transform:uppercase;letter-spacing:.08em;
}
.modern-dashboard-hero h2{margin:17px 0 8px;font-size:clamp(24px,3vw,40px);font-weight:950;letter-spacing:-.8px;}
.modern-dashboard-hero p{max-width:760px;margin:0;color:rgba(255,255,255,.82);line-height:1.65;font-size:15px;}
.modern-dashboard-datebox{
  min-width:230px;padding:18px;border-radius:24px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);text-align:right;backdrop-filter:blur(14px);
}
.modern-dashboard-datebox span{display:block;color:rgba(255,255,255,.78);font-weight:800;margin-bottom:5px;}
.modern-dashboard-datebox strong{font-size:30px;letter-spacing:1px;}
.modern-dashboard-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}
.modern-stat-card{
  position:relative;display:flex;align-items:center;gap:16px;min-height:126px;padding:20px;
  border-radius:26px;background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.82);
  box-shadow:0 14px 38px rgba(15,23,42,.10);overflow:hidden;transition:transform .24s ease,box-shadow .24s ease;
}
.modern-stat-card:before{content:"";position:absolute;right:-38px;top:-42px;width:115px;height:115px;border-radius:999px;background:rgba(37,99,235,.09);}
.modern-stat-card:hover{transform:translateY(-5px);box-shadow:0 24px 60px rgba(15,23,42,.15);}
.modern-stat-card.stat-wide{grid-column:span 2;}
.modern-stat-icon{
  flex:0 0 70px;width:70px;height:70px;border-radius:22px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:31px;
  background:linear-gradient(135deg,#2563eb,#06b6d4);box-shadow:0 18px 34px rgba(37,99,235,.22);
}
.modern-stat-card small{display:block;margin-bottom:6px;color:#64748b;font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.08em;}
.modern-stat-card strong{display:block;color:#0f172a;font-size:20px;line-height:1.22;font-weight:950;word-break:break-word;}
.modern-stat-card.stat-red .modern-stat-icon{background:linear-gradient(135deg,#ef4444,#f43f5e);}
.modern-stat-card.stat-green .modern-stat-icon{background:linear-gradient(135deg,#16a34a,#22c55e);}
.modern-stat-card.stat-orange .modern-stat-icon{background:linear-gradient(135deg,#f59e0b,#f97316);}
.modern-stat-card.stat-purple .modern-stat-icon{background:linear-gradient(135deg,#7c3aed,#2563eb);}
.modern-dashboard-note{
  display:flex;align-items:flex-start;gap:14px;margin-top:22px;padding:20px 22px;border-radius:24px;
  color:#fff;background:linear-gradient(135deg,#0891b2,#2563eb);box-shadow:0 18px 42px rgba(37,99,235,.20);
}
.modern-dashboard-note .fa{font-size:24px;margin-top:1px;}
.modern-dashboard-note p{margin:0;line-height:1.7;}
.content>.row{margin-left:0 !important;margin-right:0 !important;}
.content>.row>[class*="col-"]{padding-left:0;padding-right:0;}

/* Mobile & tablet responsive */
@media (max-width:1199px){.modern-dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.modern-stat-card.stat-wide{grid-column:span 1;}}
@media (max-width:991px){
  body:not(.modern-public-body) .main-header{position:fixed !important;}
  body:not(.modern-public-body) .main-sidebar{padding-top:58px !important;transform:translate(-230px,0);transition:transform .3s ease;}
  body.sidebar-open:not(.modern-public-body) .main-sidebar{transform:translate(0,0);}
  body:not(.modern-public-body) .content-wrapper,
  body:not(.modern-public-body) .right-side{margin-left:0 !important;margin-top:58px !important;height:calc(100vh - 58px) !important;}
  .modern-dashboard-hero{flex-direction:column;align-items:flex-start;padding:24px;}
  .modern-dashboard-datebox{width:100%;text-align:left;min-width:0;}
}
@media (max-width:767px){
  body:not(.modern-public-body) .main-header .logo{position:relative;width:100% !important;}
  body:not(.modern-public-body) .main-header .navbar{margin-left:0 !important;}
  body:not(.modern-public-body) .main-sidebar{padding-top:108px !important;}
  body:not(.modern-public-body) .content-wrapper,
  body:not(.modern-public-body) .right-side{margin-top:108px !important;height:calc(100vh - 108px) !important;}
  .content{padding:12px !important;}
  .modern-dashboard-grid{grid-template-columns:1fr;gap:13px;}
  .modern-stat-card{min-height:105px;padding:16px;border-radius:22px;}
  .modern-stat-icon{width:58px;height:58px;flex-basis:58px;border-radius:19px;font-size:25px;}
  .modern-stat-card strong{font-size:17px;}
  .modern-dashboard-hero{border-radius:24px;margin-bottom:14px;}
  .modern-dashboard-datebox strong{font-size:24px;}
  .modern-dashboard-note{border-radius:20px;padding:16px;}
  .table-responsive, .box-body{overflow-x:auto !important;}
}
@media print{
  body:not(.modern-public-body){overflow:visible !important;}
  body:not(.modern-public-body) .wrapper{height:auto !important;overflow:visible !important;}
  body:not(.modern-public-body) .content-wrapper{height:auto !important;overflow:visible !important;margin-top:0 !important;}
}


/* =========================================================
   Fix v2: konten menu pembayaran/hutang, dashboard pas layar,
   transaksi lebih nyaman, dan responsif HP
   ========================================================= */
body:not(.modern-public-body) .content-wrapper,
body:not(.modern-public-body) .right-side{
  margin-left:230px !important;
}
body.sidebar-collapse:not(.modern-public-body) .content-wrapper,
body.sidebar-collapse:not(.modern-public-body) .right-side{
  margin-left:50px !important;
}
body.modern-dashboard-view:not(.modern-public-body) .content-wrapper,
body.modern-dashboard-view:not(.modern-public-body) .right-side{
  overflow-y:hidden !important;
}
body.modern-dashboard-view .content{padding:12px 18px 14px !important;}
body.modern-dashboard-view .content-header{padding:12px 18px 0 !important;}
body.modern-dashboard-view .content-header h1{padding:9px 15px;font-size:19px;margin-bottom:8px;}
body.modern-dashboard-view .modern-dashboard-shell{max-width:none;margin-bottom:0;}
body.modern-dashboard-view .modern-dashboard-hero{
  min-height:108px;margin-bottom:12px;padding:18px 22px;border-radius:24px;
}
body.modern-dashboard-view .modern-dashboard-hero h2{margin:9px 0 4px;font-size:clamp(21px,2.3vw,30px);}
body.modern-dashboard-view .modern-dashboard-hero p{font-size:13px;line-height:1.45;}
body.modern-dashboard-view .modern-dashboard-datebox{min-width:210px;padding:12px 15px;border-radius:18px;}
body.modern-dashboard-view .modern-dashboard-datebox strong{font-size:24px;}
body.modern-dashboard-view .modern-dashboard-grid{
  grid-template-columns:repeat(5,minmax(0,1fr));gap:11px;
}
body.modern-dashboard-view .modern-stat-card,
body.modern-dashboard-view .modern-stat-card.stat-wide{
  grid-column:span 1;min-height:94px;padding:14px;border-radius:20px;gap:12px;
}
body.modern-dashboard-view .modern-stat-icon{
  flex-basis:54px;width:54px;height:54px;border-radius:17px;font-size:23px;
}
body.modern-dashboard-view .modern-stat-card small{font-size:10.5px;margin-bottom:4px;letter-spacing:.055em;}
body.modern-dashboard-view .modern-stat-card strong{font-size:15.5px;line-height:1.18;}
body.modern-dashboard-view .modern-dashboard-note{
  margin-top:12px;padding:13px 16px;border-radius:18px;font-size:13px;
}
body.modern-dashboard-view .modern-dashboard-note p{line-height:1.45;}

/* Halaman transaksi: pastikan isi muncul dan tidak kosong akibat nested section lama */
.modern-transaction-page{float:none !important;width:100% !important;padding-left:0 !important;padding-right:0 !important;}
.modern-section-title{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;padding:14px 18px;border-radius:20px;
  background:linear-gradient(135deg,#2563eb,#06b6d4);color:#fff;font-weight:900;font-size:18px;
  box-shadow:0 16px 38px rgba(37,99,235,.18);
}
.modern-section-title .fa{font-size:20px;}
body.modern-content-view .content>.row{display:block;}
body.modern-content-view .content>.row:before,
body.modern-content-view .content>.row:after{content:" ";display:table;clear:both;}
body.modern-content-view .box{margin-bottom:18px;}
body.modern-content-view .box-body{overflow:visible;}
body.modern-content-view .table-responsive{overflow-x:auto !important;}
body.modern-content-view .selectpicker,
body.modern-content-view .bootstrap-select{width:100% !important;}
body.modern-content-view .btn-xs{padding:6px 10px !important;font-size:12px !important;}
.modal{z-index:20000 !important;}
.modal-backdrop{z-index:19990 !important;}
.modal-dialog{margin-top:80px;}
.modal .form-control{width:100%;}

/* Sidebar dan topbar tetap diam, area tengah saja yang bergerak */
body:not(.modern-public-body) .main-header{position:fixed !important;}
body:not(.modern-public-body) .main-sidebar{position:fixed !important;}
body:not(.modern-public-body) .content-wrapper{will-change:scroll-position;}

@media (max-width:1399px){
  body.modern-dashboard-view .modern-dashboard-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  body.modern-dashboard-view .modern-stat-card strong{font-size:15px;}
}
@media (max-width:1199px){
  body.modern-dashboard-view .modern-dashboard-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  body.modern-dashboard-view:not(.modern-public-body) .content-wrapper{overflow-y:auto !important;}
}
@media (max-width:991px){
  body:not(.modern-public-body) .content-wrapper,
  body:not(.modern-public-body) .right-side,
  body.sidebar-collapse:not(.modern-public-body) .content-wrapper,
  body.sidebar-collapse:not(.modern-public-body) .right-side{
    margin-left:0 !important;
  }
  body:not(.modern-public-body) .main-sidebar{width:230px !important;}
  body.sidebar-open:not(.modern-public-body)::after{
    content:"";position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:1035;backdrop-filter:blur(2px);
  }
  body.sidebar-open:not(.modern-public-body) .main-sidebar{z-index:1060 !important;}
  body.modern-dashboard-view .modern-dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:767px){
  body:not(.modern-public-body) .main-header .logo{width:190px !important;float:left !important;height:54px !important;line-height:54px !important;}
  body:not(.modern-public-body) .main-header .navbar{margin-left:190px !important;min-height:54px !important;height:54px !important;}
  body:not(.modern-public-body) .main-sidebar{padding-top:54px !important;}
  body:not(.modern-public-body) .content-wrapper,
  body:not(.modern-public-body) .right-side{margin-top:54px !important;height:calc(100vh - 54px) !important;}
  .navbar-custom-menu .navbar-nav>li>a{padding-left:8px;padding-right:8px;}
  .navbar-custom-menu>.navbar-nav{float:right;}
  .content-header h1{font-size:17px;line-height:1.25;}
  body.modern-dashboard-view .content{padding:10px !important;}
  body.modern-dashboard-view .content-header{padding:10px 10px 0 !important;}
  body.modern-dashboard-view .modern-dashboard-hero{padding:16px;border-radius:20px;min-height:auto;}
  body.modern-dashboard-view .modern-dashboard-grid{grid-template-columns:1fr;}
  body.modern-dashboard-view .modern-stat-card{min-height:86px;}
  body.modern-dashboard-view:not(.modern-public-body) .content-wrapper{overflow-y:auto !important;}
  .modal-dialog{width:auto;margin:62px 10px 10px;}
  .form-horizontal .control-label{text-align:left !important;margin-bottom:6px;}
  .box-body .row>[class*="col-"], .box-body>[class*="col-"]{margin-bottom:10px;}
}
@media (max-width:420px){
  body:not(.modern-public-body) .main-header .logo{width:158px !important;font-size:14px;}
  body:not(.modern-public-body) .main-header .navbar{margin-left:158px !important;}
  .content-header h1{font-size:15px;}
}


/* =========================================================
   Fix v3: cari siswa, validasi pilihan akun, dan form transaksi
   ========================================================= */
.modern-search-form .form-group{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-left:0;margin-right:0;}
.modern-search-form .control-label{margin-bottom:0;color:#334155;font-weight:900;}
.modern-search-form .modern-search-btn{border-radius:14px !important;padding:9px 16px !important;font-weight:900;box-shadow:0 12px 26px rgba(37,99,235,.18);}
.modern-search-form .bootstrap-select>.dropdown-toggle,
.modern-search-form select.form-control{height:42px;border-radius:16px !important;border:1px solid rgba(148,163,184,.35) !important;background:#fff !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 6px 18px rgba(15,23,42,.06) !important;}
.modern-search-form .bootstrap-select .dropdown-menu{border-radius:16px;border:0;box-shadow:0 18px 45px rgba(15,23,42,.18);overflow:hidden;}
.modern-search-form .bootstrap-select .bs-searchbox input{border-radius:12px;border:1px solid rgba(148,163,184,.35);height:38px;}
.modern-inline-alert{border:0 !important;border-radius:18px !important;box-shadow:0 12px 28px rgba(245,158,11,.14);font-weight:700;}
.modern-inline-alert .fa{margin-right:7px;color:#f59e0b;}
.modern-submitting{opacity:.78;pointer-events:none;}
.modern-role-popup{position:fixed;inset:0;z-index:30000;display:none;align-items:center;justify-content:center;padding:20px;}
.modern-role-popup.is-open{display:flex;}
.modern-role-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.56);backdrop-filter:blur(8px);}
.modern-role-card{position:relative;width:min(450px,100%);border-radius:28px;padding:28px;background:rgba(255,255,255,.96);box-shadow:0 30px 90px rgba(15,23,42,.34);border:1px solid rgba(255,255,255,.72);text-align:center;animation:modernFadeUp .28s ease both;}
.modern-role-close{position:absolute;top:12px;right:14px;width:34px;height:34px;border:0;border-radius:999px;background:#eef2ff;color:#0f172a;font-size:22px;line-height:32px;font-weight:900;}
.modern-role-icon{width:68px;height:68px;border-radius:22px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;font-size:30px;box-shadow:0 16px 34px rgba(239,68,68,.24);}
.modern-role-card h3{margin:0 0 8px;color:#0f172a;font-size:24px;font-weight:950;}
.modern-role-card p{margin:0 auto 18px;color:#475569;line-height:1.65;font-size:15px;}
.modern-role-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.modern-role-actions .modern-btn{min-height:42px;text-decoration:none;}
body.modern-content-view .content-wrapper{scroll-behavior:smooth;}
body.modern-content-view .content{padding-bottom:44px !important;}
@media(max-width:767px){
  .modern-search-form .form-group{display:block;}
  .modern-search-form .control-label{display:block;text-align:left !important;margin-bottom:7px;}
  .modern-search-form .col-sm-8,.modern-search-form .col-sm-2{width:100%;padding-left:0;padding-right:0;margin-bottom:9px;}
  .modern-search-form .modern-search-btn{width:100%;}
  .modern-role-card{padding:24px 18px;border-radius:24px;}
}


/* =========================================================
   Fix v4: pencarian siswa Enter, grafik dashboard, bottombar
   ========================================================= */
.modern-search-form-v4{width:100%;}
.modern-student-search-row{display:grid;grid-template-columns:210px minmax(280px,1fr) auto;align-items:center;gap:14px;width:100%;}
.modern-student-search-label{margin:0;color:#334155;font-weight:950;letter-spacing:.01em;}
.modern-student-search-field{position:relative;min-width:0;}
.modern-student-search-field .fa{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#2563eb;z-index:1;}
.modern-student-search-input{height:46px !important;border-radius:18px !important;border:1px solid rgba(148,163,184,.42) !important;padding-left:42px !important;background:rgba(255,255,255,.96) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.88),0 9px 24px rgba(15,23,42,.07) !important;font-weight:800;color:#0f172a;}
.modern-student-search-input:focus{border-color:#2563eb !important;box-shadow:0 0 0 4px rgba(37,99,235,.12),0 12px 28px rgba(37,99,235,.12) !important;}
.modern-search-form-v4 .modern-search-btn{height:46px;min-width:145px;border:0 !important;border-radius:18px !important;background:linear-gradient(135deg,#2563eb,#06b6d4) !important;color:#fff !important;box-shadow:0 14px 30px rgba(37,99,235,.22) !important;}
.modern-search-form-v4 .modern-search-btn:hover{transform:translateY(-1px);filter:brightness(1.04);}
.modern-dashboard-chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:13px;}
.modern-chart-card{position:relative;overflow:hidden;border-radius:24px;background:rgba(255,255,255,.90);border:1px solid rgba(255,255,255,.72);box-shadow:0 18px 45px rgba(15,23,42,.10);padding:16px 18px 14px;animation:modernFadeUp .5s ease both;}
.modern-chart-card:before{content:"";position:absolute;right:-35px;top:-55px;width:150px;height:150px;border-radius:50%;background:rgba(37,99,235,.10);}
.modern-chart-head{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:9px;}
.modern-chart-head small{display:block;color:#64748b;font-size:11px;font-weight:950;text-transform:uppercase;letter-spacing:.08em;margin-bottom:3px;}
.modern-chart-head strong{display:block;color:#0f172a;font-size:18px;font-weight:950;line-height:1.15;}
.modern-chart-head>span{width:44px;height:44px;border-radius:16px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:19px;box-shadow:0 12px 26px rgba(37,99,235,.20);}
.modern-chart-payment .modern-chart-head>span{background:linear-gradient(135deg,#2563eb,#06b6d4);}
.modern-chart-saving .modern-chart-head>span{background:linear-gradient(135deg,#16a34a,#22c55e);}
.modern-mini-chart{height:120px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:end;gap:9px;position:relative;padding-top:6px;}
.modern-mini-chart:before{content:"";position:absolute;left:0;right:0;bottom:27px;height:1px;background:linear-gradient(90deg,rgba(148,163,184,.05),rgba(148,163,184,.35),rgba(148,163,184,.05));}
.modern-mini-chart-item{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:0;}
.modern-mini-chart-bar{position:relative;width:100%;max-width:34px;height:82px;border-radius:999px;background:#eef2ff;overflow:hidden;box-shadow:inset 0 2px 8px rgba(15,23,42,.06);}
.modern-mini-chart-bar span{position:absolute;left:0;right:0;bottom:0;border-radius:999px 999px 0 0;background:linear-gradient(180deg,#60a5fa,#2563eb);animation:modernBarGrow .8s ease both;}
.modern-chart-saving .modern-mini-chart-bar span{background:linear-gradient(180deg,#86efac,#16a34a);}
.modern-mini-chart-item em{display:block;width:100%;margin-top:7px;color:#64748b;font-style:normal;font-size:10px;font-weight:900;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@keyframes modernBarGrow{from{height:0;} }
.modern-bottom-appbar{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:40px;padding:2px 0;color:#334155;font-size:13px;}
.modern-bottom-brand{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.modern-bottom-brand .fa{width:28px;height:28px;border-radius:10px;background:linear-gradient(135deg,#2563eb,#06b6d4);color:#fff;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 8px 18px rgba(37,99,235,.18);}
.modern-bottom-brand strong{color:#0f172a;font-size:14px;}
.modern-bottom-brand span{color:#64748b;}
.modern-bottom-version{padding:7px 12px;border-radius:999px;background:#eef2ff;color:#1e3a8a;font-weight:800;white-space:nowrap;}
body.modern-dashboard-view .main-footer{padding:6px 16px !important;}
body.modern-dashboard-view .modern-dashboard-note{margin-top:13px;}
body.modern-dashboard-view .modern-dashboard-chart-grid{margin-top:11px;}
body.modern-dashboard-view .modern-chart-card{padding:13px 15px 11px;border-radius:20px;}
body.modern-dashboard-view .modern-mini-chart{height:100px;}
body.modern-dashboard-view .modern-mini-chart-bar{height:64px;}
body.modern-dashboard-view .modern-chart-head strong{font-size:15px;}
@media(max-width:1199px){.modern-student-search-row{grid-template-columns:1fr;gap:8px;}.modern-search-form-v4 .modern-search-btn{width:100%;}.modern-dashboard-chart-grid{grid-template-columns:1fr;}body.modern-dashboard-view:not(.modern-public-body) .content-wrapper{overflow-y:auto !important;}}
@media(max-width:767px){.modern-student-search-input{height:44px !important;border-radius:16px !important;font-size:13px;}.modern-dashboard-chart-grid{gap:11px;}.modern-mini-chart{gap:6px;height:105px;}.modern-mini-chart-bar{max-width:26px;height:68px;}.modern-chart-head{align-items:flex-start;}.modern-bottom-appbar{flex-direction:column;align-items:flex-start;font-size:12px;}.modern-bottom-version{white-space:normal;}.main-footer{margin-left:0 !important;}.modern-student-search-label{font-size:13px;}}

/* =========================================================
   Fix v6: grafik dashboard hari berjalan dan tabungan per kelas
   ========================================================= */
.modern-chart-head b{display:block;color:#64748b;font-size:11px;font-weight:850;margin-top:3px;letter-spacing:.01em;}
.modern-chart-caption{position:relative;margin-top:8px;padding:8px 10px;border-radius:14px;background:rgba(241,245,249,.86);color:#475569;font-size:11px;font-weight:800;line-height:1.35;}
.modern-chart-caption .fa{color:#2563eb;margin-right:5px;}
.modern-chart-saving .modern-chart-caption .fa{color:#16a34a;}
.modern-mini-chart-perkelas{overflow-x:auto;overflow-y:hidden;padding-bottom:4px;scrollbar-width:thin;}
.modern-mini-chart-perkelas .modern-mini-chart-item{min-width:72px;}
.modern-mini-chart-perkelas::-webkit-scrollbar{height:6px;}
.modern-mini-chart-perkelas::-webkit-scrollbar-thumb{background:rgba(100,116,139,.35);border-radius:999px;}
.modern-chart-payment .modern-mini-chart{max-width:360px;margin-left:auto;margin-right:auto;}
@media(max-width:767px){.modern-chart-payment .modern-mini-chart{max-width:100%;}.modern-chart-caption{font-size:10.5px;}.modern-mini-chart-perkelas{gap:8px;}}


/* =========================================================
   Fix v7: landing popup only on Pilih Akun + portal fit screen
   ========================================================= */
@media (min-width: 992px){
  .modern-public-body{
    overflow:hidden !important;
    height:100vh;
    min-height:100vh;
  }
  .modern-public-wrap{
    height:100vh;
    min-height:100vh;
    padding:8px clamp(12px,2vw,28px);
    overflow:hidden;
  }
  .modern-shell{width:min(1160px,calc(100vw - 48px));}
  .modern-hero-card{
    height:min(720px,calc(100vh - 16px));
    min-height:0 !important;
    grid-template-columns:1.08fr .92fr;
    border-radius:30px;
  }
  .modern-hero-left{
    padding:clamp(30px,4.2vh,50px) clamp(34px,4vw,54px);
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .modern-title{
    font-size:clamp(42px,4.05vw,56px);
    margin:clamp(14px,2.4vh,24px) 0 clamp(10px,1.8vh,16px);
  }
  .modern-title span{font-size:clamp(32px,3.15vw,44px);}
  .modern-subtitle{font-size:clamp(15px,1.25vw,17px);line-height:1.65;margin-bottom:0;}
  .modern-feature-grid{gap:12px;margin:clamp(20px,3vh,32px) 0;}
  .modern-feature{padding:clamp(12px,1.7vh,16px);}
  .modern-feature .fa{width:34px;height:34px;line-height:34px;margin-bottom:8px;}
  .modern-feature strong{font-size:14px;}
  .modern-feature span{font-size:11px;line-height:1.45;}
  .modern-hero-right{
    padding:clamp(26px,3.3vh,42px);
    gap:clamp(12px,2vh,18px);
    justify-content:center;
    overflow:hidden;
  }
  .modern-portal-card{padding:clamp(16px,2.1vh,22px);border-radius:22px;}
  .modern-portal-card h3{font-size:clamp(17px,1.55vw,20px);}
  .modern-portal-card p{font-size:clamp(13px,1.05vw,15px);}
  .modern-portal-icon{width:clamp(50px,5.3vh,58px);height:clamp(50px,5.3vh,58px);border-radius:18px;}
  .modern-footer-note{margin-top:clamp(8px,1.6vh,18px);font-size:clamp(12px,1.05vw,15px);}
}
@media (min-width: 992px) and (max-height: 720px){
  .modern-kicker{padding:7px 12px;font-size:11px;}
  .modern-title{font-size:40px;}
  .modern-title span{font-size:30px;}
  .modern-subtitle{font-size:14px;line-height:1.55;}
  .modern-feature-grid{margin:16px 0;gap:10px;}
  .modern-feature{padding:10px 12px;border-radius:17px;}
  .modern-feature .fa{width:28px;height:28px;line-height:28px;margin-bottom:6px;}
  .modern-feature strong{font-size:13px;}
  .modern-feature span{font-size:10.5px;}
  .modern-btn{min-height:42px;padding:10px 15px;border-radius:14px;}
  .modern-portal-card{padding:14px 16px;border-radius:20px;}
  .modern-portal-icon{width:48px;height:48px;font-size:20px;}
  .modern-footer-note{font-size:12px;margin-top:6px;}
}
@media (max-width: 991px){
  .modern-public-body{overflow-y:auto !important;}
  .modern-public-wrap{min-height:100dvh;}
}
.modern-login-choice-popup{position:fixed;inset:0;z-index:40000;display:none;align-items:center;justify-content:center;padding:18px;}
.modern-login-choice-popup.is-open{display:flex;}
.modern-login-choice-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.60);backdrop-filter:blur(10px);}
.modern-login-choice-card{position:relative;width:min(480px,100%);padding:28px;border-radius:30px;background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.75);box-shadow:0 30px 90px rgba(15,23,42,.34);text-align:center;animation:modernFadeUp .25s ease both;}
.modern-login-choice-close{position:absolute;top:13px;right:15px;width:36px;height:36px;border:0;border-radius:999px;background:#eef2ff;color:#0f172a;font-size:24px;line-height:32px;font-weight:900;cursor:pointer;}
.modern-login-choice-icon{width:72px;height:72px;margin:0 auto 14px;border-radius:24px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:30px;background:linear-gradient(135deg,#2563eb,#06b6d4);box-shadow:0 18px 38px rgba(37,99,235,.24);}
.modern-login-choice-card h3{margin:0 0 8px;color:#0f172a;font-size:25px;font-weight:950;letter-spacing:-.4px;}
.modern-login-choice-card p{margin:0 auto 18px;color:#64748b;font-size:15px;line-height:1.6;max-width:360px;}
.modern-login-choice-actions{display:grid;gap:10px;}
.modern-login-choice-link{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:18px;background:#fff;color:#0f172a !important;text-decoration:none !important;border:1px solid rgba(148,163,184,.22);box-shadow:0 10px 24px rgba(15,23,42,.07);font-weight:900;transition:.22s ease;}
.modern-login-choice-link:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(15,23,42,.12);}
.modern-login-choice-link i{width:42px;height:42px;border-radius:15px;display:inline-flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,#2563eb,#06b6d4);}
.modern-login-choice-link.bendahara i{background:linear-gradient(135deg,#16a34a,#22c55e);}
.modern-login-choice-link.siswa i{background:linear-gradient(135deg,#f59e0b,#f97316);}
body.modern-choice-open{overflow:hidden !important;}
@media (max-width: 767px){
  .modern-login-choice-card{padding:24px 18px;border-radius:24px;}
  .modern-login-choice-card h3{font-size:22px;}
}


/* =========================================================
   Fix v8: grafik tabungan hanya hari berjalan + bottom bar terlihat
   ========================================================= */
body:not(.modern-public-body) .main-footer{
  display:block !important;
  position:fixed !important;
  left:230px !important;
  right:0 !important;
  bottom:0 !important;
  height:52px !important;
  z-index:1045 !important;
  margin-left:0 !important;
  padding:6px 18px !important;
  border:0 !important;
  background:rgba(255,255,255,.92) !important;
  border-top:1px solid rgba(148,163,184,.22) !important;
  box-shadow:0 -14px 34px rgba(15,23,42,.10) !important;
  backdrop-filter:blur(16px);
}
body.sidebar-collapse:not(.modern-public-body) .main-footer{left:50px !important;}
body:not(.modern-public-body) .content-wrapper,
body:not(.modern-public-body) .right-side{
  height:calc(100vh - 110px) !important;
  padding-bottom:18px !important;
}
body.modern-dashboard-view:not(.modern-public-body) .content-wrapper,
body.modern-dashboard-view:not(.modern-public-body) .right-side{
  height:calc(100vh - 110px) !important;
  overflow-y:auto !important;
}
.modern-bottom-appbar{
  height:40px;
  min-height:40px;
  padding:0;
}
.modern-bottom-brand strong,.modern-bottom-version{font-weight:950;}
.modern-bottom-version{background:linear-gradient(135deg,#eef2ff,#e0f2fe);}
@media (max-width:991px){
  body:not(.modern-public-body) .main-footer{left:0 !important;}
}
@media (max-width:767px){
  body:not(.modern-public-body) .main-footer{height:auto !important;min-height:62px !important;padding:8px 12px !important;}
  body:not(.modern-public-body) .content-wrapper,
  body:not(.modern-public-body) .right-side,
  body.modern-dashboard-view:not(.modern-public-body) .content-wrapper,
  body.modern-dashboard-view:not(.modern-public-body) .right-side{
    height:calc(100vh - 124px) !important;
  }
  .modern-bottom-appbar{height:auto;min-height:46px;gap:5px;}
}


/* =========================================================
   Fix v9: landing page rapi, tidak ada teks/tombol terpotong,
   kartu login presisi di tengah panel kanan
   ========================================================= */
@media (min-width: 992px){
  .modern-public-body{
    overflow:hidden !important;
    height:100dvh !important;
    min-height:100dvh !important;
  }
  .modern-public-wrap{
    height:100dvh !important;
    min-height:100dvh !important;
    padding:16px clamp(18px,2.2vw,34px) !important;
    box-sizing:border-box !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
  }
  .modern-shell{
    width:min(1160px,calc(100vw - 56px)) !important;
  }
  .modern-hero-card{
    height:min(820px,calc(100dvh - 32px)) !important;
    min-height:0 !important;
    grid-template-columns:1.08fr .92fr !important;
    border-radius:30px !important;
  }
  .modern-hero-left{
    padding:clamp(28px,3.8vh,50px) clamp(34px,4vw,54px) !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    overflow:hidden !important;
  }
  .modern-kicker{
    flex:0 0 auto !important;
    max-width:max-content !important;
    white-space:nowrap !important;
  }
  .modern-title{
    flex:0 0 auto !important;
    font-size:clamp(40px,4vw,58px) !important;
    line-height:1.02 !important;
    margin:clamp(14px,2vh,24px) 0 clamp(10px,1.4vh,16px) !important;
  }
  .modern-title span{
    font-size:clamp(30px,3.05vw,44px) !important;
    line-height:1.08 !important;
    margin-top:6px !important;
  }
  .modern-subtitle{
    flex:0 0 auto !important;
    font-size:clamp(14px,1.18vw,17px) !important;
    line-height:1.6 !important;
    margin:0 !important;
  }
  .modern-feature-grid{
    flex:0 0 auto !important;
    gap:12px !important;
    margin:clamp(18px,2.6vh,30px) 0 clamp(18px,2.6vh,30px) !important;
  }
  .modern-feature{
    padding:clamp(11px,1.55vh,16px) !important;
    border-radius:19px !important;
  }
  .modern-feature .fa{
    width:32px !important;
    height:32px !important;
    line-height:32px !important;
    margin-bottom:7px !important;
  }
  .modern-feature strong{font-size:14px !important;}
  .modern-feature span{font-size:11px !important;line-height:1.45 !important;}
  .modern-hero-actions{
    flex:0 0 auto !important;
    margin-top:0 !important;
    padding-bottom:2px !important;
  }
  .modern-btn{
    min-height:44px !important;
    padding:10px 16px !important;
    border-radius:15px !important;
  }
  .modern-hero-right{
    padding:clamp(28px,4vh,54px) !important;
    justify-content:center !important;
    align-items:center !important;
    gap:16px !important;
    overflow:hidden !important;
  }
  .modern-hero-right .modern-portal-card,
  .modern-hero-right .modern-footer-note{
    width:min(100%,470px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  .modern-portal-card{
    min-height:92px !important;
    padding:18px 20px !important;
    border-radius:22px !important;
    align-items:center !important;
  }
  .modern-portal-icon{
    flex:0 0 auto !important;
    width:54px !important;
    height:54px !important;
    border-radius:18px !important;
    font-size:22px !important;
  }
  .modern-portal-card h3{
    font-size:20px !important;
    margin:0 0 4px !important;
  }
  .modern-portal-card p{
    font-size:14px !important;
    line-height:1.45 !important;
  }
  .modern-footer-note{
    margin-top:8px !important;
    font-size:14px !important;
    line-height:1.5 !important;
    text-align:center !important;
  }
}
@media (min-width: 992px) and (max-height: 760px){
  .modern-public-wrap{padding:12px clamp(14px,2vw,28px) !important;}
  .modern-hero-card{height:calc(100dvh - 24px) !important;}
  .modern-hero-left{padding:24px 42px !important;}
  .modern-kicker{padding:7px 12px !important;font-size:11px !important;}
  .modern-title{font-size:40px !important;margin:12px 0 8px !important;}
  .modern-title span{font-size:30px !important;}
  .modern-subtitle{font-size:14px !important;line-height:1.48 !important;}
  .modern-feature-grid{gap:9px !important;margin:14px 0 !important;}
  .modern-feature{padding:9px 11px !important;border-radius:16px !important;}
  .modern-feature .fa{width:27px !important;height:27px !important;line-height:27px !important;margin-bottom:5px !important;}
  .modern-feature strong{font-size:12.5px !important;}
  .modern-feature span{font-size:10px !important;line-height:1.35 !important;}
  .modern-btn{min-height:40px !important;padding:9px 14px !important;font-size:13px !important;}
  .modern-hero-right{padding:24px 34px !important;gap:12px !important;}
  .modern-portal-card{min-height:80px !important;padding:14px 18px !important;border-radius:20px !important;}
  .modern-portal-icon{width:48px !important;height:48px !important;font-size:20px !important;border-radius:16px !important;}
  .modern-portal-card h3{font-size:18px !important;}
  .modern-portal-card p{font-size:13px !important;line-height:1.35 !important;}
  .modern-footer-note{font-size:12.5px !important;margin-top:5px !important;}
}
@media (max-width: 991px){
  .modern-public-body{overflow-y:auto !important;}
  .modern-public-wrap{padding:14px !important;align-items:flex-start !important;}
  .modern-hero-right{align-items:stretch !important;}
}


/* =========================================================
   Fix v10: Popup transaksi dan modal semua menu dibuat rapi,
   presisi di tengah layar, tidak terpotong, dan responsif.
   ========================================================= */
body.modal-open:not(.modern-public-body){
  overflow:hidden !important;
  padding-right:0 !important;
}
body.modal-open:not(.modern-public-body) .wrapper{
  overflow:hidden !important;
}
body.modal-open:not(.modern-public-body) .main-header,
body.modal-open:not(.modern-public-body) .main-sidebar,
body.modal-open:not(.modern-public-body) .main-footer{
  filter:none !important;
}
.modal{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  padding:18px !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  z-index:30000 !important;
  text-align:center !important;
  outline:0 !important;
}
.modal.in,
.modal.show{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.modal:before{
  content:"";
  display:inline-block;
  height:100%;
  vertical-align:middle;
}
.modal-dialog{
  position:relative !important;
  display:inline-flex !important;
  width:min(680px,calc(100vw - 36px)) !important;
  max-width:100% !important;
  max-height:calc(100dvh - 36px) !important;
  margin:0 auto !important;
  text-align:left !important;
  vertical-align:middle !important;
  transform:none !important;
  transition:transform .24s ease,opacity .24s ease !important;
}
.modal.fade .modal-dialog{
  opacity:0;
  transform:translate3d(0,18px,0) scale(.96) !important;
}
.modal.fade.in .modal-dialog,
.modal.show .modal-dialog{
  opacity:1;
  transform:translate3d(0,0,0) scale(1) !important;
}
.modal-sm{width:min(420px,calc(100vw - 36px)) !important;}
.modal-lg{width:min(960px,calc(100vw - 36px)) !important;}
.modal-xl{width:min(1140px,calc(100vw - 36px)) !important;}
.modal-content{
  width:100% !important;
  max-height:calc(100dvh - 36px) !important;
  display:flex !important;
  flex-direction:column !important;
  margin:0 !important;
  border:1px solid rgba(255,255,255,.72) !important;
  border-radius:28px !important;
  background:rgba(255,255,255,.96) !important;
  box-shadow:0 34px 90px rgba(15,23,42,.34) !important;
  overflow:hidden !important;
  backdrop-filter:blur(18px) !important;
}
.modal-header{
  position:relative !important;
  flex:0 0 auto !important;
  min-height:58px !important;
  padding:17px 62px 16px 22px !important;
  border:0 !important;
  background:linear-gradient(135deg,#1d4ed8,#06b6d4) !important;
  color:#fff !important;
}
.modal-header:after{
  content:"";
  position:absolute;
  right:-52px;
  top:-84px;
  width:190px;
  height:190px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  pointer-events:none;
}
.modal-title,
.modal-header h4,
.modal-header h3{
  position:relative !important;
  z-index:1 !important;
  margin:0 !important;
  color:#fff !important;
  font-weight:900 !important;
  letter-spacing:.01em !important;
  line-height:1.35 !important;
}
.modal-header .close,
.modal .close{
  position:absolute !important;
  z-index:2 !important;
  top:12px !important;
  right:14px !important;
  width:36px !important;
  height:36px !important;
  line-height:34px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:0 !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.18) !important;
  color:#fff !important;
  opacity:1 !important;
  text-shadow:none !important;
  font-size:24px !important;
  font-weight:900 !important;
  cursor:pointer !important;
}
.modal-header .close:hover,
.modal .close:hover{
  background:rgba(255,255,255,.28) !important;
  transform:scale(1.04) !important;
}
.modal-body{
  flex:1 1 auto !important;
  max-height:calc(100dvh - 160px) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding:24px 28px !important;
  background:linear-gradient(180deg,rgba(248,250,252,.98),rgba(255,255,255,.98)) !important;
}
.modal-body::-webkit-scrollbar{width:7px;}
.modal-body::-webkit-scrollbar-thumb{background:rgba(37,99,235,.25);border-radius:999px;}
.modal-footer{
  flex:0 0 auto !important;
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:10px !important;
  padding:16px 22px !important;
  margin:0 !important;
  border:0 !important;
  background:#f8fafc !important;
  text-align:right !important;
}
.modal .form-group{margin-bottom:16px !important;}
.modal label,
.modal .control-label{
  color:#334155 !important;
  font-weight:900 !important;
  margin-bottom:7px !important;
}
.modal .form-control,
.modal select.form-control,
.modal textarea.form-control,
.modal .bootstrap-select>.dropdown-toggle,
.modal .select2-container .select2-selection--single{
  width:100% !important;
  min-height:44px !important;
  border-radius:16px !important;
  border:1px solid rgba(148,163,184,.36) !important;
  background:#fff !important;
  box-shadow:0 8px 22px rgba(15,23,42,.06) !important;
  font-weight:750 !important;
}
.modal .form-control:focus,
.modal select.form-control:focus,
.modal textarea.form-control:focus{
  border-color:#2563eb !important;
  box-shadow:0 0 0 4px rgba(37,99,235,.12),0 12px 25px rgba(37,99,235,.08) !important;
}
.modal .input-group{width:100% !important;}
.modal .input-group-addon{
  border-radius:16px 0 0 16px !important;
  border-color:rgba(148,163,184,.32) !important;
}
.modal .btn{
  min-height:40px !important;
  padding:9px 16px !important;
  border-radius:14px !important;
  font-weight:900 !important;
}
.modal .btn + .btn{margin-left:0 !important;}
.modal .row{margin-left:-10px !important;margin-right:-10px !important;}
.modal .row>[class*="col-"]{padding-left:10px !important;padding-right:10px !important;}
.modal-backdrop{
  position:fixed !important;
  inset:0 !important;
  z-index:29990 !important;
  background:rgba(15,23,42,.54) !important;
  backdrop-filter:blur(7px) !important;
}
.modal-backdrop.in,
.modal-backdrop.show{opacity:1 !important;}
.bootstrap-select .dropdown-menu,
.select2-container--open,
.select2-dropdown,
.datepicker,
.datetimepicker,
.daterangepicker,
.ui-datepicker,
.bootstrap-datetimepicker-widget{
  z-index:30050 !important;
}
body.modal-open .select2-container{z-index:30050 !important;}
@media (max-width:767px){
  .modal{
    padding:10px !important;
    align-items:flex-start !important;
  }
  .modal.in,
  .modal.show{
    align-items:flex-start !important;
    padding-top:14px !important;
  }
  .modal-dialog,
  .modal-sm,
  .modal-lg,
  .modal-xl{
    width:calc(100vw - 20px) !important;
    max-height:calc(100dvh - 28px) !important;
  }
  .modal-content{
    max-height:calc(100dvh - 28px) !important;
    border-radius:22px !important;
  }
  .modal-header{padding:15px 58px 14px 18px !important;min-height:54px !important;}
  .modal-title,.modal-header h4{font-size:18px !important;}
  .modal-body{padding:18px !important;max-height:calc(100dvh - 145px) !important;}
  .modal-footer{padding:14px 16px !important;display:grid !important;grid-template-columns:1fr;}
  .modal-footer .btn{width:100% !important;}
}

/* =========================================================
   Fix v11: Popup input transaksi tabungan agar kolom, search,
   dan daftar siswa tidak terpotong saat memasukkan data.
   ========================================================= */
.modal .form-horizontal .form-group{
  margin-left:0 !important;
  margin-right:0 !important;
}
.modal .form-horizontal .control-label,
.modal .form-horizontal .simbay-modal-label{
  display:block !important;
  float:none !important;
  width:100% !important;
  max-width:100% !important;
  padding:0 !important;
  margin:0 0 8px !important;
  text-align:left !important;
  white-space:normal !important;
  overflow:visible !important;
  line-height:1.4 !important;
}
.modal .form-horizontal .col-sm-12,
.modal .form-horizontal .col-xs-12,
.modal .form-horizontal [class*="col-sm-"],
.modal .form-horizontal [class*="col-xs-"]{
  float:none !important;
  width:100% !important;
  max-width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
.modal .bootstrap-select,
.modal .simbay-student-picker,
.modal .bootstrap-select .btn.dropdown-toggle{
  width:100% !important;
}
.modal .bootstrap-select .btn.dropdown-toggle{
  min-height:46px !important;
  padding:10px 42px 10px 14px !important;
  border-radius:16px !important;
  border:1px solid rgba(148,163,184,.42) !important;
  background:#fff !important;
  color:#0f172a !important;
  box-shadow:0 10px 24px rgba(15,23,42,.07) !important;
  font-weight:800 !important;
  text-align:left !important;
}
.modal .bootstrap-select .btn.dropdown-toggle:hover,
.modal .bootstrap-select.open .btn.dropdown-toggle{
  border-color:#2563eb !important;
  box-shadow:0 0 0 4px rgba(37,99,235,.12),0 12px 25px rgba(37,99,235,.10) !important;
}
.modal .bootstrap-select.btn-group .dropdown-toggle .caret{
  right:14px !important;
}
/* Dropdown bootstrap-select dipindah ke body lewat JS/data-container;
   style berikut memastikan tampil di atas modal dan tidak memotong isi. */
.bootstrap-select .dropdown-menu.open,
.bootstrap-select.open .dropdown-menu,
body.modal-open .bootstrap-select .dropdown-menu.open,
body.modal-open .bootstrap-select.open .dropdown-menu{
  z-index:40080 !important;
  border:1px solid rgba(148,163,184,.38) !important;
  border-radius:18px !important;
  background:#fff !important;
  box-shadow:0 26px 70px rgba(15,23,42,.28) !important;
  padding:8px !important;
  max-height:300px !important;
  overflow:hidden !important;
}
body.modal-open .bootstrap-select .bs-searchbox{
  padding:4px 4px 8px !important;
}
body.modal-open .bootstrap-select .bs-searchbox input{
  height:42px !important;
  border-radius:14px !important;
  border:1px solid rgba(148,163,184,.45) !important;
  box-shadow:none !important;
  padding:8px 12px !important;
  font-weight:800 !important;
}
body.modal-open .bootstrap-select .dropdown-menu.inner{
  max-height:205px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  border-radius:12px !important;
}
body.modal-open .bootstrap-select .dropdown-menu.inner::-webkit-scrollbar{width:7px;}
body.modal-open .bootstrap-select .dropdown-menu.inner::-webkit-scrollbar-thumb{background:rgba(37,99,235,.25);border-radius:999px;}
body.modal-open .bootstrap-select .dropdown-menu.inner li a{
  padding:9px 12px !important;
  border-radius:10px !important;
  color:#0f172a !important;
  font-weight:700 !important;
  white-space:normal !important;
}
body.modal-open .bootstrap-select .dropdown-menu.inner li.selected a,
body.modal-open .bootstrap-select .dropdown-menu.inner li a:hover,
body.modal-open .bootstrap-select .dropdown-menu.inner li.active a{
  background:linear-gradient(135deg,#2563eb,#06b6d4) !important;
  color:#fff !important;
}
.modal .modal-body form .btn[type="submit"]{
  margin-top:12px !important;
  min-width:122px !important;
  box-shadow:0 14px 26px rgba(22,163,74,.20) !important;
}
.modal .modal-body .bootstrap-select + br,
.modal .modal-body .bootstrap-select + br + br{
  display:none !important;
}
@media (max-width:767px){
  body.modal-open .bootstrap-select .dropdown-menu.open,
  body.modal-open .bootstrap-select.open .dropdown-menu{
    max-height:260px !important;
  }
  body.modal-open .bootstrap-select .dropdown-menu.inner{
    max-height:165px !important;
  }
}


/* =========================================================
   Fix v12: perlebar popup transaksi dan tampilkan nama siswa
   terpilih dengan jelas pada semua modal transaksi.
   ========================================================= */
.modal-dialog{
  width:min(820px,calc(100vw - 36px)) !important;
}
.modal-sm{width:min(460px,calc(100vw - 36px)) !important;}
.modal-lg{width:min(980px,calc(100vw - 36px)) !important;}
.modal-xl{width:min(1140px,calc(100vw - 36px)) !important;}
.modal-content,
.modal-body,
.modal .form-group,
.modal .bootstrap-select,
.modal .bootstrap-select .dropdown-toggle,
.modal .bootstrap-select .filter-option,
.modal .bootstrap-select .filter-option-inner,
.modal .bootstrap-select .filter-option-inner-inner{
  overflow:visible !important;
}
.modal .bootstrap-select,
.modal .bootstrap-select > .dropdown-toggle,
.modal .bootstrap-select .dropdown-toggle,
.modal .bootstrap-select .dropdown-menu,
.modal .bs-container,
.modal .simbay-student-picker{
  width:100% !important;
  min-width:100% !important;
}
.modal .bootstrap-select .btn.dropdown-toggle{
  min-height:58px !important;
  height:auto !important;
  padding:12px 44px 12px 16px !important;
}
.modal .bootstrap-select .dropdown-toggle .filter-option{
  position:static !important;
  display:block !important;
  width:100% !important;
  height:auto !important;
  padding:0 !important;
}
.modal .bootstrap-select .filter-option-inner{
  display:block !important;
  width:100% !important;
  padding-right:4px !important;
}
.modal .bootstrap-select .filter-option-inner-inner{
  display:block !important;
  width:100% !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  line-height:1.42 !important;
  word-break:break-word !important;
}
body.modal-open .bs-container,
body.modal-open .bootstrap-select.bs-container{
  z-index:40120 !important;
}
body.modal-open .bs-container .dropdown-menu,
body.modal-open .bootstrap-select.bs-container .dropdown-menu,
body.modal-open .bs-container .dropdown-menu.open{
  width:100% !important;
  min-width:100% !important;
  max-height:320px !important;
  overflow:hidden !important;
  z-index:40121 !important;
}
body.modal-open .bs-container .dropdown-menu .inner,
body.modal-open .bootstrap-select.bs-container .dropdown-menu .inner{
  max-height:245px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}
body.modal-open .bs-container .dropdown-menu li a,
body.modal-open .bootstrap-select.bs-container .dropdown-menu li a{
  white-space:normal !important;
  word-break:break-word !important;
}
@media (max-width:767px){
  .modal-dialog{width:calc(100vw - 20px) !important;}
  .modal .bootstrap-select .btn.dropdown-toggle{min-height:56px !important;}
  body.modal-open .bs-container .dropdown-menu,
  body.modal-open .bootstrap-select.bs-container .dropdown-menu{max-height:280px !important;}
  body.modal-open .bs-container .dropdown-menu .inner,
  body.modal-open .bootstrap-select.bs-container .dropdown-menu .inner{max-height:205px !important;}
}


/* =========================================================
   Fix v13: tombol Cari tidak tertutup, modal lebih rapi,
   dan sudut bawah popup kembali melengkung.
   ========================================================= */
.modal-dialog{
  width:min(820px,calc(100vw - 36px)) !important;
}
.modal-content{
  border-radius:28px !important;
  overflow:hidden !important;
  background:rgba(255,255,255,.97) !important;
}
.modal-header{
  border-radius:28px 28px 0 0 !important;
}
.modal-body{
  position:relative !important;
  padding:24px 28px 30px !important;
  background:#fff !important;
  border-radius:0 0 28px 28px !important;
  overflow:visible !important;
}
.modal .form-horizontal .form-group{
  display:block !important;
  margin:0 !important;
}
.modal .bootstrap-select{
  display:block !important;
  width:100% !important;
  min-width:100% !important;
  min-height:58px !important;
  height:auto !important;
  margin:0 0 22px !important;
  position:relative !important;
  float:none !important;
  clear:both !important;
}
.modal .bootstrap-select > .dropdown-toggle,
.modal .bootstrap-select .btn.dropdown-toggle{
  display:flex !important;
  align-items:center !important;
  width:100% !important;
  min-height:58px !important;
  height:auto !important;
  margin:0 !important;
  border-radius:18px !important;
  position:relative !important;
}
.modal .bootstrap-select .dropdown-toggle .filter-option{
  position:static !important;
  height:auto !important;
  width:100% !important;
  padding:0 !important;
  line-height:1.4 !important;
}
.modal .bootstrap-select .filter-option-inner,
.modal .bootstrap-select .filter-option-inner-inner{
  display:block !important;
  width:100% !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  word-break:break-word !important;
}
.modal .modal-body .bootstrap-select + br,
.modal .modal-body .bootstrap-select + br + br{
  display:none !important;
}
.modal .modal-body form .btn[type="submit"],
.modal .modal-body button[type="submit"],
.modal .modal-body input[type="submit"]{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  min-width:135px !important;
  min-height:46px !important;
  padding:10px 24px !important;
  margin-top:0 !important;
  clear:both !important;
  position:relative !important;
  z-index:2 !important;
  border-radius:14px !important;
  font-weight:900 !important;
}
.modal .control-label,
.modal .simbay-modal-label{
  margin-bottom:10px !important;
}
body.modal-open .bs-container,
body.modal-open .bootstrap-select.bs-container{
  z-index:40120 !important;
}
body.modal-open .bs-container .dropdown-menu,
body.modal-open .bootstrap-select.bs-container .dropdown-menu,
body.modal-open .bs-container .dropdown-menu.open{
  z-index:40121 !important;
  border-radius:18px !important;
}
@media (max-width:767px){
  .modal-dialog{
    width:calc(100vw - 20px) !important;
  }
  .modal-body{
    padding:20px 18px 26px !important;
  }
  .modal-content{
    border-radius:24px !important;
  }
  .modal-header{
    border-radius:24px 24px 0 0 !important;
  }
  .modal-body{
    border-radius:0 0 24px 24px !important;
  }
}


/* =========================================================
   Fix v14: modal transaksi dibuat lebih ramping ke samping
   dan lebih panjang ke bawah agar input lebih nyaman.
   ========================================================= */
.modal-dialog{
  width:min(620px,calc(100vw - 48px)) !important;
  max-height:calc(100dvh - 40px) !important;
}
.modal-sm{width:min(420px,calc(100vw - 48px)) !important;}
.modal-lg{width:min(720px,calc(100vw - 48px)) !important;}
.modal-xl{width:min(860px,calc(100vw - 48px)) !important;}
.modal-content{
  min-height:300px !important;
  max-height:calc(100dvh - 40px) !important;
  border-radius:28px !important;
}
.modal-header{
  border-radius:28px 28px 0 0 !important;
}
.modal-body{
  padding:24px 28px 28px !important;
  min-height:210px !important;
  max-height:none !important;
  overflow:visible !important;
  border-radius:0 0 28px 28px !important;
}
.modal .bootstrap-select{
  margin-bottom:18px !important;
}
.modal .bootstrap-select > .dropdown-toggle,
.modal .bootstrap-select .btn.dropdown-toggle{
  min-height:60px !important;
  border-radius:18px !important;
}
.modal .modal-body form .btn[type="submit"],
.modal .modal-body button[type="submit"],
.modal .modal-body input[type="submit"]{
  margin-top:8px !important;
}
body.modal-open .bs-container .dropdown-menu,
body.modal-open .bootstrap-select.bs-container .dropdown-menu,
body.modal-open .bs-container .dropdown-menu.open{
  max-height:340px !important;
}
body.modal-open .bs-container .dropdown-menu .inner,
body.modal-open .bootstrap-select.bs-container .dropdown-menu .inner{
  max-height:255px !important;
}
@media (max-width:767px){
  .modal-dialog{
    width:calc(100vw - 24px) !important;
  }
  .modal-content{
    min-height:280px !important;
    border-radius:24px !important;
  }
  .modal-header{
    border-radius:24px 24px 0 0 !important;
  }
  .modal-body{
    min-height:200px !important;
    padding:20px 18px 24px !important;
    border-radius:0 0 24px 24px !important;
  }
}


/* =========================================================
   Fix v15: autocomplete siswa custom agar hasil pencarian
   muncul tepat di bawah kolom pencarian, bukan ke kiri layar.
   ========================================================= */
.modern-student-search-field{position:relative;z-index:20;}
.modern-student-autocomplete{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  display:none;
  max-height:320px;
  overflow:auto;
  background:rgba(255,255,255,.98);
  border:1px solid rgba(148,163,184,.32);
  border-radius:18px;
  box-shadow:0 18px 45px rgba(15,23,42,.18);
  padding:8px;
  z-index:1200;
}
.modern-student-autocomplete.is-open{display:block;}
.modern-student-autocomplete-item{
  display:block;
  width:100%;
  text-align:left;
  border:0;
  background:transparent;
  padding:10px 12px;
  border-radius:12px;
  color:#0f172a;
  font-weight:800;
  line-height:1.35;
}
.modern-student-autocomplete-item small{
  display:block;
  margin-top:3px;
  color:#64748b;
  font-size:11px;
  font-weight:700;
}
.modern-student-autocomplete-item:hover,
.modern-student-autocomplete-item.is-active{
  background:linear-gradient(135deg,#2563eb,#06b6d4);
  color:#fff;
}
.modern-student-autocomplete-item:hover small,
.modern-student-autocomplete-item.is-active small{color:rgba(255,255,255,.88);}
.modern-student-autocomplete-empty{
  padding:12px;
  color:#64748b;
  font-size:12px;
  font-weight:800;
}
body.modal-open .bootstrap-select .filter-option-inner-inner{position:relative;z-index:2;}


/* =========================================================
   Fix v16: hasil pencarian siswa harus muncul di depan,
   tidak tenggelam di bawah konten lain, termasuk di modal.
   ========================================================= */
body.modern-content-view .box,
body.modern-content-view .box-body,
body.modern-content-view .modern-search-form,
body.modern-content-view .modern-search-form-v4,
body.modern-content-view .modern-student-search-row,
body.modern-content-view .modern-student-search-field{
  overflow:visible !important;
}
body.modern-content-view .modern-search-form-v4,
body.modern-content-view .modern-student-search-row,
body.modern-content-view .modern-student-search-field,
body.modern-content-view .box.box-warning.box-solid{
  position:relative !important;
}
body.modern-content-view .modern-search-form-v4,
body.modern-content-view .modern-student-search-row,
body.modern-content-view .modern-student-search-field{
  z-index:2500 !important;
}
.modern-student-autocomplete{
  z-index:2600 !important;
  max-height:360px !important;
}
.modern-student-autocomplete.is-open{
  display:block !important;
}

.modal,
.modal-dialog,
.modal-content,
.modal-body,
.modal .form-group,
.modal .col-sm-12,
.modal .bootstrap-select,
.modal .bootstrap-select.open,
.modal .bootstrap-select .dropdown-menu,
.modal .bootstrap-select .dropdown-menu.open,
.modal .bootstrap-select .dropdown-menu.inner{
  overflow:visible !important;
}
.modal-content{
  border-radius:28px !important;
}
body.modal-open .bs-container,
body.modal-open .bootstrap-select.bs-container,
body.modal-open .bootstrap-select.open,
body.modal-open .bootstrap-select .dropdown-menu.open{
  z-index:50020 !important;
}
body.modal-open .bs-container .dropdown-menu,
body.modal-open .bootstrap-select.bs-container .dropdown-menu,
body.modal-open .bs-container .dropdown-menu.open,
body.modal-open .bootstrap-select.open .dropdown-menu{
  z-index:50021 !important;
  max-height:360px !important;
}
body.modal-open .bs-container .dropdown-menu .inner,
body.modal-open .bootstrap-select.bs-container .dropdown-menu .inner,
body.modal-open .bootstrap-select.open .dropdown-menu .inner{
  max-height:280px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}
@media (max-width:767px){
  .modern-student-autocomplete{max-height:300px !important;}
  body.modal-open .bs-container .dropdown-menu,
  body.modal-open .bootstrap-select.bs-container .dropdown-menu,
  body.modal-open .bootstrap-select.open .dropdown-menu{max-height:300px !important;}
  body.modal-open .bs-container .dropdown-menu .inner,
  body.modal-open .bootstrap-select.bs-container .dropdown-menu .inner,
  body.modal-open .bootstrap-select.open .dropdown-menu .inner{max-height:220px !important;}
}


/* Fix v18: rincian grafik tabungan dipisah antara setor dan tarik */
.modern-chart-split-summary{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;}
.modern-chart-split-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:14px;background:rgba(37,99,235,.08);color:#334155;font-size:12px;font-weight:800;}
.modern-chart-split-badge i{font-size:13px;}
.modern-chart-split-badge strong{font-size:12px;font-weight:900;color:#0f172a;}
.modern-mini-chart-item strong{display:block;width:100%;margin-top:8px;color:#0f172a;font-size:12px;font-weight:900;text-align:center;line-height:1.25;}
.modern-mini-chart-item small{display:block;width:100%;margin-top:3px;color:#64748b;font-size:10px;font-weight:800;text-align:center;line-height:1.2;}


/* =========================================================
   Fix v19: grafik tabungan dibuat lebih elegan, hidup,
   profesional, dan tanpa menampilkan jumlah transaksi.
   ========================================================= */
.modern-chart-card.modern-chart-saving{
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,250,252,.94)) !important;
}
.modern-chart-saving .modern-chart-head{
  align-items:flex-start !important;
  gap:14px !important;
}
.modern-chart-saving .modern-chart-head small{
  display:block;
  margin-bottom:4px;
  color:#64748b !important;
  letter-spacing:.08em;
}
.modern-chart-saving .modern-chart-head strong{
  display:block;
  font-size:34px;
  line-height:1.05;
  color:#0f172a !important;
  font-weight:900;
  margin-bottom:10px;
}
.modern-chart-saving .modern-chart-head b{
  display:none !important;
}
.modern-chart-split-summary{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:6px;
}
.modern-chart-split-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.95);
  border:1px solid rgba(148,163,184,.18);
  box-shadow:0 10px 24px rgba(15,23,42,.07);
  color:#334155;
  font-size:12px;
  font-weight:800;
}
.modern-chart-split-badge i{
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  color:#fff;
  font-size:13px;
}
.modern-chart-split-badge.badge-setor i{background:linear-gradient(135deg,#22c55e,#10b981);}
.modern-chart-split-badge.badge-tarik i{background:linear-gradient(135deg,#3b82f6,#06b6d4);}
.modern-chart-split-badge span{color:#64748b;font-weight:800;}
.modern-chart-split-badge strong{font-size:15px !important;margin:0 !important;color:#0f172a !important;}
.modern-chart-saving .modern-mini-chart{
  margin-top:10px;
  padding:8px 6px 2px;
}
.modern-chart-saving .modern-mini-chart-item{
  padding:4px 10px 0;
}
.modern-chart-saving .modern-mini-chart-bar{
  max-width:40px;
  height:88px;
  margin:0 auto;
  background:linear-gradient(180deg,#eef2ff,#e2e8f0);
}
.modern-chart-saving .modern-mini-chart-bar span{
  background:linear-gradient(180deg,#86efac 0%,#22c55e 58%,#16a34a 100%) !important;
  box-shadow:0 10px 18px rgba(34,197,94,.24);
}
.modern-chart-saving .modern-mini-chart-item em{
  margin-top:10px;
  font-size:13px;
  color:#334155;
  font-weight:900;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}
.modern-chart-saving .modern-mini-chart-item strong{
  display:block;
  margin-top:4px;
  font-size:20px;
  color:#0f172a;
  font-weight:900;
  line-height:1.15;
}
.modern-chart-saving .modern-mini-chart-item small{
  display:none !important;
}
.modern-chart-saving .modern-chart-caption{
  margin-top:12px;
  border-radius:16px;
  background:linear-gradient(135deg,rgba(248,250,252,.98),rgba(241,245,249,.96));
  color:#475569;
  font-weight:800;
}
@media (max-width:767px){
  .modern-chart-saving .modern-chart-head strong{font-size:28px;}
  .modern-chart-split-summary{gap:8px;}
  .modern-chart-split-badge{width:100%;justify-content:flex-start;}
  .modern-chart-saving .modern-mini-chart-item strong{font-size:17px;}
}


/* =========================================================
   Fix v20: turunkan caption grafik ke bawah dan sejajarkan
   kedua kartu grafik dashboard.
   ========================================================= */
.modern-dashboard-chart-grid{
  align-items:stretch !important;
}
.modern-dashboard-chart-grid .modern-chart-card{
  display:flex !important;
  flex-direction:column !important;
  min-height:248px !important;
}
.modern-dashboard-chart-grid .modern-chart-head{
  flex:0 0 auto !important;
}
.modern-dashboard-chart-grid .modern-mini-chart{
  flex:1 1 auto !important;
  align-content:end !important;
}
.modern-dashboard-chart-grid .modern-chart-caption{
  margin-top:auto !important;
  align-self:stretch !important;
}
body.modern-dashboard-view .modern-dashboard-chart-grid .modern-chart-card{
  min-height:232px !important;
}
@media(max-width:1199px){
  .modern-dashboard-chart-grid .modern-chart-card,
  body.modern-dashboard-view .modern-dashboard-chart-grid .modern-chart-card{
    min-height:auto !important;
  }
}


/* =========================================================
   Fix v21: dropdown siswa popup transaksi stabil dan muncul.
   ========================================================= */
.modal .simbay-student-picker{width:100% !important;min-height:54px !important;}
.modal .bootstrap-select{width:100% !important;}
.modal .bootstrap-select > .dropdown-toggle{min-height:54px !important;border-radius:18px !important;}
body.modal-open .bs-container.bootstrap-select,
body.modal-open .bootstrap-select.bs-container,
body.modal-open .bootstrap-select.open{z-index:70000 !important;}
body.modal-open .bs-container.bootstrap-select .dropdown-menu,
body.modal-open .bootstrap-select.bs-container .dropdown-menu,
body.modal-open .bootstrap-select.open .dropdown-menu{
  z-index:70001 !important;
  max-height:380px !important;
}
body.modal-open .bs-container .dropdown-menu.inner,
body.modal-open .bootstrap-select.bs-container .dropdown-menu.inner,
body.modal-open .bootstrap-select.open .dropdown-menu.inner{
  max-height:290px !important;
  overflow-y:auto !important;
}
.modal select.simbay-student-picker:not(.bs-select-hidden){
  display:block !important;
  height:54px !important;
  padding:10px 14px !important;
  border-radius:18px !important;
  border:1px solid rgba(37,99,235,.45) !important;
  background:#fff !important;
  color:#0f172a !important;
  font-weight:800 !important;
}


/* =========================================================
   Fix v22: pencarian siswa di popup tabungan dibuat native.
   Tujuan: klik "- Cari Siswa -" pasti menampilkan daftar siswa.
   ========================================================= */
.modal select.simbay-native-student-select{
  display:block !important;
  width:100% !important;
  min-height:58px !important;
  height:58px !important;
  padding:10px 44px 10px 16px !important;
  border-radius:18px !important;
  border:1px solid rgba(37,99,235,.45) !important;
  background:#fff !important;
  color:#0f172a !important;
  font-weight:900 !important;
  box-shadow:0 10px 24px rgba(15,23,42,.07), 0 0 0 4px rgba(37,99,235,.08) !important;
  cursor:pointer !important;
  appearance:auto !important;
  -webkit-appearance:menulist !important;
  -moz-appearance:auto !important;
}
.modal select.simbay-native-student-select:focus{
  outline:none !important;
  border-color:#2563eb !important;
  box-shadow:0 0 0 4px rgba(37,99,235,.16),0 12px 28px rgba(37,99,235,.14) !important;
}
.modal select.simbay-native-student-select option{
  color:#0f172a !important;
  background:#fff !important;
  font-weight:700 !important;
  padding:8px 10px !important;
}
.modal select.simbay-native-student-select + .bootstrap-select,
.modal .bootstrap-select:has(+ select.simbay-native-student-select){
  display:none !important;
}
.modal .simbay-modal-student-form .btn[type="submit"]{
  margin-top:18px !important;
}
@media(max-width:767px){
  .modal select.simbay-native-student-select{
    min-height:56px !important;
    height:56px !important;
    font-size:13px !important;
  }
}


/* =========================================================
   Fix v23: pencarian siswa modal tabungan tampil ke bawah
   dengan kolom "ketik cari" dan hasil muncul di depan.
   ========================================================= */
.simbay-modal-student-picker-wrap{
  position:relative !important;
  width:100% !important;
}
.simbay-modal-student-hidden{
  position:absolute !important;
  opacity:0 !important;
  pointer-events:none !important;
  width:1px !important;
  height:1px !important;
}
.simbay-modal-student-input{
  display:block !important;
  width:100% !important;
  min-height:54px !important;
  padding:12px 16px !important;
  border-radius:18px !important;
  border:1px solid rgba(37,99,235,.30) !important;
  background:#fff !important;
  color:#0f172a !important;
  font-weight:800 !important;
  box-shadow:0 8px 24px rgba(15,23,42,.06) !important;
}
.simbay-modal-student-input:focus{
  border-color:#2563eb !important;
  box-shadow:0 0 0 4px rgba(37,99,235,.14), 0 12px 28px rgba(37,99,235,.14) !important;
  outline:none !important;
}
.simbay-modal-student-source{
  display:none !important;
}
.simbay-modal-student-results{
  display:none;
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 8px);
  z-index:90000 !important;
  max-height:260px;
  overflow-y:auto;
  background:#fff;
  border:1px solid rgba(148,163,184,.25);
  border-radius:18px;
  box-shadow:0 20px 40px rgba(15,23,42,.18);
  padding:8px;
}
.simbay-modal-student-results.is-open{display:block !important;}
.simbay-modal-student-result-item{
  display:block;
  width:100%;
  text-align:left;
  padding:11px 12px;
  border:0;
  background:transparent;
  border-radius:12px;
  color:#0f172a;
  font-weight:800;
  line-height:1.35;
}
.simbay-modal-student-result-item:hover,
.simbay-modal-student-result-item.active{
  background:linear-gradient(135deg,#2563eb,#06b6d4);
  color:#fff;
}
.modal .simbay-modal-student-picker-wrap + br{
  display:none !important;
}
.modal .simbay-modal-student-picker-wrap{
  margin-bottom:14px !important;
}


/* =========================================================
   Fix v24: cari siswa transaksi tabungan disamakan dengan
   mode pencarian pembayaran siswa.
   ========================================================= */
.simbay-payment-style-picker{
  position:relative !important;
  width:100% !important;
  margin-bottom:18px !important;
  z-index:92000 !important;
}
.simbay-payment-style-picker > .fa{
  position:absolute !important;
  left:16px !important;
  top:27px !important;
  transform:translateY(-50%) !important;
  color:#2563eb !important;
  z-index:2 !important;
  pointer-events:none !important;
}
.simbay-payment-style-picker .simbay-modal-student-input{
  height:54px !important;
  min-height:54px !important;
  padding-left:44px !important;
  border-radius:18px !important;
  border:1px solid rgba(148,163,184,.42) !important;
  background:rgba(255,255,255,.98) !important;
  color:#0f172a !important;
  font-weight:850 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88),0 9px 24px rgba(15,23,42,.07) !important;
}
.simbay-payment-style-picker .simbay-modal-student-input:focus{
  border-color:#2563eb !important;
  box-shadow:0 0 0 4px rgba(37,99,235,.12),0 12px 28px rgba(37,99,235,.12) !important;
  outline:none !important;
}
.simbay-payment-style-picker .simbay-modal-student-results,
.simbay-payment-style-picker .modern-student-autocomplete{
  position:absolute !important;
  top:calc(100% + 8px) !important;
  left:0 !important;
  right:0 !important;
  display:none;
  max-height:290px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  background:rgba(255,255,255,.99) !important;
  border:1px solid rgba(148,163,184,.30) !important;
  border-radius:18px !important;
  box-shadow:0 20px 45px rgba(15,23,42,.20) !important;
  padding:8px !important;
  z-index:93000 !important;
}
.simbay-payment-style-picker .simbay-modal-student-results.is-open,
.simbay-payment-style-picker .modern-student-autocomplete.is-open{
  display:block !important;
}
.simbay-payment-style-picker .simbay-modal-student-result-item,
.simbay-payment-style-picker .modern-student-autocomplete-item{
  display:block !important;
  width:100% !important;
  text-align:left !important;
  border:0 !important;
  background:transparent !important;
  padding:10px 12px !important;
  border-radius:12px !important;
  color:#0f172a !important;
  font-weight:850 !important;
  line-height:1.35 !important;
}
.simbay-payment-style-picker .simbay-modal-student-result-item:hover,
.simbay-payment-style-picker .simbay-modal-student-result-item.active,
.simbay-payment-style-picker .modern-student-autocomplete-item:hover,
.simbay-payment-style-picker .modern-student-autocomplete-item.is-active{
  background:linear-gradient(135deg,#2563eb,#06b6d4) !important;
  color:#fff !important;
}
.simbay-payment-style-picker .simbay-modal-student-source,
.simbay-payment-style-picker select.simbay-modal-student-source{
  display:none !important;
}
.modal .simbay-payment-style-picker + br{
  display:none !important;
}
.modal .simbay-modal-student-form .btn[type="submit"]{
  margin-top:16px !important;
}

/* =========================================================
   Fix v25: sidebar mobile/tablet muncul, bisa digeser/scroll,
   dan konten tetap nyaman saat dibuka di HP/tablet.
   ========================================================= */
@media (min-width: 992px){
  body:not(.modern-public-body) .main-sidebar{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    height:100vh !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    z-index:1030 !important;
  }
  body:not(.modern-public-body) .content-wrapper{
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }
}
@media (max-width: 991px){
  html, body{overflow-x:hidden !important;}
  body:not(.modern-public-body){overflow:hidden !important;}
  body:not(.modern-public-body) .wrapper{min-height:100dvh !important;height:100dvh !important;overflow:hidden !important;}
  body:not(.modern-public-body) .main-header{position:fixed !important;top:0 !important;left:0 !important;right:0 !important;z-index:5060 !important;}
  body:not(.modern-public-body) .main-header .navbar{margin-left:0 !important;width:100% !important;min-height:58px !important;}
  body:not(.modern-public-body) .main-header .logo{display:none !important;}
  body:not(.modern-public-body) .main-header .sidebar-toggle{display:flex !important;align-items:center !important;justify-content:center !important;position:relative !important;width:58px !important;height:58px !important;line-height:58px !important;z-index:5065 !important;color:#0f172a !important;background:rgba(255,255,255,.85) !important;}
  body:not(.modern-public-body) .content-wrapper,
  body:not(.modern-public-body) .right-side{margin-left:0 !important;padding-top:58px !important;height:100dvh !important;min-height:100dvh !important;overflow-y:auto !important;overflow-x:hidden !important;-webkit-overflow-scrolling:touch !important;}
  body:not(.modern-public-body) .main-sidebar,
  body:not(.modern-public-body) .left-side{position:fixed !important;top:0 !important;bottom:0 !important;left:0 !important;width:270px !important;max-width:84vw !important;height:100dvh !important;padding-top:58px !important;overflow-y:auto !important;overflow-x:hidden !important;-webkit-overflow-scrolling:touch !important;transform:translate3d(-280px,0,0) !important;transition:transform .28s ease !important;z-index:5050 !important;box-shadow:20px 0 50px rgba(15,23,42,.36) !important;will-change:transform !important;}
  body.sidebar-open:not(.modern-public-body) .main-sidebar,
  body.sidebar-open:not(.modern-public-body) .left-side{transform:translate3d(0,0,0) !important;}
  body.sidebar-collapse:not(.modern-public-body):not(.sidebar-open) .main-sidebar,
  body.sidebar-collapse:not(.modern-public-body):not(.sidebar-open) .left-side{transform:translate3d(-280px,0,0) !important;}
  body.sidebar-open:not(.modern-public-body)::after{content:"" !important;position:fixed !important;inset:0 !important;background:rgba(15,23,42,.48) !important;backdrop-filter:blur(4px) !important;z-index:5040 !important;}
  body.sidebar-open:not(.modern-public-body) .main-header,
  body.sidebar-open:not(.modern-public-body) .main-sidebar{pointer-events:auto !important;}
  body.sidebar-open:not(.modern-public-body) .content-wrapper{pointer-events:none !important;}
  body:not(.modern-public-body) .sidebar{height:auto !important;min-height:calc(100dvh - 58px) !important;overflow:visible !important;padding-bottom:90px !important;}
  body:not(.modern-public-body) .sidebar-menu{padding-bottom:90px !important;}
  body:not(.modern-public-body) .sidebar-menu > li > a{min-height:46px !important;}
  body:not(.modern-public-body) .main-footer{margin-left:0 !important;}
}
@media (max-width:480px){
  body:not(.modern-public-body) .main-sidebar,
  body:not(.modern-public-body) .left-side{width:260px !important;max-width:86vw !important;}
  body:not(.modern-public-body) .content{padding:12px !important;}
  body:not(.modern-public-body) .content-header{padding:12px 12px 0 !important;}
}


/* =========================================================
   Fix v26: Responsif penuh laptop/tablet/HP + tombol install PWA.
   ========================================================= */
:root{
  --simbay-safe-top: env(safe-area-inset-top, 0px);
  --simbay-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Konten utama adaptif */
body:not(.modern-public-body) .content-wrapper{
  min-width:0 !important;
}
body:not(.modern-public-body) .content,
body:not(.modern-public-body) .content-header{
  max-width:100% !important;
}
body:not(.modern-public-body) img,
body:not(.modern-public-body) canvas,
body:not(.modern-public-body) svg{
  max-width:100%;
}
.table-responsive{
  width:100% !important;
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch !important;
}
.table{
  min-width:720px;
}
.box,
.panel,
.nav-tabs-custom{
  max-width:100% !important;
}
.form-control,
.select2-container,
.bootstrap-select,
.input-group{
  max-width:100% !important;
}

/* Laptop kecil */
@media (min-width: 992px) and (max-width: 1366px){
  body:not(.modern-public-body) .content{padding:14px !important;}
  body:not(.modern-public-body) .content-header{padding:14px 14px 0 !important;}
  .modern-dashboard-grid{gap:10px !important;}
  .modern-stat-card{min-height:78px !important;padding:12px !important;}
  .modern-stat-icon{width:52px !important;height:52px !important;font-size:22px !important;}
  .modern-dashboard-hero{padding:18px 22px !important;min-height:auto !important;}
  .modern-dashboard-hero h2{font-size:24px !important;}
  .modern-chart-card{min-height:220px !important;}
}

/* Tablet dan HP: sidebar benar-benar tampil dan bisa discroll */
@media (max-width: 991px){
  html, body{overflow-x:hidden !important;}
  body:not(.modern-public-body){overflow:hidden !important;}
  body:not(.modern-public-body) .wrapper{
    height:100dvh !important;
    min-height:100dvh !important;
    overflow:hidden !important;
  }
  body:not(.modern-public-body) .main-header{
    position:fixed !important;
    top:0 !important; left:0 !important; right:0 !important;
    z-index:5060 !important;
    padding-top:var(--simbay-safe-top) !important;
  }
  body:not(.modern-public-body) .main-header .logo{display:none !important;}
  body:not(.modern-public-body) .main-header .navbar{
    margin-left:0 !important;
    min-height:58px !important;
    width:100% !important;
  }
  body:not(.modern-public-body) .main-header .sidebar-toggle{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:58px !important;
    height:58px !important;
    line-height:58px !important;
    position:relative !important;
    z-index:5070 !important;
    color:#0f172a !important;
  }
  body:not(.modern-public-body) .content-wrapper,
  body:not(.modern-public-body) .right-side{
    margin-left:0 !important;
    padding-top:calc(58px + var(--simbay-safe-top)) !important;
    height:100dvh !important;
    min-height:100dvh !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
  }
  body:not(.modern-public-body) .content{
    padding:14px !important;
  }
  body:not(.modern-public-body) .content-header{
    padding:14px 14px 0 !important;
  }
  body:not(.modern-public-body) .main-sidebar,
  body:not(.modern-public-body) .left-side{
    position:fixed !important;
    top:0 !important;
    bottom:0 !important;
    left:0 !important;
    width:280px !important;
    max-width:86vw !important;
    height:100dvh !important;
    padding-top:calc(58px + var(--simbay-safe-top)) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    transform:translate3d(-292px,0,0) !important;
    transition:transform .28s ease !important;
    z-index:5050 !important;
    box-shadow:20px 0 50px rgba(15,23,42,.38) !important;
    will-change:transform !important;
  }
  body.sidebar-open:not(.modern-public-body) .main-sidebar,
  body.sidebar-open:not(.modern-public-body) .left-side{
    transform:translate3d(0,0,0) !important;
  }
  body.sidebar-collapse:not(.modern-public-body):not(.sidebar-open) .main-sidebar,
  body.sidebar-collapse:not(.modern-public-body):not(.sidebar-open) .left-side{
    transform:translate3d(-292px,0,0) !important;
  }
  body.sidebar-open:not(.modern-public-body)::after{
    content:"" !important;
    position:fixed !important;
    inset:0 !important;
    background:rgba(15,23,42,.48) !important;
    backdrop-filter:blur(4px) !important;
    z-index:5040 !important;
  }
  body.sidebar-open:not(.modern-public-body) .content-wrapper{
    pointer-events:none !important;
  }
  body.sidebar-open:not(.modern-public-body) .main-sidebar,
  body.sidebar-open:not(.modern-public-body) .main-header{
    pointer-events:auto !important;
  }
  body:not(.modern-public-body) .sidebar{
    height:auto !important;
    min-height:calc(100dvh - 58px) !important;
    overflow:visible !important;
    padding-bottom:100px !important;
  }
  body:not(.modern-public-body) .sidebar-menu{
    padding-bottom:110px !important;
  }
  body:not(.modern-public-body) .main-footer{
    margin-left:0 !important;
    position:relative !important;
  }
  .modern-dashboard-grid,
  .modern-dashboard-chart-grid{
    grid-template-columns:1fr !important;
  }
  .modern-student-search-row{
    grid-template-columns:1fr !important;
  }
  .modern-search-form-v4 .modern-search-btn{
    width:100% !important;
  }
  .modal-dialog{
    width:calc(100vw - 24px) !important;
  }
}

/* HP kecil */
@media (max-width: 575px){
  body:not(.modern-public-body) .content{padding:10px !important;}
  body:not(.modern-public-body) .content-header{padding:10px 10px 0 !important;}
  .content-header h1{
    font-size:17px !important;
    line-height:1.3 !important;
  }
  .box-body,.panel-body{padding:13px !important;}
  .modern-dashboard-hero{
    padding:16px !important;
    border-radius:20px !important;
  }
  .modern-dashboard-hero h2{
    font-size:20px !important;
  }
  .modern-dashboard-datebox{
    width:100% !important;
    margin-top:10px !important;
  }
  .modern-stat-card{
    min-height:auto !important;
    padding:12px !important;
  }
  .modern-stat-icon{
    width:48px !important;
    height:48px !important;
    font-size:20px !important;
  }
  .modern-chart-head{
    display:block !important;
  }
  .modern-chart-head > span{
    position:absolute !important;
    right:14px !important;
    top:14px !important;
  }
  .table{min-width:680px;}
}

/* Portal/landing page responsif */
@media (max-width: 991px){
  .modern-portal-wrap,
  .modern-public-body{
    min-height:100dvh !important;
    overflow-y:auto !important;
  }
  .modern-portal-shell{
    width:min(100%, 920px) !important;
    min-height:auto !important;
    grid-template-columns:1fr !important;
  }
  .modern-hero-left,
  .modern-portal-right{
    padding:28px !important;
  }
  .modern-portal-title,
  .modern-hero-left h1{
    font-size:42px !important;
    line-height:1.08 !important;
  }
}
@media (max-width:575px){
  .modern-portal-shell{
    border-radius:24px !important;
    margin:10px !important;
  }
  .modern-hero-left,
  .modern-portal-right{
    padding:22px 18px !important;
  }
  .modern-portal-title,
  .modern-hero-left h1{
    font-size:32px !important;
  }
  .modern-portal-feature-grid{
    grid-template-columns:1fr !important;
  }
  .modern-portal-card{
    padding:16px !important;
  }
  .modern-portal-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
}

/* Tombol install PWA */
.simbay-install-prompt{
  position:fixed;
  right:18px;
  bottom:calc(18px + var(--simbay-safe-bottom));
  z-index:90000;
  width:min(420px, calc(100vw - 28px));
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border-radius:22px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(255,255,255,.74);
  box-shadow:0 28px 80px rgba(15,23,42,.28);
  backdrop-filter:blur(18px);
  transform:translateY(130%);
  opacity:0;
  pointer-events:none;
  transition:.28s ease;
}
.simbay-install-prompt.is-visible{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}
.simbay-install-close{
  position:absolute;
  top:8px;
  right:10px;
  border:0;
  width:28px;
  height:28px;
  border-radius:999px;
  background:#eef2ff;
  color:#0f172a;
  font-size:18px;
  font-weight:900;
}
.simbay-install-icon{
  width:48px;
  height:48px;
  flex:0 0 48px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:linear-gradient(135deg,#2563eb,#06b6d4);
  box-shadow:0 14px 30px rgba(37,99,235,.24);
  font-size:20px;
}
.simbay-install-text{
  min-width:0;
  padding-right:14px;
}
.simbay-install-text strong{
  display:block;
  color:#0f172a;
  font-size:15px;
  font-weight:950;
}
.simbay-install-text span{
  display:block;
  color:#64748b;
  font-size:12px;
  line-height:1.35;
  font-weight:700;
}
.simbay-install-btn{
  border:0;
  border-radius:14px;
  padding:10px 13px;
  color:#fff;
  background:linear-gradient(135deg,#16a34a,#22c55e);
  font-weight:900;
  white-space:nowrap;
  box-shadow:0 14px 28px rgba(22,163,74,.22);
}
.simbay-install-guide{
  position:fixed;
  inset:0;
  z-index:90100;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(15,23,42,.56);
  backdrop-filter:blur(7px);
  opacity:0;
  pointer-events:none;
  transition:.22s ease;
}
.simbay-install-guide.is-visible{
  opacity:1;
  pointer-events:auto;
}
.simbay-install-guide-card{
  position:relative;
  width:min(420px,100%);
  border-radius:28px;
  background:#fff;
  padding:28px;
  text-align:center;
  box-shadow:0 28px 90px rgba(15,23,42,.34);
}
.simbay-install-guide-close{
  position:absolute;
  top:12px;
  right:14px;
  width:34px;
  height:34px;
  border:0;
  border-radius:999px;
  background:#eef2ff;
  font-size:22px;
  font-weight:900;
}
.simbay-install-guide-icon{
  width:66px;
  height:66px;
  margin:0 auto 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:22px;
  background:linear-gradient(135deg,#2563eb,#06b6d4);
  color:#fff;
  font-size:30px;
}
.simbay-install-guide-card h3{
  margin:0 0 8px;
  color:#0f172a;
  font-size:24px;
  font-weight:950;
}
.simbay-install-guide-card p{
  margin:0 0 18px;
  color:#475569;
  line-height:1.65;
  font-weight:700;
}
.simbay-install-guide-ok{
  border:0;
  border-radius:14px;
  padding:11px 18px;
  color:#fff;
  background:linear-gradient(135deg,#2563eb,#06b6d4);
  font-weight:900;
}
@media(max-width:575px){
  .simbay-install-prompt{
    left:10px;
    right:10px;
    bottom:calc(10px + var(--simbay-safe-bottom));
    width:auto;
    padding:12px;
  }
  .simbay-install-text span{
    display:none;
  }
  .simbay-install-btn{
    padding:9px 11px;
    font-size:12px;
  }
}


/* =========================================================
   Fix v27: tabel mobile/tablet bisa digeser kanan-kiri
   dan bottom bar dibuat lebih rapi di HP/tablet.
   ========================================================= */

/* Area tabel harus menjadi area geser horizontal sendiri */
@media (max-width: 991px){
  body:not(.modern-public-body) .content-wrapper{
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }

  body:not(.modern-public-body) .content,
  body:not(.modern-public-body) .box,
  body:not(.modern-public-body) .box-body,
  body:not(.modern-public-body) .panel,
  body:not(.modern-public-body) .panel-body{
    max-width:100% !important;
  }

  body:not(.modern-public-body) .box-body.table-responsive,
  body:not(.modern-public-body) .table-responsive,
  body:not(.modern-public-body) .dataTables_wrapper,
  body:not(.modern-public-body) .dataTables_scroll,
  body:not(.modern-public-body) .dataTables_scrollBody{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    overflow-y:visible !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-x pan-y !important;
    overscroll-behavior-x:contain !important;
  }

  body:not(.modern-public-body) .dataTables_scrollBody{
    overflow-y:auto !important;
  }

  body:not(.modern-public-body) table.table,
  body:not(.modern-public-body) .table-responsive > table,
  body:not(.modern-public-body) .dataTable{
    width:max-content !important;
    min-width:920px !important;
    max-width:none !important;
    table-layout:auto !important;
    white-space:nowrap !important;
  }

  body:not(.modern-public-body) table.table th,
  body:not(.modern-public-body) table.table td,
  body:not(.modern-public-body) .dataTable th,
  body:not(.modern-public-body) .dataTable td{
    white-space:nowrap !important;
  }

  /* Penanda visual agar pengguna tahu tabel bisa digeser */
  body:not(.modern-public-body) .box-body.table-responsive::after,
  body:not(.modern-public-body) .table-responsive::after{
    content:"Geser tabel ke kanan/kiri";
    position:sticky;
    left:10px;
    bottom:8px;
    display:inline-flex;
    margin-top:8px;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(37,99,235,.10);
    color:#1e3a8a;
    font-size:11px;
    font-weight:900;
    pointer-events:none;
  }
}

/* HP kecil: tabel tetap bisa diswipe, ukuran minimum lebih pas */
@media (max-width: 575px){
  body:not(.modern-public-body) table.table,
  body:not(.modern-public-body) .table-responsive > table,
  body:not(.modern-public-body) .dataTable{
    min-width:860px !important;
  }

  body:not(.modern-public-body) .box-body.table-responsive,
  body:not(.modern-public-body) .table-responsive{
    padding-bottom:14px !important;
  }
}

/* Bottom bar mobile/tablet dibuat ringkas, tidak seperti kartu besar */
@media (max-width: 991px){
  body:not(.modern-public-body) .main-footer{
    margin-left:0 !important;
    padding:8px 10px calc(8px + var(--simbay-safe-bottom)) !important;
    border-top:1px solid rgba(148,163,184,.22) !important;
    background:rgba(255,255,255,.94) !important;
    backdrop-filter:blur(14px) !important;
    box-shadow:0 -10px 26px rgba(15,23,42,.08) !important;
    border-radius:0 !important;
  }

  body:not(.modern-public-body) .modern-bottom-appbar{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
    min-height:42px !important;
    padding:0 !important;
    font-size:11px !important;
  }

  body:not(.modern-public-body) .modern-bottom-brand{
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
    min-width:0 !important;
    flex:1 1 auto !important;
    flex-wrap:nowrap !important;
  }

  body:not(.modern-public-body) .modern-bottom-brand .fa{
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    border-radius:10px !important;
    font-size:14px !important;
  }

  body:not(.modern-public-body) .modern-bottom-brand strong{
    font-size:13px !important;
    line-height:1.1 !important;
    white-space:nowrap !important;
  }

  body:not(.modern-public-body) .modern-bottom-brand span{
    display:none !important;
  }

  body:not(.modern-public-body) .modern-bottom-version{
    flex:0 0 auto !important;
    padding:7px 9px !important;
    border-radius:999px !important;
    font-size:10.5px !important;
    line-height:1.1 !important;
    max-width:48vw !important;
    white-space:normal !important;
    text-align:center !important;
  }
}

/* Pada HP sangat kecil, versi cukup pendek supaya tidak memenuhi layar */
@media (max-width: 420px){
  body:not(.modern-public-body) .modern-bottom-version{
    max-width:44vw !important;
    font-size:10px !important;
    padding:6px 8px !important;
  }

  body:not(.modern-public-body) .modern-bottom-brand strong{
    font-size:12.5px !important;
  }
}


/* =========================================================
   Fix v28: Sidebar HP/Tablet dibuat paksa muncul dengan
   tombol menu khusus dan overlay aman.
   ========================================================= */
@media (max-width: 991px){
  body:not(.modern-public-body) .main-sidebar,
  body:not(.modern-public-body) .left-side{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    bottom:0 !important;
    width:282px !important;
    max-width:86vw !important;
    height:100dvh !important;
    padding-top:58px !important;
    transform:translate3d(-105%,0,0) !important;
    transition:transform .28s ease !important;
    z-index:100010 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    box-shadow:24px 0 70px rgba(15,23,42,.42) !important;
  }

  body.simbay-sidebar-mobile-open:not(.modern-public-body) .main-sidebar,
  body.simbay-sidebar-mobile-open:not(.modern-public-body) .left-side,
  body.sidebar-open:not(.modern-public-body) .main-sidebar,
  body.sidebar-open:not(.modern-public-body) .left-side{
    transform:translate3d(0,0,0) !important;
  }

  body.simbay-sidebar-mobile-open:not(.modern-public-body) .content-wrapper,
  body.sidebar-open:not(.modern-public-body) .content-wrapper{
    pointer-events:none !important;
  }

  body:not(.modern-public-body) .sidebar{
    min-height:calc(100dvh - 58px) !important;
    height:auto !important;
    overflow:visible !important;
    padding-bottom:120px !important;
  }

  body:not(.modern-public-body) .sidebar-menu{
    padding-bottom:120px !important;
  }

  .simbay-mobile-sidebar-backdrop{
    position:fixed !important;
    inset:0 !important;
    z-index:100000 !important;
    background:rgba(15,23,42,.55) !important;
    backdrop-filter:blur(4px) !important;
    opacity:0 !important;
    pointer-events:none !important;
    transition:opacity .24s ease !important;
  }

  body.simbay-sidebar-mobile-open .simbay-mobile-sidebar-backdrop{
    opacity:1 !important;
    pointer-events:auto !important;
  }

  .simbay-mobile-menu-fab{
    position:fixed !important;
    left:12px !important;
    top:calc(70px + env(safe-area-inset-top, 0px)) !important;
    z-index:100030 !important;
    width:46px !important;
    height:46px !important;
    border:0 !important;
    border-radius:16px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:linear-gradient(135deg,#2563eb,#06b6d4) !important;
    color:#fff !important;
    box-shadow:0 16px 36px rgba(37,99,235,.32) !important;
    font-size:20px !important;
  }

  body.simbay-sidebar-mobile-open .simbay-mobile-menu-fab{
    left:min(294px, calc(86vw + 10px)) !important;
    background:linear-gradient(135deg,#ef4444,#f97316) !important;
  }

  body:not(.modern-public-body) .main-header .sidebar-toggle{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    z-index:100040 !important;
  }
}

@media (min-width: 992px){
  .simbay-mobile-menu-fab,
  .simbay-mobile-sidebar-backdrop{
    display:none !important;
  }
}

@media (max-width: 420px){
  body:not(.modern-public-body) .main-sidebar,
  body:not(.modern-public-body) .left-side{
    width:268px !important;
    max-width:88vw !important;
  }
  body.simbay-sidebar-mobile-open .simbay-mobile-menu-fab{
    left:min(280px, calc(88vw + 8px)) !important;
  }
}


/* =========================================================
   Fix v29: hilangkan blur yang menutupi sidebar HP/tablet.
   Sidebar dipaksa berada di atas overlay.
   ========================================================= */
@media (max-width: 991px){

  /* Matikan pseudo-overlay lama yang menyebabkan tampilan blur tanpa sidebar */
  body.sidebar-open:not(.modern-public-body)::after,
  body.simbay-sidebar-mobile-open:not(.modern-public-body)::after{
    content:none !important;
    display:none !important;
    opacity:0 !important;
    pointer-events:none !important;
    background:transparent !important;
    backdrop-filter:none !important;
  }

  /* Overlay hanya dari elemen backdrop khusus, bukan pseudo body */
  .simbay-mobile-sidebar-backdrop{
    z-index:2147483000 !important;
    background:rgba(15,23,42,.38) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  body.simbay-sidebar-mobile-open .simbay-mobile-sidebar-backdrop{
    opacity:1 !important;
    pointer-events:auto !important;
  }

  /* Sidebar selalu di atas overlay */
  body:not(.modern-public-body) .main-sidebar,
  body:not(.modern-public-body) .left-side{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    bottom:0 !important;
    width:286px !important;
    max-width:88vw !important;
    height:100dvh !important;
    min-height:100dvh !important;
    padding-top:58px !important;
    transform:translate3d(-110%,0,0) !important;
    transition:transform .25s ease !important;
    z-index:2147483200 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    background:linear-gradient(180deg,#0f172a 0%,#172554 55%,#0e7490 100%) !important;
    box-shadow:24px 0 70px rgba(15,23,42,.45) !important;
  }

  body.simbay-sidebar-mobile-open:not(.modern-public-body) .main-sidebar,
  body.simbay-sidebar-mobile-open:not(.modern-public-body) .left-side,
  body.sidebar-open:not(.modern-public-body) .main-sidebar,
  body.sidebar-open:not(.modern-public-body) .left-side{
    transform:translate3d(0,0,0) !important;
  }

  body.simbay-sidebar-mobile-open:not(.modern-public-body) .main-sidebar *,
  body.sidebar-open:not(.modern-public-body) .main-sidebar *{
    visibility:visible !important;
  }

  /* Jangan membuat konten blur */
  body.sidebar-open:not(.modern-public-body) .content-wrapper,
  body.simbay-sidebar-mobile-open:not(.modern-public-body) .content-wrapper{
    filter:none !important;
    -webkit-filter:none !important;
    pointer-events:none !important;
  }

  /* Tombol menu selalu paling atas */
  .simbay-mobile-menu-fab{
    z-index:2147483400 !important;
    display:flex !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  body.simbay-sidebar-mobile-open .simbay-mobile-menu-fab{
    left:min(298px, calc(88vw + 8px)) !important;
  }

  body:not(.modern-public-body) .main-header{
    z-index:2147482000 !important;
  }

  body:not(.modern-public-body) .main-header .sidebar-toggle{
    z-index:2147483500 !important;
  }
}

/* Desktop tidak memakai tombol sidebar mobile */
@media (min-width: 992px){
  .simbay-mobile-sidebar-backdrop,
  .simbay-mobile-menu-fab{
    display:none !important;
  }
}


/* =========================================================
   Fix v30: tombol sidebar HP/tablet bisa diklik dan menu
   di dalam sidebar tetap bisa diklik.
   ========================================================= */
@media (max-width: 991px){

  body:not(.modern-public-body) .main-header,
  body:not(.modern-public-body) .main-header .navbar,
  body:not(.modern-public-body) .main-header .sidebar-toggle{
    pointer-events:auto !important;
  }

  body:not(.modern-public-body) .main-header .sidebar-toggle{
    position:relative !important;
    z-index:2147483600 !important;
    cursor:pointer !important;
    touch-action:manipulation !important;
  }

  .simbay-mobile-menu-fab{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
    cursor:pointer !important;
    touch-action:manipulation !important;
    z-index:2147483640 !important;
  }

  .simbay-mobile-sidebar-backdrop{
    z-index:2147483000 !important;
    pointer-events:none !important;
  }

  body.simbay-sidebar-mobile-open .simbay-mobile-sidebar-backdrop,
  body.simbay-force-sidebar-open .simbay-mobile-sidebar-backdrop{
    pointer-events:auto !important;
  }

  body:not(.modern-public-body) .main-sidebar,
  body:not(.modern-public-body) .left-side{
    z-index:2147483400 !important;
    pointer-events:auto !important;
  }

  body:not(.modern-public-body) .main-sidebar *,
  body:not(.modern-public-body) .left-side *{
    pointer-events:auto !important;
  }

  body.simbay-force-sidebar-open:not(.modern-public-body) .main-sidebar,
  body.simbay-force-sidebar-open:not(.modern-public-body) .left-side{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    transform:translate3d(0,0,0) !important;
  }

  body.simbay-force-sidebar-open:not(.modern-public-body)::after,
  body.simbay-sidebar-mobile-open:not(.modern-public-body)::after,
  body.sidebar-open:not(.modern-public-body)::after{
    content:none !important;
    display:none !important;
  }

  body.simbay-force-sidebar-open:not(.modern-public-body) .content-wrapper,
  body.simbay-sidebar-mobile-open:not(.modern-public-body) .content-wrapper,
  body.sidebar-open:not(.modern-public-body) .content-wrapper{
    pointer-events:auto !important;
  }
}


/* =========================================================
   Fix v31: Tagihan Bulanan, Tagihan Lainnya, dan Transaksi
   Tabungan bisa digeser kanan-kiri di HP/tablet.
   ========================================================= */

/* Wrapper geser khusus */
.simbay-scroll-x,
.simbay-mobile-table-scroll,
.simbay-payment-table-scroll,
.simbay-tabungan-table-scroll{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  overflow-x:auto !important;
  overflow-y:visible !important;
  -webkit-overflow-scrolling:touch !important;
  touch-action:pan-x pan-y !important;
  overscroll-behavior-x:contain !important;
  position:relative !important;
}

/* Desktop tetap aman */
.simbay-scroll-x table,
.simbay-mobile-table-scroll table,
.simbay-payment-table-scroll table,
.simbay-tabungan-table-scroll table{
  max-width:none !important;
}

/* Mobile dan tablet */
@media (max-width: 991px){
  body:not(.modern-public-body) .content-wrapper{
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }

  body:not(.modern-public-body) .content,
  body:not(.modern-public-body) .box,
  body:not(.modern-public-body) .box-body,
  body:not(.modern-public-body) .panel,
  body:not(.modern-public-body) .panel-body,
  body:not(.modern-public-body) .tab-content,
  body:not(.modern-public-body) .tab-pane,
  body:not(.modern-public-body) .nav-tabs-custom{
    max-width:100% !important;
  }

  body:not(.modern-public-body) .box-body.table-responsive,
  body:not(.modern-public-body) .table-responsive,
  body:not(.modern-public-body) .dataTables_wrapper,
  body:not(.modern-public-body) .dataTables_scroll,
  body:not(.modern-public-body) .dataTables_scrollHead,
  body:not(.modern-public-body) .dataTables_scrollBody,
  body:not(.modern-public-body) .simbay-scroll-x,
  body:not(.modern-public-body) .simbay-mobile-table-scroll,
  body:not(.modern-public-body) .simbay-payment-table-scroll,
  body:not(.modern-public-body) .simbay-tabungan-table-scroll{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    overflow-x:scroll !important;
    overflow-y:visible !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-x pan-y !important;
  }

  /* Tagihan bulanan punya kolom bulan banyak, jadi wajib lebih lebar */
  body:not(.modern-public-body) .simbay-payment-table-scroll table,
  body:not(.modern-public-body) .nav-tabs-custom .tab-pane .box-body.table-responsive table,
  body:not(.modern-public-body) .nav-tabs-custom .tab-pane table.table-bordered{
    width:max-content !important;
    min-width:1180px !important;
    max-width:none !important;
    table-layout:auto !important;
    white-space:nowrap !important;
  }

  /* Transaksi tabungan / data table */
  body:not(.modern-public-body) .simbay-tabungan-table-scroll table,
  body:not(.modern-public-body) .table-responsive #example1,
  body:not(.modern-public-body) table#example1,
  body:not(.modern-public-body) table.dataTable,
  body:not(.modern-public-body) .dataTable{
    width:max-content !important;
    min-width:1050px !important;
    max-width:none !important;
    table-layout:auto !important;
    white-space:nowrap !important;
  }

  body:not(.modern-public-body) table.table th,
  body:not(.modern-public-body) table.table td,
  body:not(.modern-public-body) .dataTable th,
  body:not(.modern-public-body) .dataTable td{
    white-space:nowrap !important;
    vertical-align:middle !important;
  }

  body:not(.modern-public-body) .box-body.table-responsive::-webkit-scrollbar,
  body:not(.modern-public-body) .table-responsive::-webkit-scrollbar,
  body:not(.modern-public-body) .simbay-scroll-x::-webkit-scrollbar,
  body:not(.modern-public-body) .simbay-mobile-table-scroll::-webkit-scrollbar{
    height:8px !important;
  }

  body:not(.modern-public-body) .box-body.table-responsive::-webkit-scrollbar-thumb,
  body:not(.modern-public-body) .table-responsive::-webkit-scrollbar-thumb,
  body:not(.modern-public-body) .simbay-scroll-x::-webkit-scrollbar-thumb,
  body:not(.modern-public-body) .simbay-mobile-table-scroll::-webkit-scrollbar-thumb{
    background:rgba(37,99,235,.35) !important;
    border-radius:999px !important;
  }

  .simbay-scroll-hint{
    display:inline-flex !important;
    align-items:center !important;
    gap:6px !important;
    margin:8px 0 2px !important;
    padding:7px 11px !important;
    border-radius:999px !important;
    background:rgba(37,99,235,.10) !important;
    color:#1e3a8a !important;
    font-size:11px !important;
    font-weight:900 !important;
    white-space:nowrap !important;
    pointer-events:none !important;
  }

  .simbay-scroll-hint:before{
    content:"↔" !important;
    font-weight:950 !important;
  }
}

/* HP kecil */
@media (max-width: 575px){
  body:not(.modern-public-body) .simbay-payment-table-scroll table,
  body:not(.modern-public-body) .nav-tabs-custom .tab-pane .box-body.table-responsive table,
  body:not(.modern-public-body) .nav-tabs-custom .tab-pane table.table-bordered{
    min-width:1120px !important;
  }

  body:not(.modern-public-body) .simbay-tabungan-table-scroll table,
  body:not(.modern-public-body) .table-responsive #example1,
  body:not(.modern-public-body) table#example1,
  body:not(.modern-public-body) table.dataTable,
  body:not(.modern-public-body) .dataTable{
    min-width:980px !important;
  }
}


/* =========================================================
   Fix v32: Scroll horizontal nyata untuk Tagihan Bulanan,
   Tagihan Lainnya, dan Transaksi Tabungan di HP/tablet.
   Data bulanan dipaksa tampil semua melalui tabel lebar.
   ========================================================= */
.simbay-wide-table-box{
  width:100% !important;
  max-width:100% !important;
  overflow:visible !important;
}

.simbay-table-scroll-x{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  overflow-x:auto !important;
  overflow-y:visible !important;
  -webkit-overflow-scrolling:touch !important;
  touch-action:auto !important;
  overscroll-behavior-x:contain !important;
  position:relative !important;
  padding-bottom:12px !important;
  cursor:grab !important;
}

.simbay-table-scroll-x:active{
  cursor:grabbing !important;
}

.simbay-wide-table{
  width:max-content !important;
  max-width:none !important;
  table-layout:auto !important;
  border-collapse:collapse !important;
  white-space:nowrap !important;
}

.simbay-tagihan-bulanan-table{
  min-width:1680px !important;
}

.simbay-tagihan-lainnya-table{
  min-width:980px !important;
}

.simbay-tabungan-transaksi-table{
  min-width:1120px !important;
}

.simbay-wide-table th,
.simbay-wide-table td{
  white-space:nowrap !important;
  min-width:90px !important;
  vertical-align:middle !important;
}

.simbay-tagihan-bulanan-table th:nth-child(2),
.simbay-tagihan-bulanan-table td:nth-child(2){
  min-width:260px !important;
}

.simbay-tagihan-bulanan-table th:nth-child(3),
.simbay-tagihan-bulanan-table td:nth-child(3){
  min-width:150px !important;
}

.simbay-scroll-label{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  margin:6px 0 10px !important;
  padding:8px 12px !important;
  border-radius:999px !important;
  background:rgba(37,99,235,.10) !important;
  color:#1e3a8a !important;
  font-size:12px !important;
  font-weight:900 !important;
  white-space:nowrap !important;
}

.simbay-scroll-label:before{
  content:"↔" !important;
  font-weight:950 !important;
}

/* Paksa parent tab/panel tidak memotong scroll */
.nav-tabs-custom,
.nav-tabs-custom .tab-content,
.nav-tabs-custom .tab-pane,
body:not(.modern-public-body) .box,
body:not(.modern-public-body) .box-body,
body:not(.modern-public-body) .panel,
body:not(.modern-public-body) .panel-body{
  max-width:100% !important;
}

@media (max-width: 991px){
  body:not(.modern-public-body) .content-wrapper{
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }

  body:not(.modern-public-body) .content{
    overflow-x:hidden !important;
    max-width:100vw !important;
  }

  .simbay-table-scroll-x,
  .box-body.table-responsive,
  .table-responsive,
  .dataTables_wrapper,
  .dataTables_scroll,
  .dataTables_scrollBody{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:auto !important;
  }

  .simbay-table-scroll-x::-webkit-scrollbar,
  .table-responsive::-webkit-scrollbar{
    height:10px !important;
  }

  .simbay-table-scroll-x::-webkit-scrollbar-track,
  .table-responsive::-webkit-scrollbar-track{
    background:rgba(226,232,240,.7) !important;
    border-radius:999px !important;
  }

  .simbay-table-scroll-x::-webkit-scrollbar-thumb,
  .table-responsive::-webkit-scrollbar-thumb{
    background:linear-gradient(135deg,#2563eb,#06b6d4) !important;
    border-radius:999px !important;
  }
}

@media (max-width: 575px){
  .simbay-tagihan-bulanan-table{min-width:1600px !important;}
  .simbay-tagihan-lainnya-table{min-width:920px !important;}
  .simbay-tabungan-transaksi-table{min-width:1050px !important;}
  .simbay-scroll-label{
    font-size:11px !important;
    padding:7px 10px !important;
  }
}


/* =========================================================
   Fix v33: presisi tampilan tabel pembayaran.
   Tabel tidak lagi menumpuk di kiri saat layar lebar,
   dan tetap bisa digeser di HP/tablet.
   ========================================================= */

/* Rapikan area tab pembayaran */
.nav-tabs-custom{
  overflow:hidden !important;
}

.nav-tabs-custom .tab-content{
  padding:18px 20px 22px !important;
  background:rgba(255,255,255,.96) !important;
}

.nav-tabs-custom .tab-pane{
  width:100% !important;
}

.simbay-wide-table-box{
  width:100% !important;
  max-width:100% !important;
  padding:14px 0 4px !important;
  overflow:visible !important;
}

.simbay-wide-table-box > .btn,
.simbay-wide-table-box > a.btn{
  margin:0 6px 12px 0 !important;
}

.simbay-table-scroll-x{
  width:100% !important;
  max-width:100% !important;
  overflow-x:auto !important;
  overflow-y:visible !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.98) !important;
  box-shadow:0 14px 38px rgba(15,23,42,.08) !important;
  border:1px solid rgba(148,163,184,.18) !important;
  padding:0 !important;
}

/* Default layar laptop/desktop: tabel lainnya memenuhi area */
.simbay-wide-table{
  margin:0 !important;
  border-radius:18px !important;
  overflow:hidden !important;
}

.simbay-tagihan-lainnya-table{
  width:100% !important;
  min-width:100% !important;
  table-layout:auto !important;
}

.simbay-tagihan-lainnya-table th,
.simbay-tagihan-lainnya-table td{
  vertical-align:middle !important;
}

.simbay-tagihan-lainnya-table th:nth-child(3),
.simbay-tagihan-lainnya-table td:nth-child(3){
  min-width:360px !important;
}

.simbay-tagihan-lainnya-table th:nth-child(4),
.simbay-tagihan-lainnya-table td:nth-child(4),
.simbay-tagihan-lainnya-table th:nth-child(5),
.simbay-tagihan-lainnya-table td:nth-child(5){
  min-width:130px !important;
}

.simbay-tagihan-lainnya-table th:nth-child(6),
.simbay-tagihan-lainnya-table td:nth-child(6),
.simbay-tagihan-lainnya-table th:nth-child(7),
.simbay-tagihan-lainnya-table td:nth-child(7){
  min-width:105px !important;
  text-align:center !important;
}

/* Tagihan bulanan tetap lebar karena kolom bulan banyak */
.simbay-tagihan-bulanan-table{
  width:max-content !important;
  min-width:1680px !important;
  max-width:none !important;
}

/* Label geser dibuat sejajar dengan tabel */
.simbay-scroll-label{
  margin:8px 0 12px !important;
}

/* Tablet/HP: tabel tetap swipe kanan-kiri */
@media (max-width: 991px){
  .nav-tabs-custom .tab-content{
    padding:14px 12px 18px !important;
  }

  .simbay-table-scroll-x{
    overflow-x:scroll !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-x pan-y !important;
  }

  .simbay-tagihan-lainnya-table{
    width:max-content !important;
    min-width:980px !important;
    max-width:none !important;
    white-space:nowrap !important;
  }

  .simbay-tagihan-bulanan-table{
    min-width:1600px !important;
  }

  .simbay-tagihan-lainnya-table th,
  .simbay-tagihan-lainnya-table td,
  .simbay-tagihan-bulanan-table th,
  .simbay-tagihan-bulanan-table td{
    white-space:nowrap !important;
  }
}

/* HP kecil */
@media (max-width: 575px){
  .nav-tabs-custom .tab-content{
    padding:12px 10px 16px !important;
  }

  .simbay-wide-table-box{
    padding-top:10px !important;
  }

  .simbay-tagihan-lainnya-table{
    min-width:930px !important;
  }

  .simbay-tagihan-bulanan-table{
    min-width:1560px !important;
  }
}


/* =========================================================
   Fix v34: semua pojok lancip dibuat melengkung dan tampilan
   tabel/box dirapikan di seluruh menu.
   ========================================================= */

/* Box, panel, tab, dan kartu menu dibuat konsisten */
body:not(.modern-public-body) .box,
body:not(.modern-public-body) .panel,
body:not(.modern-public-body) .nav-tabs-custom,
body:not(.modern-public-body) .well,
body:not(.modern-public-body) .callout{
  border-radius:24px !important;
  overflow:hidden !important;
  border:1px solid rgba(226,232,240,.75) !important;
  box-shadow:0 18px 45px rgba(15,23,42,.08) !important;
  background:rgba(255,255,255,.94) !important;
}

/* Header menu: pojok atas melengkung */
body:not(.modern-public-body) .box-header,
body:not(.modern-public-body) .panel-heading,
body:not(.modern-public-body) .box.box-solid > .box-header,
body:not(.modern-public-body) .box.box-primary.box-solid > .box-header,
body:not(.modern-public-body) .box.box-info.box-solid > .box-header,
body:not(.modern-public-body) .box.box-success.box-solid > .box-header,
body:not(.modern-public-body) .box.box-warning.box-solid > .box-header,
body:not(.modern-public-body) .box.box-danger.box-solid > .box-header{
  border-radius:24px 24px 0 0 !important;
  overflow:hidden !important;
}

/* Tombol collapse di kanan header ikut melengkung */
body:not(.modern-public-body) .box-header .box-tools .btn,
body:not(.modern-public-body) .box-header .btn-box-tool{
  border-radius:999px !important;
  width:34px !important;
  height:34px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* Body box agar tidak menempel dan lebih presisi */
body:not(.modern-public-body) .box-body,
body:not(.modern-public-body) .panel-body{
  border-radius:0 0 24px 24px !important;
}

/* Tab Bulanan / Lainnya lebih rapi */
body:not(.modern-public-body) .nav-tabs-custom > .nav-tabs{
  border:0 !important;
  padding:10px 12px 0 !important;
  background:rgba(248,250,252,.88) !important;
}
body:not(.modern-public-body) .nav-tabs-custom > .nav-tabs > li > a{
  border-radius:16px 16px 0 0 !important;
  border:1px solid rgba(226,232,240,.85) !important;
  background:rgba(255,255,255,.78) !important;
  color:#334155 !important;
  font-weight:800 !important;
}
body:not(.modern-public-body) .nav-tabs-custom > .nav-tabs > li.active > a{
  background:#fff !important;
  color:#1d4ed8 !important;
  border-top:3px solid #2563eb !important;
}

/* Wrapper tabel dibuat seperti kartu, pojok melengkung */
.simbay-table-scroll-x,
.simbay-wide-table-box .simbay-table-scroll-x,
body:not(.modern-public-body) .table-responsive,
body:not(.modern-public-body) .dataTables_wrapper,
body:not(.modern-public-body) .dataTables_scroll,
body:not(.modern-public-body) .dataTables_scrollBody{
  border-radius:22px !important;
  overflow:auto !important;
  background:#fff !important;
  border:1px solid rgba(226,232,240,.85) !important;
  box-shadow:0 14px 34px rgba(15,23,42,.07) !important;
}

/* Tabel tidak lagi terlihat lancip */
body:not(.modern-public-body) table.table,
body:not(.modern-public-body) .dataTable,
.simbay-wide-table{
  border-collapse:separate !important;
  border-spacing:0 !important;
  border-radius:22px !important;
  overflow:hidden !important;
  margin-bottom:0 !important;
}

/* Header tabel melengkung di kiri-kanan atas */
body:not(.modern-public-body) table.table thead tr:first-child th:first-child,
body:not(.modern-public-body) .dataTable thead tr:first-child th:first-child,
.simbay-wide-table thead tr:first-child th:first-child{
  border-top-left-radius:20px !important;
}
body:not(.modern-public-body) table.table thead tr:first-child th:last-child,
body:not(.modern-public-body) .dataTable thead tr:first-child th:last-child,
.simbay-wide-table thead tr:first-child th:last-child{
  border-top-right-radius:20px !important;
}

/* Baris terakhir juga melengkung */
body:not(.modern-public-body) table.table tbody tr:last-child td:first-child,
body:not(.modern-public-body) .dataTable tbody tr:last-child td:first-child,
.simbay-wide-table tbody tr:last-child td:first-child{
  border-bottom-left-radius:20px !important;
}
body:not(.modern-public-body) table.table tbody tr:last-child td:last-child,
body:not(.modern-public-body) .dataTable tbody tr:last-child td:last-child,
.simbay-wide-table tbody tr:last-child td:last-child{
  border-bottom-right-radius:20px !important;
}

/* Header tabel lebih elegan */
body:not(.modern-public-body) table.table thead th,
body:not(.modern-public-body) .dataTable thead th,
.simbay-wide-table thead th{
  background:linear-gradient(135deg,#0f2d75,#1d4ed8) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.14) !important;
  font-weight:900 !important;
  vertical-align:middle !important;
}

/* Sel tabel lebih nyaman dibaca */
body:not(.modern-public-body) table.table tbody td,
body:not(.modern-public-body) .dataTable tbody td,
.simbay-wide-table tbody td{
  border-color:rgba(226,232,240,.78) !important;
  vertical-align:middle !important;
}

/* Tabel Fitur Kilat/Tagihan: desktop dibuat presisi memenuhi area */
@media (min-width: 992px){
  .simbay-tagihan-bulanan-scroll,
  .simbay-tagihan-lainnya-scroll{
    width:100% !important;
  }

  .simbay-tagihan-bulanan-scroll .simbay-table-scroll-x,
  .simbay-tagihan-lainnya-scroll .simbay-table-scroll-x{
    width:100% !important;
  }

  .simbay-tagihan-bulanan-table,
  .simbay-tagihan-lainnya-table{
    width:100% !important;
    min-width:100% !important;
  }

  .simbay-tagihan-bulanan-table th,
  .simbay-tagihan-bulanan-table td{
    min-width:auto !important;
  }

  .simbay-tagihan-bulanan-table th:nth-child(2),
  .simbay-tagihan-bulanan-table td:nth-child(2){
    min-width:250px !important;
  }

  .simbay-tagihan-bulanan-table th:nth-child(3),
  .simbay-tagihan-bulanan-table td:nth-child(3){
    min-width:130px !important;
  }
}

/* HP/tablet tetap bisa geser horizontal */
@media (max-width: 991px){
  .simbay-tagihan-bulanan-table{
    width:max-content !important;
    min-width:1580px !important;
    max-width:none !important;
  }

  .simbay-tagihan-lainnya-table{
    width:max-content !important;
    min-width:960px !important;
    max-width:none !important;
  }

  .simbay-tabungan-transaksi-table,
  table#example1,
  .dataTable{
    width:max-content !important;
    min-width:1050px !important;
    max-width:none !important;
  }

  body:not(.modern-public-body) .box,
  body:not(.modern-public-body) .panel,
  body:not(.modern-public-body) .nav-tabs-custom{
    border-radius:20px !important;
  }

  body:not(.modern-public-body) .box-header,
  body:not(.modern-public-body) .panel-heading,
  body:not(.modern-public-body) .box.box-solid > .box-header{
    border-radius:20px 20px 0 0 !important;
  }

  .simbay-table-scroll-x,
  body:not(.modern-public-body) .table-responsive{
    border-radius:18px !important;
  }
}


/* =========================================================
   Fix v36: tampilan menu Tabungan/Data Riwayat Transaksi
   dibuat lebih presisi, penuh, elegan, dan responsif.
   ========================================================= */

/* Toolbar setoran/penarikan + saldo */
.simbay-tabungan-actions-wrap,
.simbay-tabungan-saldo-wrap{
  margin-bottom:14px !important;
}

.simbay-tabungan-actions-wrap{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex-wrap:wrap !important;
}

.simbay-tabungan-actions-wrap .btn{
  border-radius:999px !important;
  padding:10px 15px !important;
  font-weight:900 !important;
  border:0 !important;
  box-shadow:0 12px 28px rgba(15,23,42,.12) !important;
}

.simbay-tabungan-actions-wrap .btn-success{
  background:linear-gradient(135deg,#16a34a,#22c55e) !important;
}

.simbay-tabungan-actions-wrap .btn-danger{
  background:linear-gradient(135deg,#ef4444,#f43f5e) !important;
}

.simbay-tabungan-saldo-wrap{
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
}

.simbay-tabungan-saldo-wrap h4{
  margin:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:12px 16px !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.90) !important;
  border:1px solid rgba(226,232,240,.75) !important;
  box-shadow:0 14px 34px rgba(15,23,42,.08) !important;
  color:#0f172a !important;
  font-weight:950 !important;
}

.simbay-tabungan-saldo-wrap h4 small{
  color:#64748b !important;
  font-weight:800 !important;
}

/* Box riwayat tabungan memenuhi area */
.simbay-tabungan-history-box{
  width:100% !important;
  clear:both !important;
  border-radius:24px !important;
  overflow:hidden !important;
}

.simbay-tabungan-history-box .box-header{
  padding:15px 20px !important;
}

.simbay-tabungan-history-box .box-title{
  font-weight:950 !important;
  letter-spacing:.01em !important;
}

/* DataTables controls dibuat rapi */
.simbay-tabungan-history-box .dataTables_wrapper{
  width:100% !important;
  max-width:100% !important;
  overflow:visible !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
}

.simbay-tabungan-history-box .dataTables_wrapper > .row:first-child{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
  margin:0 0 12px !important;
  padding:0 2px !important;
}

.simbay-tabungan-history-box .dataTables_length,
.simbay-tabungan-history-box .dataTables_filter{
  float:none !important;
  text-align:left !important;
  margin:0 !important;
}

.simbay-tabungan-history-box .dataTables_filter{
  margin-left:auto !important;
}

.simbay-tabungan-history-box .dataTables_length label,
.simbay-tabungan-history-box .dataTables_filter label{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  color:#334155 !important;
  font-weight:800 !important;
}

.simbay-tabungan-history-box .dataTables_length select,
.simbay-tabungan-history-box .dataTables_filter input{
  border-radius:14px !important;
  border:1px solid rgba(148,163,184,.35) !important;
  min-height:40px !important;
  padding:7px 12px !important;
  background:#fff !important;
  box-shadow:0 8px 20px rgba(15,23,42,.06) !important;
}

.simbay-tabungan-history-box .dataTables_filter input{
  min-width:250px !important;
}

/* Scroll/table tabungan agar tidak menyisakan area kosong besar */
.simbay-tabungan-transaksi-scroll{
  width:100% !important;
  max-width:100% !important;
  border-radius:22px !important;
  overflow-x:auto !important;
  overflow-y:visible !important;
  background:#fff !important;
}

.simbay-tabungan-transaksi-table{
  width:100% !important;
  min-width:100% !important;
  max-width:none !important;
  table-layout:auto !important;
}

.simbay-tabungan-transaksi-table th:nth-child(1),
.simbay-tabungan-transaksi-table td:nth-child(1){
  width:72px !important;
  text-align:center !important;
}

.simbay-tabungan-transaksi-table th:nth-child(4),
.simbay-tabungan-transaksi-table td:nth-child(4){
  min-width:280px !important;
}

.simbay-tabungan-transaksi-table th,
.simbay-tabungan-transaksi-table td{
  padding:12px 14px !important;
  vertical-align:middle !important;
}

/* Pagination/info rapi */
.simbay-tabungan-history-box .dataTables_info,
.simbay-tabungan-history-box .dataTables_paginate{
  margin-top:12px !important;
  color:#64748b !important;
  font-weight:800 !important;
}

.simbay-tabungan-history-box .pagination > li > a,
.simbay-tabungan-history-box .pagination > li > span{
  border-radius:12px !important;
  margin:0 3px !important;
  border:0 !important;
  box-shadow:0 8px 18px rgba(15,23,42,.06) !important;
}

/* Tablet dan HP */
@media(max-width:991px){
  .simbay-tabungan-actions-wrap,
  .simbay-tabungan-saldo-wrap{
    width:100% !important;
    justify-content:flex-start !important;
  }

  .simbay-tabungan-saldo-wrap h4{
    width:100% !important;
    justify-content:space-between !important;
  }

  .simbay-tabungan-history-box .dataTables_wrapper > .row:first-child{
    display:block !important;
  }

  .simbay-tabungan-history-box .dataTables_length,
  .simbay-tabungan-history-box .dataTables_filter{
    width:100% !important;
    margin-bottom:10px !important;
  }

  .simbay-tabungan-history-box .dataTables_length label,
  .simbay-tabungan-history-box .dataTables_filter label{
    width:100% !important;
    justify-content:space-between !important;
  }

  .simbay-tabungan-history-box .dataTables_filter input{
    min-width:0 !important;
    width:70% !important;
  }

  .simbay-tabungan-transaksi-table{
    width:max-content !important;
    min-width:1060px !important;
    max-width:none !important;
    white-space:nowrap !important;
  }

  .simbay-tabungan-transaksi-table th,
  .simbay-tabungan-transaksi-table td{
    white-space:nowrap !important;
  }
}

@media(max-width:575px){
  .simbay-tabungan-actions-wrap .btn{
    width:100% !important;
    justify-content:center !important;
    display:flex !important;
  }

  .simbay-tabungan-history-box .dataTables_filter label{
    display:block !important;
  }

  .simbay-tabungan-history-box .dataTables_filter input{
    width:100% !important;
    margin-top:6px !important;
  }

  .simbay-tabungan-transaksi-table{
    min-width:980px !important;
  }
}


/* =========================================================
   Fix v37: kartu saldo tabungan lebih elegan, profesional,
   hidup, dan memiliki ikon animasi.
   ========================================================= */
.simbay-tabungan-saldo-wrap{
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  margin-bottom:14px !important;
}

.simbay-saldo-live-card{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  min-width:300px !important;
  padding:16px 18px !important;
  border-radius:26px !important;
  background:
    radial-gradient(circle at 88% 12%, rgba(34,197,94,.24), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(239,246,255,.92)) !important;
  border:1px solid rgba(255,255,255,.82) !important;
  box-shadow:
    0 22px 55px rgba(15,23,42,.14),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
  overflow:hidden !important;
  isolation:isolate !important;
}

.simbay-saldo-live-card:before{
  content:"" !important;
  position:absolute !important;
  width:110px !important;
  height:110px !important;
  right:-34px !important;
  top:-42px !important;
  border-radius:999px !important;
  background:linear-gradient(135deg, rgba(37,99,235,.17), rgba(6,182,212,.16)) !important;
  z-index:-1 !important;
  animation:simbaySaldoFloat 4.8s ease-in-out infinite !important;
}

.simbay-saldo-live-card:after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(110deg, transparent 0%, rgba(255,255,255,.45) 42%, transparent 66%) !important;
  transform:translateX(-120%) !important;
  animation:simbaySaldoShine 4.6s ease-in-out infinite !important;
  pointer-events:none !important;
}

.simbay-saldo-live-icon{
  position:relative !important;
  width:58px !important;
  height:58px !important;
  min-width:58px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:20px !important;
  color:#fff !important;
  background:linear-gradient(135deg, #16a34a, #22c55e 55%, #06b6d4) !important;
  box-shadow:0 16px 32px rgba(34,197,94,.32) !important;
  font-size:24px !important;
  animation:simbaySaldoPulse 2.2s ease-in-out infinite !important;
}

.simbay-saldo-live-icon:after{
  content:"" !important;
  position:absolute !important;
  inset:-7px !important;
  border-radius:24px !important;
  border:2px solid rgba(34,197,94,.22) !important;
  animation:simbaySaldoRing 2.2s ease-in-out infinite !important;
}

.simbay-saldo-live-text{
  min-width:0 !important;
}

.simbay-saldo-live-text small{
  display:block !important;
  margin-bottom:4px !important;
  color:#64748b !important;
  font-size:12px !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
  letter-spacing:.08em !important;
}

.simbay-saldo-live-text strong{
  display:block !important;
  color:#0f172a !important;
  font-size:22px !important;
  line-height:1.15 !important;
  font-weight:950 !important;
  letter-spacing:-.02em !important;
  white-space:nowrap !important;
}

@keyframes simbaySaldoPulse{
  0%,100%{transform:translateY(0) scale(1);}
  50%{transform:translateY(-3px) scale(1.04);}
}

@keyframes simbaySaldoRing{
  0%{transform:scale(.90);opacity:.58;}
  70%{transform:scale(1.12);opacity:.05;}
  100%{transform:scale(.90);opacity:.58;}
}

@keyframes simbaySaldoShine{
  0%,45%{transform:translateX(-120%);}
  70%{transform:translateX(125%);}
  100%{transform:translateX(125%);}
}

@keyframes simbaySaldoFloat{
  0%,100%{transform:translate(0,0) rotate(0deg);}
  50%{transform:translate(-8px,8px) rotate(8deg);}
}

/* Responsif saldo tabungan */
@media(max-width:991px){
  .simbay-tabungan-saldo-wrap{
    justify-content:flex-start !important;
    width:100% !important;
  }

  .simbay-saldo-live-card{
    width:100% !important;
    min-width:0 !important;
    margin-top:8px !important;
  }
}

@media(max-width:575px){
  .simbay-saldo-live-card{
    padding:14px !important;
    border-radius:22px !important;
  }

  .simbay-saldo-live-icon{
    width:50px !important;
    height:50px !important;
    min-width:50px !important;
    border-radius:17px !important;
    font-size:21px !important;
  }

  .simbay-saldo-live-text strong{
    font-size:18px !important;
    white-space:normal !important;
  }

  .simbay-saldo-live-text small{
    font-size:10.5px !important;
  }
}


/* =========================================================
   Fix v38: tampilan atas menu tabungan dibuat lebih rapat,
   rapi, hidup, dan saldo diberi keterangan.
   ========================================================= */
.simbay-tabungan-topbar{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  flex-wrap:wrap !important;
  margin:10px 0 14px !important;
  padding:14px 16px !important;
  border-radius:26px !important;
  background:linear-gradient(135deg, rgba(255,255,255,.82), rgba(240,249,255,.72)) !important;
  border:1px solid rgba(226,232,240,.85) !important;
  box-shadow:0 16px 42px rgba(15,23,42,.06) !important;
}
.simbay-tabungan-topbar .simbay-tabungan-actions-wrap,
.simbay-tabungan-topbar .simbay-tabungan-saldo-wrap{
  float:none !important;
  width:auto !important;
  padding:0 !important;
  margin:0 !important;
}
.simbay-tabungan-actions-wrap{
  flex:1 1 360px !important;
  margin-bottom:0 !important;
}
.simbay-tabungan-saldo-wrap{
  flex:0 1 430px !important;
  justify-content:flex-end !important;
  margin-bottom:0 !important;
}
.simbay-saldo-live-card{
  width:100% !important;
  min-width:0 !important;
  gap:12px !important;
  padding:16px 18px !important;
  border-radius:24px !important;
}
.simbay-saldo-live-text{
  flex:1 1 auto !important;
}
.simbay-saldo-live-text strong{
  font-size:20px !important;
  margin-bottom:4px !important;
}
.simbay-saldo-live-note{
  display:block !important;
  color:#64748b !important;
  font-size:11.5px !important;
  line-height:1.45 !important;
  font-weight:700 !important;
}
.simbay-saldo-live-badge{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  align-self:flex-start !important;
  padding:7px 10px !important;
  border-radius:999px !important;
  font-size:11px !important;
  font-weight:900 !important;
  color:#0f766e !important;
  background:rgba(20,184,166,.12) !important;
  border:1px solid rgba(20,184,166,.14) !important;
  box-shadow:0 10px 24px rgba(20,184,166,.10) !important;
  animation:simbayBadgeFloat 2.8s ease-in-out infinite !important;
}
@keyframes simbayBadgeFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-2px)}
}
/* rapikan box tabel tepat di bawah topbar */
.simbay-tabungan-history-box{
  margin-top:6px !important;
}
.simbay-tabungan-history-box .box-header{
  padding:14px 18px !important;
}
.simbay-tabungan-history-box .box-body,
.simbay-tabungan-history-box .dataTables_wrapper{
  margin-top:0 !important;
}
.simbay-scroll-label{
  margin:10px 0 10px !important;
}
/* search/show bar lebih compact */
.simbay-tabungan-history-box .dataTables_wrapper > .row:first-child{
  margin:0 0 8px !important;
  padding:0 2px !important;
}
@media(max-width:991px){
  .simbay-tabungan-topbar{
    padding:12px !important;
    border-radius:22px !important;
    gap:12px !important;
  }
  .simbay-tabungan-topbar .simbay-tabungan-actions-wrap,
  .simbay-tabungan-topbar .simbay-tabungan-saldo-wrap{
    width:100% !important;
    flex:1 1 100% !important;
  }
  .simbay-tabungan-saldo-wrap{justify-content:flex-start !important;}
  .simbay-saldo-live-card{padding:14px !important;}
  .simbay-saldo-live-badge{align-self:flex-start !important;}
}
@media(max-width:575px){
  .simbay-saldo-live-note{font-size:10.5px !important;}
  .simbay-saldo-live-text strong{font-size:18px !important;}
  .simbay-saldo-live-card{display:grid !important;grid-template-columns:52px 1fr !important;}
  .simbay-saldo-live-badge{grid-column:1 / -1 !important;justify-self:flex-start !important;margin-top:2px !important;}
}




/* =========================================================
   Fix v43: kolom pencarian pembayaran bisa diketik kembali,
   dan hasil cari siswa tetap muncul di depan tanpa floating JS.
   ========================================================= */
.simbay-payment-filter-box,
.simbay-payment-filter-box .box-body,
.simbay-payment-filter-box .modern-search-form,
.simbay-payment-filter-box .modern-search-form-v4,
.simbay-payment-filter-box .modern-student-search-row,
.simbay-payment-filter-box .modern-student-search-field{
  overflow:visible !important;
}

.simbay-payment-filter-box{
  position:relative !important;
  z-index:50000 !important;
}

.simbay-payment-filter-box .box-body{
  position:relative !important;
  z-index:50001 !important;
}

.simbay-payment-filter-box .modern-student-search-field{
  position:relative !important;
  z-index:50002 !important;
}

.simbay-payment-filter-box .modern-student-search-input{
  position:relative !important;
  z-index:2 !important;
  pointer-events:auto !important;
  user-select:text !important;
  -webkit-user-select:text !important;
}

.simbay-payment-filter-box .modern-student-autocomplete{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:calc(100% + 8px) !important;
  z-index:99999 !important;
  max-height:340px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  background:rgba(255,255,255,.99) !important;
  border:1px solid rgba(37,99,235,.18) !important;
  border-radius:20px !important;
  box-shadow:0 24px 70px rgba(15,23,42,.25) !important;
  padding:10px !important;
  pointer-events:auto !important;
}

.simbay-payment-filter-box .modern-student-autocomplete:not(.is-open){
  display:none !important;
  pointer-events:none !important;
}

.simbay-payment-filter-box .modern-student-autocomplete.is-open{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}

.simbay-payment-filter-box .modern-student-autocomplete-item{
  display:block !important;
  width:100% !important;
  text-align:left !important;
  padding:12px 14px !important;
  margin:2px 0 !important;
  border-radius:14px !important;
  background:transparent !important;
  border:0 !important;
  color:#0f172a !important;
  font-weight:900 !important;
  line-height:1.35 !important;
  cursor:pointer !important;
}

.simbay-payment-filter-box .modern-student-autocomplete-item small{
  display:block !important;
  margin-top:3px !important;
  color:#64748b !important;
  font-size:11px !important;
  font-weight:800 !important;
}

.simbay-payment-filter-box .modern-student-autocomplete-item:hover,
.simbay-payment-filter-box .modern-student-autocomplete-item.is-active{
  background:linear-gradient(135deg,#2563eb,#06b6d4) !important;
  color:#fff !important;
}

.simbay-payment-filter-box .modern-student-autocomplete-item:hover small,
.simbay-payment-filter-box .modern-student-autocomplete-item.is-active small{
  color:rgba(255,255,255,.88) !important;
}

/* Panel di bawah filter tidak menutup hasil pencarian */
.simbay-payment-filter-box ~ .box,
.simbay-payment-filter-box ~ .nav-tabs-custom,
.simbay-payment-filter-box + .box,
.simbay-payment-filter-box + .nav-tabs-custom{
  position:relative !important;
  z-index:1 !important;
}

@media(max-width:991px){
  .simbay-payment-filter-box .modern-student-autocomplete{
    max-height:300px !important;
    border-radius:18px !important;
  }
}


/* =========================================================
   Fix v44: hasil cari siswa pembayaran dipaksa tampil di depan
   dan ruang bawah form diperbesar agar dropdown tidak masuk ke belakang box.
   ========================================================= */
.simbay-payment-filter-box,
.simbay-payment-filter-box .box-body,
.simbay-payment-filter-box #formCariPembayaran,
.simbay-payment-filter-box .modern-search-form,
.simbay-payment-filter-box .modern-search-form-v4,
.simbay-payment-filter-box .modern-student-search-row,
.simbay-payment-filter-box .modern-student-search-field{
  overflow: visible !important;
}

.simbay-payment-filter-box{
  position: relative !important;
  z-index: 50000 !important;
}

.simbay-payment-filter-box .box-body{
  position: relative !important;
  z-index: 50001 !important;
}

.simbay-payment-filter-box #formCariPembayaran,
.simbay-payment-filter-box .modern-search-form{
  position: relative !important;
  z-index: 50002 !important;
  padding-bottom: 34px !important;
}

.simbay-payment-filter-box #formCariPembayaran:focus-within,
.simbay-payment-filter-box .modern-search-form:focus-within{
  padding-bottom: 230px !important;
}

.simbay-payment-filter-box .modern-student-search-row{
  position: relative !important;
  z-index: 50003 !important;
}

.simbay-payment-filter-box .modern-student-search-field{
  position: relative !important;
  z-index: 50004 !important;
}

.simbay-payment-filter-box .modern-student-search-input{
  position: relative !important;
  z-index: 3 !important;
  background: #fff !important;
}

.simbay-payment-filter-box .modern-student-autocomplete{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(100% + 8px) !important;
  z-index: 999999 !important;
  display: none !important;
  max-height: 320px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.995) !important;
  border: 1px solid rgba(37,99,235,.18) !important;
  box-shadow: 0 24px 70px rgba(15,23,42,.22) !important;
  padding: 10px !important;
}

.simbay-payment-filter-box .modern-student-autocomplete.is-open,
.simbay-payment-filter-box .modern-student-autocomplete[style*="display: block"]{
  display: block !important;
}

.simbay-payment-filter-box .modern-student-autocomplete-item{
  display: block !important;
  width: 100% !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
}

.simbay-payment-filter-box .modern-student-autocomplete-item:hover,
.simbay-payment-filter-box .modern-student-autocomplete-item.is-active{
  background: linear-gradient(135deg,#2563eb,#06b6d4) !important;
  color: #fff !important;
}

/* Semua panel di bawah filter harus kalah layer */
.simbay-payment-filter-box ~ *,
.simbay-payment-filter-box + *{
  position: relative !important;
  z-index: 1 !important;
}

@media (max-width: 991px){
  .simbay-payment-filter-box #formCariPembayaran:focus-within,
  .simbay-payment-filter-box .modern-search-form:focus-within{
    padding-bottom: 260px !important;
  }
  .simbay-payment-filter-box .modern-student-autocomplete{
    max-height: 280px !important;
  }
}


/* =========================================================
   Fix v45: dropdown cari siswa pembayaran harus mengambang
   di depan box, bukan mendorong tinggi box ke bawah.
   ========================================================= */
.simbay-payment-filter-box .box-body,
.simbay-payment-filter-box #formCariPembayaran,
.simbay-payment-filter-box .modern-search-form,
.simbay-payment-filter-box .modern-student-search-row,
.simbay-payment-filter-box .modern-student-search-field{
  overflow: visible !important;
}

.simbay-payment-filter-box .box-body{
  padding-bottom: 18px !important;
}

.simbay-payment-filter-box #formCariPembayaran,
.simbay-payment-filter-box .modern-search-form{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.simbay-payment-filter-box #formCariPembayaran:focus-within,
.simbay-payment-filter-box .modern-search-form:focus-within{
  padding-bottom: 0 !important;
}

.simbay-payment-filter-box .modern-student-search-row{
  margin-bottom: 0 !important;
}

.simbay-payment-filter-box .modern-student-search-field{
  margin-bottom: 0 !important;
}

.simbay-payment-filter-box .modern-student-autocomplete{
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000000 !important;
}

/* content setelah box filter tetap di belakang */
.simbay-payment-filter-box{z-index:60000 !important;}
.simbay-payment-filter-box + .box,
.simbay-payment-filter-box ~ .box,
.simbay-payment-filter-box + .row,
.simbay-payment-filter-box ~ .row,
.simbay-payment-filter-box + .nav-tabs-custom,
.simbay-payment-filter-box ~ .nav-tabs-custom{
  position: relative !important;
  z-index: 1 !important;
}


/* =========================================================
   Fix v46: hasil cari siswa pembayaran memakai overlay body,
   sehingga benar-benar muncul di depan dan tidak tertutup box.
   ========================================================= */

/* Dropdown lama di dalam box dimatikan agar tidak terlihat di belakang panel */
#autocompleteSiswaPembayaran{
  display:none !important;
}

/* Overlay hasil pencarian yang ditempel langsung ke body */
#simbayPaymentSearchOverlay{
  position:fixed !important;
  z-index:2147483600 !important;
  display:none;
  max-height:360px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  background:rgba(255,255,255,.995) !important;
  border:1px solid rgba(37,99,235,.22) !important;
  border-radius:20px !important;
  box-shadow:0 30px 95px rgba(15,23,42,.32) !important;
  padding:10px !important;
  backdrop-filter:blur(16px) !important;
  -webkit-backdrop-filter:blur(16px) !important;
}

#simbayPaymentSearchOverlay.is-open{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}

#simbayPaymentSearchOverlay .simbay-payment-result-item{
  display:block !important;
  width:100% !important;
  text-align:left !important;
  border:0 !important;
  background:transparent !important;
  color:#0f172a !important;
  padding:12px 14px !important;
  border-radius:14px !important;
  font-weight:900 !important;
  line-height:1.35 !important;
  cursor:pointer !important;
}

#simbayPaymentSearchOverlay .simbay-payment-result-item small{
  display:block !important;
  margin-top:3px !important;
  color:#64748b !important;
  font-size:11px !important;
  font-weight:800 !important;
}

#simbayPaymentSearchOverlay .simbay-payment-result-item:hover,
#simbayPaymentSearchOverlay .simbay-payment-result-item.is-active{
  background:linear-gradient(135deg,#2563eb,#06b6d4) !important;
  color:#fff !important;
}

#simbayPaymentSearchOverlay .simbay-payment-result-item:hover small,
#simbayPaymentSearchOverlay .simbay-payment-result-item.is-active small{
  color:rgba(255,255,255,.88) !important;
}

#simbayPaymentSearchOverlay .simbay-payment-result-empty{
  padding:12px 14px !important;
  color:#64748b !important;
  font-weight:900 !important;
}

.simbay-payment-filter-box .modern-student-search-input{
  pointer-events:auto !important;
  user-select:text !important;
  -webkit-user-select:text !important;
}

@media(max-width:991px){
  #simbayPaymentSearchOverlay{
    max-height:300px !important;
    border-radius:18px !important;
  }
}


/* =========================================================
   Fix v47: popup filter tanggal dibuat presisi, elegan,
   melengkung, dan tidak melebar keluar modal.
   ========================================================= */
.modal .modal-dialog{
  width:min(680px, calc(100vw - 28px)) !important;
  margin:7vh auto !important;
}

.modal .modal-content{
  border:0 !important;
  border-radius:28px !important;
  overflow:hidden !important;
  background:rgba(255,255,255,.98) !important;
  box-shadow:0 32px 100px rgba(15,23,42,.38) !important;
}

.modal .modal-header{
  position:relative !important;
  min-height:66px !important;
  padding:20px 64px 18px 26px !important;
  border-bottom:0 !important;
  color:#fff !important;
  background:linear-gradient(135deg,#2563eb,#06b6d4) !important;
  overflow:hidden !important;
}

.modal .modal-header:after{
  content:"" !important;
  position:absolute !important;
  width:150px !important;
  height:150px !important;
  right:-36px !important;
  top:-62px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.18) !important;
}

.modal .modal-title{
  position:relative !important;
  z-index:2 !important;
  margin:0 !important;
  color:#fff !important;
  font-size:19px !important;
  font-weight:950 !important;
}

.modal .modal-header .close{
  position:absolute !important;
  right:18px !important;
  top:16px !important;
  z-index:5 !important;
  width:42px !important;
  height:42px !important;
  border-radius:999px !important;
  opacity:1 !important;
  color:#fff !important;
  background:rgba(255,255,255,.20) !important;
  text-shadow:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:28px !important;
  line-height:1 !important;
}

.modal .modal-body{
  padding:24px 28px 18px !important;
  overflow:visible !important;
}

.modal .modal-footer{
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:12px !important;
  padding:18px 28px 24px !important;
  border-top:0 !important;
  background:linear-gradient(180deg,rgba(248,250,252,.15),rgba(248,250,252,.86)) !important;
}

/* Tabel khusus filter tanggal, diberi class melalui JS */
.modal table.simbay-date-filter-table{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  table-layout:auto !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
  margin:0 !important;
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  overflow:visible !important;
  white-space:normal !important;
}

.modal table.simbay-date-filter-table thead,
.modal table.simbay-date-filter-table tbody{
  display:block !important;
  width:100% !important;
}

.modal table.simbay-date-filter-table thead tr,
.modal table.simbay-date-filter-table tbody tr{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:16px !important;
  width:100% !important;
}

.modal table.simbay-date-filter-table thead th,
.modal table.simbay-date-filter-table tbody td{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  white-space:normal !important;
}

.modal table.simbay-date-filter-table thead th:nth-child(n+3),
.modal table.simbay-date-filter-table tbody td:nth-child(n+3){
  display:none !important;
}

.modal table.simbay-date-filter-table thead th{
  margin-bottom:8px !important;
  padding:0 0 0 4px !important;
  color:#334155 !important;
  font-size:13px !important;
  font-weight:950 !important;
  letter-spacing:.02em !important;
}

.modal table.simbay-date-filter-table .input-group.date{
  display:flex !important;
  align-items:stretch !important;
  width:100% !important;
  max-width:100% !important;
  min-height:54px !important;
  border-radius:18px !important;
  background:#fff !important;
  border:1px solid rgba(148,163,184,.30) !important;
  box-shadow:0 12px 28px rgba(15,23,42,.08) !important;
  overflow:hidden !important;
}

.modal table.simbay-date-filter-table .input-group-addon{
  width:54px !important;
  min-width:54px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:0 !important;
  background:linear-gradient(135deg,#eef2ff,#e0f2fe) !important;
  color:#2563eb !important;
  font-size:16px !important;
}

.modal table.simbay-date-filter-table .form-control.date-picker{
  height:54px !important;
  min-height:54px !important;
  flex:1 1 auto !important;
  width:100% !important;
  border:0 !important;
  box-shadow:none !important;
  background:#fff !important;
  border-radius:0 !important;
  color:#0f172a !important;
  font-weight:850 !important;
  padding:12px 14px !important;
}

.modal table.simbay-date-filter-table .form-control.date-picker:focus{
  outline:none !important;
  box-shadow:inset 0 0 0 2px rgba(37,99,235,.12) !important;
}

.modal .modal-footer .btn,
.modal .modal-footer input[type="submit"].btn{
  border:0 !important;
  border-radius:16px !important;
  padding:11px 22px !important;
  min-width:96px !important;
  font-weight:950 !important;
  box-shadow:0 14px 30px rgba(15,23,42,.12) !important;
}

.modal .modal-footer .btn-success,
.modal .modal-footer input[type="submit"].btn-success{
  color:#fff !important;
  background:linear-gradient(135deg,#2563eb,#06b6d4) !important;
}

.modal .modal-footer .btn-default{
  color:#0f172a !important;
  background:#fff !important;
  border:1px solid rgba(226,232,240,.95) !important;
}

/* Kalender datepicker harus tampil di atas modal */
.datepicker,
.datepicker-dropdown,
.datepicker.datepicker-dropdown{
  z-index:2147483600 !important;
  border-radius:18px !important;
  border:0 !important;
  box-shadow:0 24px 70px rgba(15,23,42,.25) !important;
}

/* HP/tablet: field tanggal turun ke bawah agar tidak berantakan */
@media(max-width:767px){
  .modal .modal-dialog{
    width:calc(100vw - 20px) !important;
    margin:5vh auto !important;
  }

  .modal .modal-header{
    padding:18px 58px 16px 20px !important;
  }

  .modal .modal-body{
    padding:20px !important;
  }

  .modal .modal-footer{
    padding:16px 20px 20px !important;
    flex-direction:column !important;
  }

  .modal .modal-footer .btn,
  .modal .modal-footer input[type="submit"].btn{
    width:100% !important;
  }

  .modal table.simbay-date-filter-table thead tr,
  .modal table.simbay-date-filter-table tbody tr{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .modal table.simbay-date-filter-table thead{
    display:none !important;
  }

  .modal table.simbay-date-filter-table tbody td{
    position:relative !important;
  }

  .modal table.simbay-date-filter-table tbody td:nth-child(1):before{
    content:"Mulai" !important;
  }

  .modal table.simbay-date-filter-table tbody td:nth-child(2):before{
    content:"Sampai" !important;
  }

  .modal table.simbay-date-filter-table tbody td:before{
    display:block !important;
    margin:0 0 7px 4px !important;
    color:#334155 !important;
    font-size:13px !important;
    font-weight:950 !important;
  }
}


/* =========================================================
   Fix v48: modal lihat pembayaran/cicilan lebih rapi.
   ========================================================= */
.simbay-cicilan-object-wrap{
  width:100% !important;
  border-radius:18px !important;
  overflow:hidden !important;
  background:#f8fafc !important;
  border:1px solid rgba(226,232,240,.85) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85) !important;
}
.simbay-cicilan-object{
  display:block !important;
  width:100% !important;
  border:0 !important;
  border-radius:18px !important;
  background:#f8fafc !important;
}
.modal .modal-title:before{
  content:"\f15c";
  font-family:FontAwesome;
  margin-right:9px;
  opacity:.95;
}
@media(max-width:575px){
  .simbay-cicilan-object{
    height:360px !important;
  }
}


/* =========================================================
   Fix v49: popup filter tanggal lebih rapi dan profesional
   ========================================================= */
.simbay-date-filter-modal .modal-dialog{
  width:min(760px, calc(100vw - 30px)) !important;
  margin:40px auto !important;
}
.simbay-date-filter-modal .modal-content{
  border:0 !important;
  border-radius:24px !important;
  overflow:hidden !important;
  background:rgba(255,255,255,.98) !important;
  box-shadow:0 24px 60px rgba(15,23,42,.28) !important;
}
.simbay-date-filter-modal .modal-header{
  border:0 !important;
  padding:18px 22px !important;
  color:#fff !important;
  background:linear-gradient(135deg,#2563eb,#06b6d4) !important;
}
.simbay-date-filter-modal .modal-title{
  color:#fff !important;
  font-size:28px !important;
  font-weight:800 !important;
  display:flex;align-items:center;gap:10px;
}
.simbay-date-filter-modal .modal-title:before{
  content:"\f073";
  font-family:FontAwesome;
  font-size:18px;
  width:34px;height:34px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.18);
}
.simbay-date-filter-modal .modal-header .close{
  margin-top:0 !important;
  color:#fff !important;
  opacity:1 !important;
  width:44px;height:44px;
  border-radius:16px;
  background:rgba(255,255,255,.18) !important;
  text-shadow:none !important;
  font-size:32px !important;
}
.simbay-date-filter-modal .modal-body{
  padding:24px 24px 12px !important;
  background:linear-gradient(180deg,#ffffff,#f8fbff) !important;
}
.simbay-date-filter-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.simbay-date-field{
  background:#f8fbff;
  border:1px solid rgba(191,219,254,.9);
  border-radius:20px;
  padding:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.simbay-date-label{
  display:block;
  margin:0 0 10px;
  color:#1e3a8a;
  font-size:14px;
  font-weight:800;
  letter-spacing:.02em;
}
.simbay-date-filter-modal .input-group.date{
  display:flex !important;
  align-items:stretch !important;
  width:100% !important;
}
.simbay-date-filter-modal .input-group-addon{
  width:58px !important;
  min-width:58px !important;
  border:1px solid #bfdbfe !important;
  border-right:0 !important;
  border-radius:16px 0 0 16px !important;
  background:linear-gradient(135deg,#eff6ff,#dbeafe) !important;
  color:#2563eb !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:18px !important;
}
.simbay-date-filter-modal .form-control.date-picker{
  height:58px !important;
  border:1px solid #bfdbfe !important;
  border-left:0 !important;
  border-radius:0 16px 16px 0 !important;
  background:#fff !important;
  color:#0f172a !important;
  font-size:22px !important;
  font-weight:800 !important;
  box-shadow:none !important;
  padding:12px 18px !important;
}
.simbay-date-filter-modal .form-control.date-picker:focus{
  border-color:#60a5fa !important;
  box-shadow:0 0 0 4px rgba(37,99,235,.10) !important;
}
.simbay-date-filter-modal .modal-footer{
  border:0 !important;
  padding:8px 24px 24px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:12px !important;
  background:linear-gradient(180deg,#f8fbff,#ffffff) !important;
}
.simbay-date-filter-modal .modal-footer .btn{
  min-width:118px !important;
  height:48px !important;
  border-radius:16px !important;
  font-size:16px !important;
  font-weight:800 !important;
  border:0 !important;
}
.simbay-date-filter-modal .modal-footer .btn-success,
.simbay-date-filter-modal .modal-footer input.btn-success{
  color:#fff !important;
  background:linear-gradient(135deg,#2563eb,#06b6d4) !important;
  box-shadow:0 14px 26px rgba(37,99,235,.22) !important;
}
.simbay-date-filter-modal .modal-footer .btn-default{
  color:#334155 !important;
  background:#eef2f7 !important;
  box-shadow:none !important;
  border:1px solid #dbe4ef !important;
}
@media (max-width: 767px){
  .simbay-date-filter-modal .modal-dialog{
    width:calc(100vw - 24px) !important;
    margin:18px auto !important;
  }
  .simbay-date-filter-modal .modal-body{
    padding:18px 16px 8px !important;
  }
  .simbay-date-filter-grid{
    grid-template-columns:1fr;
    gap:14px;
  }
  .simbay-date-filter-modal .form-control.date-picker{
    font-size:18px !important;
    height:54px !important;
  }
  .simbay-date-filter-modal .modal-title{
    font-size:22px !important;
  }
  .simbay-date-filter-modal .modal-footer{
    padding:8px 16px 18px !important;
    justify-content:stretch !important;
  }
  .simbay-date-filter-modal .modal-footer .btn,
  .simbay-date-filter-modal .modal-footer input.btn-success{
    flex:1 1 auto !important;
    min-width:0 !important;
  }
}


/* =========================================================
   Fix v50: Informasi Siswa dikembalikan menjadi tabel identitas,
   bukan form filter tanggal.
   ========================================================= */
.simbay-student-info-table{
  width:100% !important;
  margin:0 !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
  overflow:hidden !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.96) !important;
  box-shadow:0 10px 28px rgba(15,23,42,.06) !important;
}

.simbay-student-info-table tr:nth-child(odd) td{
  background:rgba(239,246,255,.75) !important;
}

.simbay-student-info-table tr:nth-child(even) td{
  background:rgba(255,255,255,.92) !important;
}

.simbay-student-info-table td{
  padding:12px 14px !important;
  border:0 !important;
  border-bottom:1px solid rgba(226,232,240,.72) !important;
  color:#0f172a !important;
  font-weight:750 !important;
  vertical-align:middle !important;
}

.simbay-student-info-table tr:last-child td{
  border-bottom:0 !important;
}

.simbay-student-info-table td:first-child{
  color:#475569 !important;
  font-weight:900 !important;
  width:190px !important;
}

.simbay-student-info-table td:nth-child(2){
  width:16px !important;
  text-align:center !important;
  color:#64748b !important;
  font-weight:900 !important;
}

.simbay-student-info-table td:last-child{
  font-weight:900 !important;
}

@media(max-width:575px){
  .simbay-student-info-table td{
    padding:10px !important;
    font-size:12px !important;
  }
  .simbay-student-info-table td:first-child{
    width:120px !important;
  }
}


/* =========================================================
   Fix v52: dropdown cari siswa pada popup Setor/Tarik ditampilkan
   sebagai overlay/floating di depan box modal.
   ========================================================= */
body > .simbay-modal-student-portal{
  position:fixed !important;
  display:none !important;
  min-width:280px !important;
  max-height:320px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding:8px !important;
  border-radius:18px !important;
  border:1px solid rgba(148,163,184,.26) !important;
  background:rgba(255,255,255,.99) !important;
  box-shadow:0 24px 60px rgba(15,23,42,.26) !important;
  z-index:999999 !important;
  backdrop-filter:blur(14px) !important;
}
body > .simbay-modal-student-portal.is-open{
  display:block !important;
}
body > .simbay-modal-student-portal .simbay-portal-item{
  display:block !important;
  width:100% !important;
  padding:11px 13px !important;
  border:0 !important;
  border-radius:12px !important;
  background:transparent !important;
  text-align:left !important;
  color:#0f172a !important;
  font-weight:850 !important;
  line-height:1.35 !important;
}
body > .simbay-modal-student-portal .simbay-portal-item:hover,
body > .simbay-modal-student-portal .simbay-portal-item.active{
  background:linear-gradient(135deg,#2563eb,#06b6d4) !important;
  color:#fff !important;
}
body > .simbay-modal-student-portal .simbay-portal-empty{
  padding:12px 13px !important;
  color:#64748b !important;
  font-weight:800 !important;
}
.modal .simbay-payment-style-picker .simbay-modal-student-results{
  display:none !important;
}


/* =========================================================
   Fix v53: popup Setoran Tunai / Penarikan Tunai lebih modern,
   presisi, elegan, dan responsif.
   ========================================================= */
.simbay-transaksi-modal .modal-dialog{
  width:min(720px, calc(100vw - 30px)) !important;
  margin:7vh auto !important;
}

.simbay-transaksi-modal .modal-content{
  border:0 !important;
  border-radius:32px !important;
  overflow:hidden !important;
  background:rgba(255,255,255,.98) !important;
  box-shadow:0 34px 100px rgba(15,23,42,.38) !important;
  backdrop-filter:blur(18px) !important;
  -webkit-backdrop-filter:blur(18px) !important;
}

.simbay-transaksi-modal .modal-header{
  position:relative !important;
  min-height:72px !important;
  padding:22px 72px 20px 28px !important;
  border:0 !important;
  color:#fff !important;
  overflow:hidden !important;
}

.simbay-setor-modal .modal-header{
  background:linear-gradient(135deg,#16a34a,#22c55e 45%,#06b6d4) !important;
}

.simbay-tarik-modal .modal-header{
  background:linear-gradient(135deg,#ef4444,#f43f5e 45%,#fb923c) !important;
}

.simbay-transaksi-modal .modal-header:before{
  content:"" !important;
  position:absolute !important;
  width:170px !important;
  height:170px !important;
  right:-52px !important;
  top:-78px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.18) !important;
  animation:simbayModalBubble 5s ease-in-out infinite !important;
}

.simbay-transaksi-modal .modal-header:after{
  content:"" !important;
  position:absolute !important;
  width:90px !important;
  height:90px !important;
  right:78px !important;
  bottom:-56px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.10) !important;
}

.simbay-transaksi-modal .modal-title{
  position:relative !important;
  z-index:2 !important;
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  color:#fff !important;
  font-size:22px !important;
  font-weight:950 !important;
  letter-spacing:.01em !important;
}

.simbay-transaksi-modal .modal-title:before{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.20) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25) !important;
  font-family:FontAwesome !important;
  font-size:18px !important;
  color:#fff !important;
}

.simbay-setor-modal .modal-title:before{
  content:"\f0d6" !important;
}

.simbay-tarik-modal .modal-title:before{
  content:"\f08b" !important;
}

.simbay-transaksi-modal .modal-header .close,
.simbay-transaksi-modal .modal-header button.close{
  position:absolute !important;
  top:17px !important;
  right:18px !important;
  z-index:5 !important;
  width:44px !important;
  height:44px !important;
  border-radius:16px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:rgba(255,255,255,.22) !important;
  color:#fff !important;
  opacity:1 !important;
  text-shadow:none !important;
  font-size:30px !important;
  line-height:1 !important;
  transition:.18s ease !important;
}

.simbay-transaksi-modal .modal-header .close:hover{
  transform:scale(1.05) rotate(3deg) !important;
  background:rgba(255,255,255,.32) !important;
}

.simbay-transaksi-modal .modal-body{
  padding:28px 32px 30px !important;
  background:
    radial-gradient(circle at 12% 0%,rgba(37,99,235,.05),transparent 28%),
    linear-gradient(180deg,#ffffff,#f8fbff) !important;
  overflow:visible !important;
}

.simbay-transaksi-modal .form-horizontal,
.simbay-transaksi-modal .form-group,
.simbay-transaksi-modal .col-sm-12{
  margin:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
  overflow:visible !important;
}

.simbay-transaksi-modal .simbay-modal-label{
  float:none !important;
  width:100% !important;
  margin:0 0 10px !important;
  padding:0 !important;
  text-align:left !important;
  color:#1f2937 !important;
  font-size:14px !important;
  font-weight:950 !important;
  letter-spacing:.02em !important;
}

.simbay-transaksi-modal .simbay-modal-label i{
  margin-right:7px !important;
  color:#2563eb !important;
}

.simbay-transaksi-modal .simbay-modal-student-picker-wrap{
  position:relative !important;
  margin:0 0 18px !important;
  z-index:20 !important;
}

.simbay-transaksi-modal .simbay-payment-style-picker{
  margin-bottom:18px !important;
}

.simbay-transaksi-modal .simbay-payment-style-picker > .fa{
  left:18px !important;
  top:30px !important;
  color:#2563eb !important;
  font-size:18px !important;
}

.simbay-transaksi-modal .simbay-modal-student-input{
  height:62px !important;
  min-height:62px !important;
  padding:14px 18px 14px 50px !important;
  border-radius:22px !important;
  border:1px solid rgba(148,163,184,.38) !important;
  background:#fff !important;
  color:#0f172a !important;
  font-size:15px !important;
  font-weight:900 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 14px 34px rgba(15,23,42,.08) !important;
}

.simbay-transaksi-modal .simbay-modal-student-input::placeholder{
  color:#94a3b8 !important;
  font-weight:800 !important;
}

.simbay-transaksi-modal .simbay-modal-student-input:focus{
  outline:none !important;
  border-color:#2563eb !important;
  box-shadow:
    0 0 0 5px rgba(37,99,235,.12),
    0 18px 38px rgba(37,99,235,.14) !important;
}

.simbay-transaksi-modal .simbay-modal-action-btn,
.simbay-transaksi-modal .modal-body form .btn[type="submit"]{
  min-width:170px !important;
  height:52px !important;
  padding:0 24px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;
  border:0 !important;
  border-radius:18px !important;
  color:#fff !important;
  font-size:15px !important;
  font-weight:950 !important;
  box-shadow:0 18px 36px rgba(15,23,42,.16) !important;
  transition:.18s ease !important;
}

.simbay-transaksi-modal .simbay-modal-action-btn:hover,
.simbay-transaksi-modal .modal-body form .btn[type="submit"]:hover{
  transform:translateY(-2px) !important;
  filter:brightness(1.04) !important;
}

.simbay-transaksi-modal .simbay-setor-action,
.simbay-setor-modal .modal-body form .btn[type="submit"]{
  background:linear-gradient(135deg,#16a34a,#22c55e) !important;
}

.simbay-transaksi-modal .simbay-tarik-action,
.simbay-tarik-modal .modal-body form .btn[type="submit"]{
  background:linear-gradient(135deg,#ef4444,#f43f5e) !important;
}

.simbay-transaksi-modal .modal-body:after{
  content:"Pilih siswa dari hasil pencarian agar transaksi berjalan dengan benar." !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  margin-top:20px !important;
  padding:12px 14px !important;
  border-radius:18px !important;
  color:#475569 !important;
  background:rgba(37,99,235,.07) !important;
  border:1px solid rgba(37,99,235,.10) !important;
  font-size:12px !important;
  font-weight:850 !important;
}

body > .simbay-modal-student-portal{
  border-radius:20px !important;
  padding:10px !important;
  box-shadow:0 28px 80px rgba(15,23,42,.30) !important;
}

body > .simbay-modal-student-portal .simbay-portal-item{
  padding:12px 14px !important;
  border-radius:14px !important;
  font-weight:900 !important;
}

@keyframes simbayModalBubble{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(-10px,8px) scale(1.05);}
}

/* HP / tablet */
@media(max-width:767px){
  .simbay-transaksi-modal .modal-dialog{
    width:calc(100vw - 22px) !important;
    margin:4vh auto !important;
  }

  .simbay-transaksi-modal .modal-header{
    min-height:66px !important;
    padding:18px 66px 16px 20px !important;
  }

  .simbay-transaksi-modal .modal-title{
    font-size:18px !important;
  }

  .simbay-transaksi-modal .modal-title:before{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
  }

  .simbay-transaksi-modal .modal-body{
    padding:22px 20px 24px !important;
  }

  .simbay-transaksi-modal .simbay-modal-student-input{
    height:58px !important;
    min-height:58px !important;
    border-radius:20px !important;
  }

  .simbay-transaksi-modal .simbay-modal-action-btn,
  .simbay-transaksi-modal .modal-body form .btn[type="submit"]{
    width:100% !important;
    min-width:0 !important;
    height:52px !important;
  }

  .simbay-transaksi-modal .modal-body:after{
    font-size:11.5px !important;
  }
}


/* Fix v54: rapikan kalender agar hanya muncul saat dipanggil dan tidak menutup header modal */
.datepicker,
.datepicker-dropdown{
  z-index:2147483000 !important;
}
.modal .date-picker{
  cursor:pointer !important;
}


/* =========================================================
   Fix v56: responsif, cepat, dan ringan saat menu dibuka.
   ========================================================= */
html,body{
  max-width:100% !important;
  overflow-x:hidden !important;
  -webkit-font-smoothing:antialiased !important;
  text-rendering:optimizeLegibility !important;
}

.wrapper,
.content-wrapper,
.right-side,
.main-footer{
  max-width:100% !important;
}

.content-wrapper{
  min-height:100dvh !important;
  overflow-x:hidden !important;
}

/* Kurangi beban render animasi/blur pada perangkat kecil */
.main-sidebar,
.main-header,
.content-wrapper,
.box,
.panel,
.nav-tabs-custom,
.info-box,
.small-box{
  backface-visibility:hidden !important;
  transform:translateZ(0) !important;
}

.table-responsive,
.dataTables_wrapper,
.dataTables_scrollBody,
.simbay-table-scroll-x,
.simbay-mobile-table-scroll{
  max-width:100% !important;
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch !important;
}

.main-sidebar,
.left-side{
  will-change:transform !important;
  transition:transform .16s ease,left .16s ease,width .16s ease !important;
}

.sidebar-menu,
.sidebar-menu > li,
.sidebar-menu .treeview-menu{
  contain:layout paint !important;
}

.sidebar-menu > li > a,
.sidebar-menu .treeview-menu > li > a{
  transition:background-color .12s ease,color .12s ease !important;
  touch-action:manipulation !important;
}

.main-header .sidebar-toggle,
.modern-mobile-sidebar-btn,
.btn,
button,
a{
  touch-action:manipulation !important;
  -webkit-tap-highlight-color:transparent !important;
}

@media(max-width:1366px){
  .content{padding:18px 18px 76px !important;}
  .box,.panel,.nav-tabs-custom{margin-bottom:18px !important;}
}

@media(max-width:991px){
  body{overflow-x:hidden !important;}

  .main-header{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    z-index:1035 !important;
  }

  .content-wrapper,
  .right-side{
    margin-left:0 !important;
    padding-top:58px !important;
    width:100% !important;
  }

  .content{
    padding:14px 12px 92px !important;
  }

  .main-sidebar,
  .left-side{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    bottom:0 !important;
    width:280px !important;
    max-width:86vw !important;
    height:100dvh !important;
    z-index:1045 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    transform:translate3d(-105%,0,0) !important;
  }

  body.sidebar-open .main-sidebar,
  body.sidebar-open .left-side{
    transform:translate3d(0,0,0) !important;
  }

  body.sidebar-open:before{
    content:"" !important;
    position:fixed !important;
    inset:0 !important;
    z-index:1040 !important;
    background:rgba(15,23,42,.44) !important;
    backdrop-filter:blur(2px) !important;
  }

  .sidebar-menu{padding-bottom:90px !important;}
  .sidebar-menu > li > a{
    min-height:46px !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
  }

  .box,
  .panel,
  .nav-tabs-custom,
  .modal-content{
    box-shadow:0 12px 28px rgba(15,23,42,.10) !important;
  }

  .box,
  .panel,
  .nav-tabs-custom,
  .modal-content{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  .table-responsive table,
  .dataTable,
  table.table{
    font-size:13px !important;
  }

  .dataTables_wrapper .row{
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .dataTables_filter,
  .dataTables_length,
  .dataTables_info,
  .dataTables_paginate{
    float:none !important;
    width:100% !important;
    text-align:left !important;
    margin:6px 0 !important;
  }

  .dataTables_filter input{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
  }

  .simbay-animated-bg,
  .simbay-floating-shape,
  .modern-blob,
  .modal-header:before,
  .modal-header:after{
    animation:none !important;
  }
}

@media(max-width:575px){
  .content{padding:12px 10px 92px !important;}

  .content-header,
  .content-header h1,
  .modern-page-title,
  .simbay-page-title{
    font-size:20px !important;
    line-height:1.25 !important;
  }

  .box,
  .panel,
  .nav-tabs-custom{
    border-radius:18px !important;
    margin-bottom:14px !important;
  }

  .box-header,
  .panel-heading{padding:13px 15px !important;}

  .box-body,
  .panel-body{padding:14px !important;}

  .btn{
    min-height:40px !important;
  }

  .form-control,
  select.form-control,
  textarea.form-control{
    min-height:44px !important;
    font-size:14px !important;
  }

  .modal-dialog{
    width:calc(100vw - 18px) !important;
    margin:14px auto !important;
  }

  .modal-body{
    max-height:calc(100dvh - 145px) !important;
  }

  .main-footer,
  .simbay-bottom-bar{
    font-size:11px !important;
    padding:10px 12px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  *,
  *:before,
  *:after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* Datepicker tetap bisa diklik dan tampil di atas modal */
.datepicker,
.datepicker-dropdown{
  z-index:2147483000 !important;
}
.modal .date-picker,
.modal .input-group.date .input-group-addon{
  cursor:pointer !important;
}






/* Fix v61: native tanggal ringan, responsif, dan tidak bentrok datepicker lama */
input.simbay-native-date[type="date"]{
  min-height:46px !important;
  width:100% !important;
  cursor:pointer !important;
  background:#fff !important;
  color:#0f172a !important;
  font-weight:800 !important;
}
input.simbay-native-date[type="date"]::-webkit-calendar-picker-indicator{
  cursor:pointer !important;
  opacity:.85 !important;
}
.modal .input-group.date .input-group-addon{
  cursor:pointer !important;
  pointer-events:auto !important;
}
.datepicker,.datepicker-dropdown{
  display:none !important;
}


/* =========================================================
   Fix v62: tanggal native untuk semua menu laporan/pembayaran.
   Ringan, stabil, dan tidak bergantung datepicker lama.
   ========================================================= */
input.simbay-native-date,
input[type="date"].simbay-native-date,
.input-group.date input[type="date"]{
  width:100% !important;
  min-height:44px !important;
  padding:10px 12px !important;
  border:1px solid rgba(148,163,184,.38) !important;
  border-radius:12px !important;
  background:#fff !important;
  color:#0f172a !important;
  font-weight:800 !important;
  cursor:pointer !important;
  pointer-events:auto !important;
}

.input-group.date{
  width:100% !important;
  position:relative !important;
}

.input-group.date .input-group-addon{
  cursor:pointer !important;
  pointer-events:auto !important;
  background:linear-gradient(135deg,#2563eb,#06b6d4) !important;
  color:#fff !important;
  border:0 !important;
  border-radius:12px 0 0 12px !important;
}

.input-group.date input[type="date"]{
  border-radius:0 12px 12px 0 !important;
}

.datepicker,
.datepicker-dropdown{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* Semua tabel filter laporan yang berisi tanggal dibuat lebih responsif */
form .table.table-striped{
  max-width:100% !important;
}

@media(max-width:767px){
  form .table.table-striped,
  form .table.table-striped tbody,
  form .table.table-striped tr,
  form .table.table-striped td,
  form .table.table-striped th{
    display:block !important;
    width:100% !important;
  }

  form .table.table-striped td,
  form .table.table-striped th{
    padding:8px 0 !important;
    border:0 !important;
  }

  form .table.table-striped input,
  form .table.table-striped select,
  form .table.table-striped .btn{
    width:100% !important;
    margin:4px 0 !important;
  }
}


/* Fix v62b: native date wajib bisa diklik langsung */
input.simbay-native-date,
input[type="date"]{
  pointer-events:auto !important;
  user-select:auto !important;
  -webkit-user-select:auto !important;
  appearance:auto !important;
  -webkit-appearance:auto !important;
}


/* =========================================================
   Fix v63: sidebar tidak bertindih, submenu rapi,
   icon menu lebih berwarna dan hidup.
   ========================================================= */
body:not(.modern-public-body) .main-sidebar,
body:not(.modern-public-body) .left-side{
  overflow-x:hidden !important;
}

body:not(.modern-public-body) .sidebar{
  overflow:visible !important;
  padding:14px 12px 96px !important;
}

body:not(.modern-public-body) .sidebar-menu{
  overflow:visible !important;
  padding-bottom:100px !important;
}

body:not(.modern-public-body) .sidebar-menu,
body:not(.modern-public-body) .sidebar-menu li,
body:not(.modern-public-body) .sidebar-menu ul{
  list-style:none !important;
}

body:not(.modern-public-body) .sidebar-menu > li{
  position:relative !important;
  display:block !important;
  clear:both !important;
  margin:0 0 7px !important;
  overflow:visible !important;
}

body:not(.modern-public-body) .sidebar-menu > li > a,
body:not(.modern-public-body) .sidebar-menu .treeview-menu > li > a{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  width:100% !important;
  min-height:48px !important;
  padding:9px 44px 9px 12px !important;
  border-radius:16px !important;
  line-height:1.25 !important;
  overflow:visible !important;
  white-space:normal !important;
  transform:none !important;
}

body:not(.modern-public-body) .sidebar-menu > li > a:hover,
body:not(.modern-public-body) .sidebar-menu > li.active > a,
body:not(.modern-public-body) .sidebar-menu .treeview-menu > li > a:hover,
body:not(.modern-public-body) .sidebar-menu .treeview-menu > li.active > a{
  transform:none !important;
}

body:not(.modern-public-body) .sidebar-menu > li > a > span,
body:not(.modern-public-body) .sidebar-menu .treeview-menu > li > a > span{
  display:inline-block !important;
  min-width:0 !important;
  flex:1 1 auto !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
}

body:not(.modern-public-body) .sidebar-menu > li > a > .fa:not(.fa-angle-left):first-child,
body:not(.modern-public-body) .sidebar-menu .treeview-menu > li > a > .fa:not(.fa-angle-left):first-child,
body:not(.modern-public-body) .sidebar-menu > li > a > .glyphicon:first-child,
body:not(.modern-public-body) .sidebar-menu .treeview-menu > li > a > .glyphicon:first-child{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  line-height:34px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
  border-radius:14px !important;
  color:#fff !important;
  box-shadow:0 8px 20px rgba(15,23,42,.16) !important;
  animation:none !important;
}

/* warna icon utama dibuat beragam */
body:not(.modern-public-body) .sidebar-menu > li:nth-child(4n+1) > a > .fa:first-child,
body:not(.modern-public-body) .sidebar-menu > li:nth-child(4n+1) > a > .glyphicon:first-child{
  background:linear-gradient(135deg,#2563eb,#06b6d4) !important;
}

body:not(.modern-public-body) .sidebar-menu > li:nth-child(4n+2) > a > .fa:first-child,
body:not(.modern-public-body) .sidebar-menu > li:nth-child(4n+2) > a > .glyphicon:first-child{
  background:linear-gradient(135deg,#16a34a,#22c55e) !important;
}

body:not(.modern-public-body) .sidebar-menu > li:nth-child(4n+3) > a > .fa:first-child,
body:not(.modern-public-body) .sidebar-menu > li:nth-child(4n+3) > a > .glyphicon:first-child{
  background:linear-gradient(135deg,#7c3aed,#a855f7) !important;
}

body:not(.modern-public-body) .sidebar-menu > li:nth-child(4n+4) > a > .fa:first-child,
body:not(.modern-public-body) .sidebar-menu > li:nth-child(4n+4) > a > .glyphicon:first-child{
  background:linear-gradient(135deg,#f97316,#f59e0b) !important;
}

/* warna icon submenu */
body:not(.modern-public-body) .sidebar-menu .treeview-menu > li:nth-child(3n+1) > a > .fa:first-child{
  background:linear-gradient(135deg,#0ea5e9,#22d3ee) !important;
}

body:not(.modern-public-body) .sidebar-menu .treeview-menu > li:nth-child(3n+2) > a > .fa:first-child{
  background:linear-gradient(135deg,#10b981,#34d399) !important;
}

body:not(.modern-public-body) .sidebar-menu .treeview-menu > li:nth-child(3n+3) > a > .fa:first-child{
  background:linear-gradient(135deg,#8b5cf6,#c084fc) !important;
}

body:not(.modern-public-body) .sidebar-menu li > a > .fa-angle-left,
body:not(.modern-public-body) .sidebar-menu li > a > .pull-right.fa-angle-left{
  position:absolute !important;
  right:12px !important;
  top:50% !important;
  width:28px !important;
  height:28px !important;
  min-width:28px !important;
  line-height:28px !important;
  margin:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  transform:translateY(-50%) !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.14) !important;
  color:#e0f2fe !important;
  box-shadow:none !important;
  animation:none !important;
}

body:not(.modern-public-body) .sidebar-menu li.active > a > .fa-angle-left{
  transform:translateY(-50%) rotate(-90deg) !important;
  background:linear-gradient(135deg,#38bdf8,#2563eb) !important;
  color:#fff !important;
}

body:not(.modern-public-body) .sidebar-menu .treeview-menu{
  position:relative !important;
  clear:both !important;
  margin:6px 0 8px 12px !important;
  padding:8px 8px 8px 10px !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.08) !important;
  overflow:visible !important;
}

body:not(.modern-public-body) .sidebar-menu li.active > .treeview-menu{
  display:block !important;
}

body:not(.modern-public-body) .sidebar-menu .treeview-menu > li{
  margin:0 0 5px !important;
  clear:both !important;
}

body:not(.modern-public-body) .sidebar-menu .treeview-menu > li > a{
  min-height:42px !important;
  padding:7px 12px !important;
  font-size:13px !important;
}

/* Saat sidebar collapse di desktop, hindari submenu/icon tindih */
@media(min-width:992px){
  body.sidebar-collapse:not(.modern-public-body) .sidebar-menu > li > a{
    justify-content:center !important;
    padding-left:8px !important;
    padding-right:8px !important;
  }

  body.sidebar-collapse:not(.modern-public-body) .sidebar-menu > li > a > span,
  body.sidebar-collapse:not(.modern-public-body) .sidebar-menu > li > a > .fa-angle-left{
    display:none !important;
  }
}

/* Perbaiki halaman Tabungan/Jurnal yang sebelumnya kosong akibat error parse */
.simbay-tabungan-topbar,
.simbay-tabungan-history-box,
.box,
.panel{
  visibility:visible !important;
  opacity:1 !important;
}


/* =========================================================
   Fix v64: tab/pagination DataTables tidak tertutup bottom bar.
   Tinggi konten menyesuaikan monitor otomatis.
   ========================================================= */
:root{
  --simbay-footer-space: 96px;
  --simbay-footer-real-height: 58px;
}

body:not(.modern-public-body) .content-wrapper,
body:not(.modern-public-body) .right-side{
  height:auto !important;
  min-height:calc(100dvh - 58px) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding-bottom:calc(var(--simbay-footer-space) + env(safe-area-inset-bottom, 0px)) !important;
  scroll-padding-bottom:calc(var(--simbay-footer-space) + 28px) !important;
}

body:not(.modern-public-body) .content{
  padding-bottom:calc(var(--simbay-footer-space) + 34px + env(safe-area-inset-bottom, 0px)) !important;
}

body:not(.modern-public-body) .main-footer{
  height:auto !important;
  min-height:52px !important;
  z-index:1030 !important;
}

body:not(.modern-public-body) .modern-bottom-appbar{
  min-height:40px !important;
}

/* Area tabel diberi ruang bawah agar tombol halaman 1, 2, dst tidak ketutup */
.dataTables_wrapper,
.table-responsive,
.simbay-tabungan-history-box,
.simbay-table-scroll-x,
.simbay-mobile-table-scroll{
  padding-bottom:calc(var(--simbay-footer-space) + 10px) !important;
  margin-bottom:12px !important;
}

.dataTables_wrapper .row:last-child,
.dataTables_info,
.dataTables_paginate{
  position:relative !important;
  z-index:5 !important;
  margin-bottom:calc(var(--simbay-footer-space) + 12px) !important;
}

.dataTables_paginate .pagination{
  margin-bottom:0 !important;
}

/* Khusus tabel tabungan yang panjang */
body:not(.modern-public-body) .simbay-tabungan-history-box .dataTables_wrapper{
  padding-bottom:calc(var(--simbay-footer-space) + 30px) !important;
}

body:not(.modern-public-body) .simbay-tabungan-history-box .dataTables_paginate,
body:not(.modern-public-body) .simbay-tabungan-history-box .dataTables_info{
  margin-bottom:calc(var(--simbay-footer-space) + 22px) !important;
}

/* Monitor pendek seperti laptop 13 inch / Safari dengan dock */
@media(max-height:820px){
  :root{
    --simbay-footer-space: 128px;
  }

  body:not(.modern-public-body) .content{
    padding-bottom:calc(var(--simbay-footer-space) + 46px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Tablet dan HP */
@media(max-width:991px){
  :root{
    --simbay-footer-space: 124px;
  }

  body:not(.modern-public-body) .content-wrapper,
  body:not(.modern-public-body) .right-side{
    padding-bottom:calc(var(--simbay-footer-space) + env(safe-area-inset-bottom, 0px)) !important;
  }

  .dataTables_wrapper .row:last-child,
  .dataTables_info,
  .dataTables_paginate{
    margin-bottom:calc(var(--simbay-footer-space) + 16px) !important;
  }
}

@media(max-width:575px){
  :root{
    --simbay-footer-space: 142px;
  }

  .dataTables_paginate .pagination{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:6px !important;
  }

  .dataTables_paginate .pagination > li > a,
  .dataTables_paginate .pagination > li > span{
    margin:0 !important;
  }
}


/* =========================================================
   Fix v65: popup Lihat Pembayaran/Cicilan tampil di depan,
   tidak kosong, dan iframe cicilan terbaca di semua browser.
   ========================================================= */
.modal.simbay-cicilan-modal{
  z-index:2147482000 !important;
}

.modal.simbay-cicilan-modal.in,
.modal.simbay-cicilan-modal.show{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.modal.simbay-cicilan-modal .modal-dialog{
  width:min(820px, calc(100vw - 28px)) !important;
  max-width:calc(100vw - 28px) !important;
  margin:18px auto !important;
  z-index:2147482100 !important;
}

.modal.simbay-cicilan-modal .modal-content{
  border-radius:26px !important;
  overflow:hidden !important;
  box-shadow:0 34px 100px rgba(15,23,42,.38) !important;
  background:#fff !important;
}

.modal.simbay-cicilan-modal .modal-header{
  background:linear-gradient(135deg,#1d4ed8,#06b6d4) !important;
  color:#fff !important;
}

.modal.simbay-cicilan-modal .modal-title{
  color:#fff !important;
  font-weight:950 !important;
}

.modal.simbay-cicilan-modal .modal-body{
  padding:14px !important;
  max-height:calc(100dvh - 170px) !important;
  overflow:auto !important;
  background:linear-gradient(180deg,#ffffff,#f8fbff) !important;
}

.simbay-cicilan-object-wrap{
  width:100% !important;
  min-height:430px !important;
  overflow:hidden !important;
  border-radius:18px !important;
  background:#f8fafc !important;
}

.simbay-cicilan-iframe,
.simbay-cicilan-object{
  display:block !important;
  width:100% !important;
  min-height:430px !important;
  height:430px !important;
  border:0 !important;
  background:#fff !important;
  border-radius:18px !important;
}

body.modal-open .modal-backdrop{
  z-index:2147481000 !important;
}

body.modal-open .modal.simbay-cicilan-modal{
  pointer-events:auto !important;
}

.view-cicilan{
  cursor:pointer !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:28px !important;
  padding:7px 10px !important;
  border-radius:999px !important;
  font-weight:900 !important;
}

@media(max-width:575px){
  .modal.simbay-cicilan-modal .modal-dialog{
    width:calc(100vw - 16px) !important;
    max-width:calc(100vw - 16px) !important;
    margin:8px auto !important;
  }
  .modal.simbay-cicilan-modal .modal-body{
    padding:10px !important;
    max-height:calc(100dvh - 135px) !important;
  }
  .simbay-cicilan-iframe,
  .simbay-cicilan-object,
  .simbay-cicilan-object-wrap{
    min-height:440px !important;
    height:440px !important;
  }
}


/* =========================================================
   Fix v73 TOTAL RESET LAYOUT
   Rombak total bagian layout yang tumpuk/terlalu renggang:
   - konten normal mengikuti tinggi layar
   - box/form/tabel rapat proporsional
   - DataTables kembali sejajar
   - modal/input tanggal tidak blur
   ========================================================= */

/* 1. Reset scroll & struktur dasar agar tidak terkunci/tumpuk */
html{
  width:100% !important;
  max-width:100% !important;
  min-height:100% !important;
  height:auto !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
}

body:not(.modern-public-body){
  width:100% !important;
  max-width:100% !important;
  min-height:100vh !important;
  height:auto !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  background:#eef6ff !important;
}

body:not(.modern-public-body).modal-open{
  overflow:hidden !important;
}

body:not(.modern-public-body) .wrapper{
  min-height:100vh !important;
  height:auto !important;
  overflow:visible !important;
  background:transparent !important;
}

body:not(.modern-public-body) .main-header{
  position:sticky !important;
  top:0 !important;
  z-index:1040 !important;
}

body:not(.modern-public-body) .content-wrapper,
body:not(.modern-public-body) .right-side{
  position:relative !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  min-height:calc(100vh - 58px) !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  padding:0 !important;
  background:transparent !important;
}

body:not(.modern-public-body) .content{
  position:relative !important;
  width:100% !important;
  max-width:100% !important;
  min-height:auto !important;
  height:auto !important;
  overflow:visible !important;
  padding:16px 18px 22px !important;
}

body:not(.modern-public-body) .content-header{
  padding:14px 18px 0 !important;
}

body:not(.modern-public-body) .content-header h1{
  margin-bottom:10px !important;
  padding:10px 16px !important;
  font-size:21px !important;
  border-radius:18px !important;
}

/* 2. Footer dibuat normal di bawah, bukan menutup halaman */
body:not(.modern-public-body) .main-footer{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  height:auto !important;
  min-height:54px !important;
  margin-left:230px !important;
  padding:9px 16px !important;
  z-index:10 !important;
  border-top:1px solid rgba(226,232,240,.85) !important;
  background:rgba(255,255,255,.95) !important;
  box-shadow:0 -6px 18px rgba(15,23,42,.05) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

body.sidebar-collapse:not(.modern-public-body) .main-footer{
  margin-left:50px !important;
}

body:not(.modern-public-body) .modern-bottom-appbar{
  min-height:34px !important;
  height:auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
}

/* 3. Hilangkan jarak berlebihan dari row/col global */
body:not(.modern-public-body) .row{
  margin-left:-8px !important;
  margin-right:-8px !important;
}

body:not(.modern-public-body) .row > [class*="col-"]{
  padding-left:8px !important;
  padding-right:8px !important;
  margin-bottom:14px !important;
}

/* 4. Box, panel, well dibuat profesional tapi tidak terlalu besar */
body:not(.modern-public-body) .box,
body:not(.modern-public-body) .panel,
body:not(.modern-public-body) .nav-tabs-custom,
body:not(.modern-public-body) .well,
body:not(.modern-public-body) .callout{
  width:100% !important;
  max-width:100% !important;
  margin:0 0 16px !important;
  clear:both !important;
  border-radius:22px !important;
  border:1px solid rgba(226,232,240,.85) !important;
  background:rgba(255,255,255,.96) !important;
  box-shadow:0 12px 30px rgba(15,23,42,.07) !important;
  overflow:hidden !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

body:not(.modern-public-body) .box-header,
body:not(.modern-public-body) .panel-heading,
body:not(.modern-public-body) .box.box-solid > .box-header,
body:not(.modern-public-body) .box.box-primary.box-solid > .box-header,
body:not(.modern-public-body) .box.box-info.box-solid > .box-header,
body:not(.modern-public-body) .box.box-success.box-solid > .box-header,
body:not(.modern-public-body) .box.box-warning.box-solid > .box-header,
body:not(.modern-public-body) .box.box-danger.box-solid > .box-header{
  min-height:52px !important;
  padding:14px 18px !important;
  border:0 !important;
  border-radius:22px 22px 0 0 !important;
}

body:not(.modern-public-body) .box-header .box-title,
body:not(.modern-public-body) .panel-title{
  font-size:17px !important;
  line-height:1.35 !important;
  font-weight:900 !important;
}

body:not(.modern-public-body) .box-body,
body:not(.modern-public-body) .panel-body,
body:not(.modern-public-body) .tab-content{
  padding:14px 16px !important;
  overflow:visible !important;
}

/* Jika form berada dalam header, tetap dibikin rapi */
body:not(.modern-public-body) .box-header form{
  margin-top:14px !important;
}

body:not(.modern-public-body) .box-header .well,
body:not(.modern-public-body) .box-header form .well{
  margin:8px 0 0 !important;
  padding:14px !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.97) !important;
  box-shadow:none !important;
}

/* 5. Form lebih rapat dan presisi */
body:not(.modern-public-body) .form-group{
  margin-bottom:12px !important;
}

body:not(.modern-public-body) label{
  margin-bottom:6px !important;
  color:#334155 !important;
  font-weight:850 !important;
}

body:not(.modern-public-body) .form-control,
body:not(.modern-public-body) select.form-control,
body:not(.modern-public-body) textarea.form-control{
  min-height:42px !important;
  border-radius:14px !important;
  border:1px solid rgba(148,163,184,.34) !important;
  background:#fff !important;
  color:#0f172a !important;
  box-shadow:0 6px 16px rgba(15,23,42,.035) !important;
}

body:not(.modern-public-body) .btn{
  border-radius:14px !important;
  font-weight:850 !important;
}

/* 6. Transaksi/Tabungan: rapat, proporsional, tidak lebar kosong */
.simbay-transaksi-hero,
.simbay-tabungan-topbar{
  display:grid !important;
  grid-template-columns:minmax(260px,1fr) minmax(320px,430px) !important;
  align-items:center !important;
  gap:16px !important;
  margin:8px 0 16px !important;
  padding:16px 18px !important;
  min-height:118px !important;
  border-radius:26px !important;
  background:rgba(255,255,255,.88) !important;
  border:1px solid rgba(255,255,255,.82) !important;
  box-shadow:0 12px 30px rgba(15,23,42,.07) !important;
  overflow:hidden !important;
}

.simbay-transaksi-hero > [class*="col-"],
.simbay-tabungan-topbar > [class*="col-"],
.simbay-tabungan-actions-wrap,
.simbay-tabungan-saldo-wrap{
  float:none !important;
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
}

.simbay-tabungan-actions-wrap{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:12px !important;
}

.simbay-tabungan-actions-wrap .btn{
  min-height:42px !important;
  padding:10px 17px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
}

.simbay-tabungan-saldo-wrap{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
}

.simbay-saldo-live-card{
  width:100% !important;
  max-width:430px !important;
  min-width:0 !important;
  min-height:104px !important;
  padding:16px !important;
}

.simbay-saldo-live-icon{
  width:56px !important;
  height:56px !important;
  min-width:56px !important;
}

.simbay-saldo-live-text strong{
  font-size:18px !important;
}

/* 7. Riwayat transaksi/DataTables tidak lagi saling menjauh */
.simbay-tabungan-history-box{
  margin-top:4px !important;
  border-radius:24px !important;
}

.simbay-tabungan-history-box .box-header{
  padding:14px 18px !important;
}

.simbay-scroll-label{
  display:inline-flex !important;
  width:auto !important;
  max-width:100% !important;
  margin:10px 16px 0 !important;
  padding:8px 14px !important;
  border-radius:999px !important;
}

.simbay-tabungan-history-box .box-body,
.simbay-tabungan-history-box .dataTables_wrapper{
  padding:12px 16px 14px !important;
}

body:not(.modern-public-body) .dataTables_wrapper{
  width:100% !important;
  max-width:100% !important;
  overflow:visible !important;
  padding-bottom:8px !important;
}

body:not(.modern-public-body) .dataTables_wrapper > .row:first-child,
body:not(.modern-public-body) .dataTables_wrapper > .row:last-child{
  display:block !important;
  margin:0 0 10px !important;
}

body:not(.modern-public-body) .dataTables_wrapper > .row:first-child:before,
body:not(.modern-public-body) .dataTables_wrapper > .row:first-child:after,
body:not(.modern-public-body) .dataTables_wrapper > .row:last-child:before,
body:not(.modern-public-body) .dataTables_wrapper > .row:last-child:after{
  content:"" !important;
  display:table !important;
  clear:both !important;
}

body:not(.modern-public-body) .dataTables_wrapper .row > [class*="col-"]{
  margin-bottom:0 !important;
}

body:not(.modern-public-body) .dataTables_length{
  float:left !important;
  width:auto !important;
  text-align:left !important;
  margin:0 !important;
}

body:not(.modern-public-body) .dataTables_filter{
  float:right !important;
  width:auto !important;
  text-align:right !important;
  margin:0 !important;
}

body:not(.modern-public-body) .dataTables_length label,
body:not(.modern-public-body) .dataTables_filter label{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  margin:0 !important;
  font-weight:800 !important;
}

body:not(.modern-public-body) .dataTables_length select{
  width:auto !important;
  min-width:76px !important;
}

body:not(.modern-public-body) .dataTables_filter input{
  width:220px !important;
  min-width:220px !important;
  max-width:220px !important;
  margin-left:0 !important;
}

body:not(.modern-public-body) .dataTables_info{
  float:left !important;
  width:auto !important;
  padding-top:8px !important;
}

body:not(.modern-public-body) .dataTables_paginate{
  float:right !important;
  width:auto !important;
  padding-top:4px !important;
}

.simbay-tabungan-transaksi-scroll,
body:not(.modern-public-body) .table-responsive,
body:not(.modern-public-body) .simbay-table-scroll-x,
body:not(.modern-public-body) .simbay-mobile-table-scroll{
  width:100% !important;
  max-width:100% !important;
  overflow-x:auto !important;
  overflow-y:visible !important;
  -webkit-overflow-scrolling:touch !important;
}

.simbay-tabungan-transaksi-table{
  min-width:980px !important;
}

/* 8. Input tanggal native, tidak blur, tidak bentrok */
input.simbay-native-date,
input[type="date"].simbay-native-date,
.input-group input[type="date"]{
  display:block !important;
  width:100% !important;
  min-height:42px !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  cursor:pointer !important;
  -webkit-appearance:auto !important;
  appearance:auto !important;
}

body > .datepicker,
.datepicker-dropdown{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* 9. Modal/popup tidak blur */
body.modal-open:not(.modern-public-body) .wrapper,
body.modal-open:not(.modern-public-body) .content-wrapper,
body.modal-open:not(.modern-public-body) .right-side,
body.modal-open:not(.modern-public-body) .main-header,
body.modal-open:not(.modern-public-body) .main-sidebar,
body.modal-open:not(.modern-public-body) .left-side,
body.modal-open:not(.modern-public-body) .main-footer,
body.modal-open:not(.modern-public-body) .content{
  filter:none !important;
  -webkit-filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.modal,
.modal *,
.modal-dialog,
.modal-content,
.modal-header,
.modal-body,
.modal-footer{
  filter:none !important;
  -webkit-filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.modal-backdrop,
.modal-backdrop.in,
.modal-backdrop.show{
  background:rgba(15,23,42,.42) !important;
  opacity:1 !important;
  filter:none !important;
  -webkit-filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.modal-content{
  background:#fff !important;
}

/* 10. Responsif */
@media(max-width:991px){
  body:not(.modern-public-body) .main-sidebar,
  body:not(.modern-public-body) .left-side{
    transform:translate3d(-105%,0,0) !important;
    width:270px !important;
    max-width:86vw !important;
  }

  body.sidebar-open:not(.modern-public-body) .main-sidebar,
  body.sidebar-open:not(.modern-public-body) .left-side{
    transform:translate3d(0,0,0) !important;
  }

  body:not(.modern-public-body) .main-footer{
    margin-left:0 !important;
  }

  body:not(.modern-public-body) .content{
    padding:14px 12px 18px !important;
  }

  .simbay-transaksi-hero,
  .simbay-tabungan-topbar{
    grid-template-columns:1fr !important;
    min-height:auto !important;
    padding:14px !important;
  }

  .simbay-tabungan-saldo-wrap{
    justify-content:flex-start !important;
  }

  .simbay-saldo-live-card{
    max-width:none !important;
  }
}

@media(max-width:767px){
  body:not(.modern-public-body) .content-header{
    padding:12px 10px 0 !important;
  }

  body:not(.modern-public-body) .content{
    padding:12px 10px 16px !important;
  }

  body:not(.modern-public-body) .box,
  body:not(.modern-public-body) .panel,
  body:not(.modern-public-body) .nav-tabs-custom,
  body:not(.modern-public-body) .well{
    border-radius:18px !important;
    margin-bottom:14px !important;
  }

  body:not(.modern-public-body) .box-header,
  body:not(.modern-public-body) .panel-heading{
    padding:12px 14px !important;
    border-radius:18px 18px 0 0 !important;
  }

  body:not(.modern-public-body) .box-body,
  body:not(.modern-public-body) .panel-body,
  body:not(.modern-public-body) .tab-content{
    padding:12px !important;
  }

  body:not(.modern-public-body) .dataTables_length,
  body:not(.modern-public-body) .dataTables_filter,
  body:not(.modern-public-body) .dataTables_info,
  body:not(.modern-public-body) .dataTables_paginate{
    float:none !important;
    width:100% !important;
    text-align:left !important;
    margin-bottom:8px !important;
  }

  body:not(.modern-public-body) .dataTables_length label,
  body:not(.modern-public-body) .dataTables_filter label{
    display:block !important;
  }

  body:not(.modern-public-body) .dataTables_filter input{
    width:100% !important;
    min-width:100% !important;
    max-width:100% !important;
    margin-top:6px !important;
  }

  .simbay-tabungan-actions-wrap .btn{
    width:100% !important;
  }
}


/* =========================================================
   Fix v74: judul halaman didekatkan ke atas.
   Mengurangi jarak kosong besar antara topbar dan judul halaman.
   ========================================================= */
body:not(.modern-public-body) .content-wrapper,
body:not(.modern-public-body) .right-side{
  padding-top:0 !important;
}

body:not(.modern-public-body) .content-header{
  padding:8px 18px 0 !important;
  margin:0 !important;
  min-height:auto !important;
}

body:not(.modern-public-body) .content-header h1{
  margin:0 0 10px !important;
  padding:10px 16px !important;
  transform:none !important;
}

body:not(.modern-public-body) .content{
  padding-top:12px !important;
}

/* Jika halaman memakai jarak/hero bawaan, paksa lebih rapat */
body:not(.modern-public-body) .content-header + .content,
body:not(.modern-public-body) .content-wrapper > .content{
  margin-top:0 !important;
}

body:not(.modern-public-body) .modern-dashboard-shell,
body:not(.modern-public-body) .simbay-page-shell,
body:not(.modern-public-body) .modern-page-shell{
  margin-top:0 !important;
}

/* Khusus halaman pembayaran/transaksi yang terlihat terlalu turun */
body:not(.modern-public-body) .content-header + section.content,
body:not(.modern-public-body) section.content{
  padding-top:12px !important;
}

@media(max-width:767px){
  body:not(.modern-public-body) .content-header{
    padding:7px 10px 0 !important;
  }
  body:not(.modern-public-body) .content{
    padding-top:10px !important;
  }
}


/* =========================================================
   Fix v75: judul benar-benar mepet ke topbar dan topbar
   tetap diam saat halaman digeser/scroll.
   ========================================================= */

/* Topbar dibuat fixed agar tidak ikut scroll */
body:not(.modern-public-body) .main-header{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  height:58px !important;
  min-height:58px !important;
  z-index:1050 !important;
}

/* Beri ruang 58px untuk topbar fixed, tanpa jarak kosong tambahan */
body:not(.modern-public-body) .wrapper{
  padding-top:58px !important;
}

/* Sidebar mulai tepat di bawah topbar dan tetap diam */
body:not(.modern-public-body) .main-sidebar,
body:not(.modern-public-body) .left-side{
  position:fixed !important;
  top:58px !important;
  left:0 !important;
  bottom:0 !important;
  height:calc(100vh - 58px) !important;
  max-height:calc(100vh - 58px) !important;
  padding-top:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  z-index:1040 !important;
}

/* Konten langsung naik tepat di bawah topbar */
body:not(.modern-public-body) .content-wrapper,
body:not(.modern-public-body) .right-side{
  margin-top:0 !important;
  padding-top:0 !important;
  top:auto !important;
}

/* Judul halaman ditempelkan mendekati topbar */
body:not(.modern-public-body) .content-header{
  padding:4px 18px 0 !important;
  margin:0 !important;
  min-height:0 !important;
  line-height:1 !important;
}

body:not(.modern-public-body) .content-header h1{
  margin:0 0 6px !important;
  padding:9px 16px !important;
  line-height:1.2 !important;
}

/* Konten setelah judul jangan turun terlalu jauh */
body:not(.modern-public-body) .content{
  padding-top:6px !important;
}

body:not(.modern-public-body) .content-header + .content,
body:not(.modern-public-body) .content-wrapper > .content,
body:not(.modern-public-body) section.content{
  margin-top:0 !important;
  padding-top:6px !important;
}

/* Kurangi jarak box pertama agar dekat dengan judul */
body:not(.modern-public-body) .content > .box:first-child,
body:not(.modern-public-body) .content > .row:first-child,
body:not(.modern-public-body) .content > .simbay-tabungan-topbar:first-child,
body:not(.modern-public-body) .content > .simbay-transaksi-hero:first-child{
  margin-top:0 !important;
}

/* Saat sidebar collapse, posisi tetap aman */
body.sidebar-collapse:not(.modern-public-body) .main-sidebar,
body.sidebar-collapse:not(.modern-public-body) .left-side{
  top:58px !important;
}

/* Mobile/tablet: topbar tetap fixed dan judul tetap mepet */
@media(max-width:991px){
  body:not(.modern-public-body) .main-header{
    position:fixed !important;
    top:0 !important;
  }

  body:not(.modern-public-body) .wrapper{
    padding-top:58px !important;
  }

  body:not(.modern-public-body) .main-sidebar,
  body:not(.modern-public-body) .left-side{
    top:58px !important;
    height:calc(100vh - 58px) !important;
    max-height:calc(100vh - 58px) !important;
  }

  body:not(.modern-public-body) .content-header{
    padding:4px 12px 0 !important;
  }

  body:not(.modern-public-body) .content{
    padding-top:6px !important;
  }
}

@media(max-width:767px){
  body:not(.modern-public-body) .content-header{
    padding:3px 10px 0 !important;
  }

  body:not(.modern-public-body) .content-header h1{
    margin-bottom:5px !important;
    padding:8px 13px !important;
  }

  body:not(.modern-public-body) .content{
    padding-top:5px !important;
  }
}


/* =========================================================
   Fix v76: popup transaksi tabungan tidak blur dan hasil
   pencarian nama siswa tampil paling depan di atas modal.
   ========================================================= */
body.modal-open .wrapper,
body.modal-open .content-wrapper,
body.modal-open .right-side,
body.modal-open .main-header,
body.modal-open .main-sidebar,
body.modal-open .left-side,
body.modal-open .main-footer,
body.modal-open .content,
body.modal-open .box,
body.modal-open .box-body,
body.modal-open .modal,
body.modal-open .modal-dialog,
body.modal-open .modal-content,
body.modal-open .modal-header,
body.modal-open .modal-body,
body.modal-open .modal-footer{
  filter:none !important;
  -webkit-filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  transform:none !important;
}

body.modal-open .modal-backdrop,
body.modal-open .modal-backdrop.in,
body.modal-open .modal-backdrop.show,
.modal-backdrop,
.modal-backdrop.in,
.modal-backdrop.show{
  background:rgba(15,23,42,.34) !important;
  opacity:1 !important;
  filter:none !important;
  -webkit-filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  z-index:2147482500 !important;
}

.modal,
.modal.in,
.modal.show,
.simbay-transaksi-modal,
.simbay-cicilan-modal{
  z-index:2147483000 !important;
}

.simbay-transaksi-modal .modal-content,
.simbay-transaksi-modal .modal-header,
.simbay-transaksi-modal .modal-body,
.simbay-transaksi-modal .modal-footer,
.simbay-cicilan-modal .modal-content,
.simbay-cicilan-modal .modal-header,
.simbay-cicilan-modal .modal-body,
.simbay-cicilan-modal .modal-footer{
  filter:none !important;
  -webkit-filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  background-image:none !important;
}

body > .simbay-modal-student-portal{
  z-index:2147483600 !important;
  background:#ffffff !important;
  opacity:1 !important;
  visibility:visible !important;
  filter:none !important;
  -webkit-filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:0 22px 70px rgba(15,23,42,.28) !important;
}
body > .simbay-modal-student-portal.is-open{
  display:block !important;
}
body > .simbay-modal-student-portal .simbay-portal-item{
  position:relative !important;
  z-index:1 !important;
}

.modal .simbay-payment-style-picker,
.modal .simbay-modal-student-picker-wrap,
.modal .modern-student-search-field{
  position:relative !important;
  overflow:visible !important;
  z-index:2147483200 !important;
}
.modal .simbay-payment-style-picker .simbay-modal-student-input,
.modal .simbay-modal-student-input{
  position:relative !important;
  z-index:2147483201 !important;
}
.modal .simbay-payment-style-picker .simbay-modal-student-results,
.modal .simbay-modal-student-results,
.modal .modern-student-autocomplete{
  z-index:2147483202 !important;
  background:#ffffff !important;
  filter:none !important;
  -webkit-filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* cegah teks/panel belakang menembus popup */
.modal .box,
.modal .row,
.modal .col-sm-12,
.modal .form-group{
  overflow:visible !important;
}


/* =========================================================
   Fix v77: popup setoran & penarikan lebih hidup berwarna
   ========================================================= */
.simbay-transaksi-modal .modal-dialog{
  width:min(760px,92vw) !important;
  margin:48px auto !important;
}
.simbay-transaksi-modal .modal-content{
  overflow:hidden !important;
  border:none !important;
  border-radius:26px !important;
  background:#ffffff !important;
  box-shadow:0 30px 90px rgba(15,23,42,.28) !important;
}
.simbay-transaksi-modal .modal-header{
  min-height:96px !important;
  padding:22px 26px !important;
  border-bottom:none !important;
  color:#fff !important;
  display:flex !important;
  align-items:center !important;
  position:relative !important;
}
.simbay-transaksi-modal .modal-header:before{
  content:'';
  position:absolute;
  right:-26px;
  top:-20px;
  width:140px;
  height:140px;
  border-radius:50%;
  background:rgba(255,255,255,.14);
}
.simbay-setor-modal .modal-header{
  background:linear-gradient(135deg,#16a34a 0%,#22c55e 52%,#34d399 100%) !important;
}
.simbay-tarik-modal .modal-header{
  background:linear-gradient(135deg,#f97316 0%,#fb923c 48%,#f59e0b 100%) !important;
}
.simbay-transaksi-modal .modal-title{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  margin:0 !important;
  font-size:38px !important;
  font-weight:800 !important;
  letter-spacing:.2px !important;
  color:#ffffff !important;
  position:relative !important;
  z-index:1 !important;
}
.simbay-transaksi-modal .modal-title i{
  width:54px;
  height:54px;
  border-radius:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  background:rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
.simbay-transaksi-modal .close{
  position:absolute !important;
  right:18px !important;
  top:18px !important;
  width:52px !important;
  height:52px !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.2) !important;
  color:#fff !important;
  opacity:1 !important;
  font-size:34px !important;
  line-height:1 !important;
  text-shadow:none !important;
  z-index:2 !important;
}
.simbay-transaksi-modal .close:hover{
  background:rgba(255,255,255,.28) !important;
}
.simbay-transaksi-modal .modal-body{
  padding:28px 30px 26px !important;
  background:#ffffff !important;
}
.simbay-transaksi-modal .simbay-modal-label{
  font-size:21px !important;
  font-weight:800 !important;
  color:#1f2937 !important;
  margin-bottom:12px !important;
  padding:0 !important;
}
.simbay-transaksi-modal .simbay-modal-student-picker-wrap{
  background:#f8fbff !important;
  border:2px solid #dbe7ff !important;
  border-radius:24px !important;
  padding:8px !important;
  box-shadow:none !important;
}
.simbay-transaksi-modal .simbay-modal-student-picker-wrap > .fa-search{
  left:22px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  color:#2563eb !important;
  font-size:20px !important;
}
.simbay-transaksi-modal .simbay-modal-student-input{
  height:90px !important;
  border-radius:20px !important;
  border:2px solid #2563eb !important;
  padding:0 26px 0 72px !important;
  font-size:23px !important;
  font-weight:700 !important;
  color:#1f2937 !important;
  box-shadow:0 0 0 8px rgba(37,99,235,.08) !important;
  background:#ffffff !important;
}
.simbay-transaksi-modal .simbay-modal-student-input::placeholder{
  color:#8a94a7 !important;
  font-weight:700 !important;
}
.simbay-transaksi-modal .simbay-modal-action-btn{
  min-width:280px !important;
  height:78px !important;
  border:none !important;
  border-radius:22px !important;
  font-size:22px !important;
  font-weight:800 !important;
  color:#fff !important;
  box-shadow:0 16px 30px rgba(15,23,42,.14) !important;
  margin-top:18px !important;
}
.simbay-transaksi-modal .simbay-setor-action{
  background:linear-gradient(135deg,#16a34a 0%,#22c55e 100%) !important;
}
.simbay-transaksi-modal .simbay-tarik-action{
  background:linear-gradient(135deg,#f97316 0%,#f59e0b 100%) !important;
}
.simbay-transaksi-modal .simbay-modal-student-hint{
  margin-top:20px !important;
  padding:18px 22px !important;
  border-radius:20px !important;
  background:#f4f7ff !important;
  border:1px solid #d7e3ff !important;
  color:#4b5563 !important;
  font-size:18px !important;
  font-weight:600 !important;
}
@media (max-width: 767px){
  .simbay-transaksi-modal .modal-dialog{ width:94vw !important; margin:18px auto !important;}
  .simbay-transaksi-modal .modal-header{ min-height:84px !important; padding:18px 20px !important;}
  .simbay-transaksi-modal .modal-title{ font-size:28px !important; gap:10px !important;}
  .simbay-transaksi-modal .modal-title i{ width:42px; height:42px; font-size:18px; border-radius:14px;}
  .simbay-transaksi-modal .close{ width:44px !important; height:44px !important; font-size:28px !important; right:14px !important; top:14px !important;}
  .simbay-transaksi-modal .modal-body{ padding:22px 20px 22px !important;}
  .simbay-transaksi-modal .simbay-modal-label{ font-size:18px !important;}
  .simbay-transaksi-modal .simbay-modal-student-input{ height:74px !important; font-size:19px !important; padding-left:62px !important;}
  .simbay-transaksi-modal .simbay-modal-action-btn{ width:100% !important; min-width:0 !important; height:66px !important; font-size:19px !important;}
}


/* =========================================================
   Fix v78: ikon dashboard dibuat lebih 3D dan hidup
   ========================================================= */
.modern-stat-icon{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.34);
  box-shadow:
    0 18px 34px rgba(37,99,235,.22),
    inset 0 2px 0 rgba(255,255,255,.28),
    inset 0 -10px 18px rgba(0,0,0,.10) !important;
  transform:translateZ(0);
}
.modern-stat-icon:before{
  content:'';
  position:absolute;
  inset:7px 10px auto 10px;
  height:18px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,0));
  pointer-events:none;
}
.modern-stat-icon:after{
  content:'';
  position:absolute;
  right:-10px;
  bottom:-10px;
  width:34px;
  height:34px;
  border-radius:50%;
  background:rgba(255,255,255,.10);
  filter:blur(1px);
  pointer-events:none;
}
.modern-stat-icon i{
  position:relative;
  z-index:1;
  text-shadow:0 2px 0 rgba(0,0,0,.12), 0 10px 18px rgba(0,0,0,.18);
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.12));
}
.modern-stat-card:hover .modern-stat-icon{
  transform:translateY(-2px) scale(1.03);
  box-shadow:
    0 22px 42px rgba(15,23,42,.22),
    inset 0 2px 0 rgba(255,255,255,.32),
    inset 0 -12px 20px rgba(0,0,0,.12) !important;
}
.modern-stat-card.stat-blue .modern-stat-icon{background:linear-gradient(145deg,#3b82f6 0%,#1d4ed8 58%,#06b6d4 100%) !important;}
.modern-stat-card.stat-red .modern-stat-icon{background:linear-gradient(145deg,#fb7185 0%,#ef4444 52%,#e11d48 100%) !important;}
.modern-stat-card.stat-green .modern-stat-icon{background:linear-gradient(145deg,#22c55e 0%,#16a34a 52%,#10b981 100%) !important;}
.modern-stat-card.stat-orange .modern-stat-icon{background:linear-gradient(145deg,#fbbf24 0%,#f59e0b 45%,#f97316 100%) !important;}
.modern-stat-card.stat-purple .modern-stat-icon{background:linear-gradient(145deg,#8b5cf6 0%,#4f46e5 55%,#2563eb 100%) !important;}


/* =========================================================
   Fix v80: GLOBAL PRESISI
   Mengatasi tampilan semua halaman yang terlihat numpuk,
   terlalu kosong, terlalu tinggi, dan elemen bawah menutupi isi.
   ========================================================= */

/* Struktur dasar halaman dibuat normal dan presisi */
html,
body{
  max-width:100% !important;
  overflow-x:hidden !important;
}

body:not(.modern-public-body){
  min-height:100vh !important;
  height:auto !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  background:#eef6ff !important;
}

body:not(.modern-public-body) .wrapper{
  min-height:100vh !important;
  height:auto !important;
  overflow:visible !important;
}

/* Topbar tetap diam, tetapi konten tidak diberi jarak besar */
body:not(.modern-public-body) .main-header{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  height:58px !important;
  z-index:1045 !important;
}

body:not(.modern-public-body) .wrapper{
  padding-top:58px !important;
}

/* Sidebar stabil */
body:not(.modern-public-body) .main-sidebar,
body:not(.modern-public-body) .left-side{
  position:fixed !important;
  top:58px !important;
  bottom:0 !important;
  height:calc(100vh - 58px) !important;
  max-height:calc(100vh - 58px) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}

/* Konten tidak dibuat fixed/terkunci agar semua halaman mengalir normal */
body:not(.modern-public-body) .content-wrapper,
body:not(.modern-public-body) .right-side{
  position:relative !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  height:auto !important;
  min-height:calc(100vh - 58px) !important;
  max-height:none !important;
  overflow:visible !important;
  padding:0 !important;
  margin-top:0 !important;
}

/* Konten utama: rapat, tidak terlalu kosong, dan aman dari floating PWA */
body:not(.modern-public-body) .content{
  position:relative !important;
  height:auto !important;
  min-height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  padding:12px 16px 96px !important;
}

/* Header judul halaman rapat */
body:not(.modern-public-body) .content-header{
  padding:6px 16px 0 !important;
  margin:0 !important;
  min-height:auto !important;
}

body:not(.modern-public-body) .content-header h1{
  margin:0 0 8px !important;
  padding:8px 14px !important;
  font-size:21px !important;
  line-height:1.25 !important;
}

/* Hilangkan jarak kosong raksasa dari semua panel/kartu */
body:not(.modern-public-body) .box,
body:not(.modern-public-body) .panel,
body:not(.modern-public-body) .nav-tabs-custom,
body:not(.modern-public-body) .well,
body:not(.modern-public-body) .x_panel,
body:not(.modern-public-body) .modern-dashboard-shell,
body:not(.modern-public-body) .modern-chart-card,
body:not(.modern-public-body) .modern-stat-card,
body:not(.modern-public-body) .simbay-tabungan-history-box,
body:not(.modern-public-body) .simbay-payment-filter-box{
  height:auto !important;
  min-height:auto !important;
  max-height:none !important;
  margin-bottom:14px !important;
  overflow:visible !important;
}

/* Jika ada box kosong, jangan dipaksa tinggi */
body:not(.modern-public-body) .box-body:empty,
body:not(.modern-public-body) .panel-body:empty,
body:not(.modern-public-body) .well:empty{
  display:none !important;
}

/* Isi box lebih presisi */
body:not(.modern-public-body) .box-body,
body:not(.modern-public-body) .panel-body,
body:not(.modern-public-body) .tab-content,
body:not(.modern-public-body) .x_content{
  height:auto !important;
  min-height:auto !important;
  max-height:none !important;
  padding:12px 14px !important;
  overflow:visible !important;
}

/* Header box tidak terlalu tinggi */
body:not(.modern-public-body) .box-header,
body:not(.modern-public-body) .panel-heading,
body:not(.modern-public-body) .x_title,
body:not(.modern-public-body) .box.box-solid > .box-header{
  min-height:48px !important;
  padding:12px 16px !important;
}

/* Row/column spacing seragam */
body:not(.modern-public-body) .row{
  margin-left:-7px !important;
  margin-right:-7px !important;
}

body:not(.modern-public-body) .row > [class*="col-"]{
  padding-left:7px !important;
  padding-right:7px !important;
  margin-bottom:14px !important;
}

/* Form lebih rapat */
body:not(.modern-public-body) .form-group{
  margin-bottom:12px !important;
}

body:not(.modern-public-body) .form-control,
body:not(.modern-public-body) select.form-control,
body:not(.modern-public-body) textarea.form-control{
  min-height:40px !important;
}

/* Tabel/DataTables tidak menumpuk dan tidak membuat ruang kosong besar */
body:not(.modern-public-body) .table-responsive,
body:not(.modern-public-body) .dataTables_wrapper,
body:not(.modern-public-body) .dataTables_scroll,
body:not(.modern-public-body) .dataTables_scrollBody{
  height:auto !important;
  min-height:auto !important;
  max-height:none !important;
  overflow-x:auto !important;
  overflow-y:visible !important;
  padding-bottom:8px !important;
}

body:not(.modern-public-body) .dataTables_wrapper > .row:first-child,
body:not(.modern-public-body) .dataTables_wrapper > .row:last-child{
  margin:0 0 10px !important;
  padding:0 !important;
}

body:not(.modern-public-body) table.table{
  margin-bottom:8px !important;
}

/* Dashboard: kartu tidak terlalu tinggi, grid tetap rapi */
body.modern-dashboard-view .content{
  padding-top:10px !important;
}

body.modern-dashboard-view .modern-dashboard-shell{
  margin-top:0 !important;
  margin-bottom:14px !important;
}

body.modern-dashboard-view .modern-dashboard-hero{
  margin-bottom:14px !important;
  min-height:auto !important;
}

body.modern-dashboard-view .modern-dashboard-grid{
  gap:14px !important;
}

body.modern-dashboard-view .modern-stat-card{
  min-height:106px !important;
  padding:16px !important;
}

body.modern-dashboard-view .modern-chart-card{
  min-height:auto !important;
  padding:14px 16px !important;
}

/* Area transaksi/tabungan: tidak terlalu besar dan tidak kosong */
.simbay-transaksi-hero,
.simbay-tabungan-topbar{
  min-height:112px !important;
  margin:8px 0 14px !important;
  padding:15px 18px !important;
  gap:14px !important;
}

.simbay-tabungan-history-box{
  margin-top:0 !important;
}

.simbay-tabungan-history-box .box-body,
.simbay-tabungan-history-box .dataTables_wrapper{
  padding:10px 14px 12px !important;
}

/* PWA install card jangan menutupi isi halaman */
.simbay-install-card,
.simbay-pwa-install,
#simbayInstallPrompt,
#simbayInstallBanner,
.install-app-card,
.install-prompt,
.pwa-install-card{
  z-index:1020 !important;
  max-width:min(410px, calc(100vw - 28px)) !important;
  bottom:18px !important;
  right:18px !important;
}

/* Tambahkan ruang bawah khusus jika banner install tampil */
body:not(.modern-public-body) .content-wrapper,
body:not(.modern-public-body) .right-side{
  padding-bottom:96px !important;
}

/* Footer jangan ikut menumpuk */
body:not(.modern-public-body) .main-footer{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  height:auto !important;
  min-height:50px !important;
  margin-top:8px !important;
  padding:8px 14px !important;
  z-index:20 !important;
}

/* Modal tetap di depan tanpa blur */
.modal,
.modal.in,
.modal.show{
  z-index:2147483000 !important;
}

.modal-backdrop,
.modal-backdrop.in,
.modal-backdrop.show{
  z-index:2147482500 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

body.modal-open .wrapper,
body.modal-open .content-wrapper,
body.modal-open .right-side,
body.modal-open .main-header,
body.modal-open .main-sidebar,
body.modal-open .main-footer,
body.modal-open .content{
  filter:none !important;
  -webkit-filter:none !important;
}

/* Responsif */
@media(max-width:991px){
  body:not(.modern-public-body) .content{
    padding:10px 12px 110px !important;
  }

  body:not(.modern-public-body) .content-header{
    padding:5px 12px 0 !important;
  }

  body:not(.modern-public-body) .main-footer{
    margin-left:0 !important;
  }
}

@media(max-width:767px){
  body:not(.modern-public-body) .content{
    padding:8px 10px 118px !important;
  }

  body:not(.modern-public-body) .content-header{
    padding:4px 10px 0 !important;
  }

  body:not(.modern-public-body) .row > [class*="col-"]{
    margin-bottom:10px !important;
  }

  body:not(.modern-public-body) .box,
  body:not(.modern-public-body) .panel,
  body:not(.modern-public-body) .well,
  body:not(.modern-public-body) .nav-tabs-custom{
    margin-bottom:12px !important;
    border-radius:18px !important;
  }

  .simbay-install-card,
  .simbay-pwa-install,
  #simbayInstallPrompt,
  #simbayInstallBanner,
  .install-app-card,
  .install-prompt,
  .pwa-install-card{
    left:12px !important;
    right:12px !important;
    bottom:12px !important;
    max-width:none !important;
  }
}



/* =========================================================
   Fix v81: HALAMAN PENGATURAN LEBIH RAPI & PRESISI
   ========================================================= */

/* area pengaturan tidak terlalu mepet dan tidak tertutup widget install */
body:not(.modern-public-body) .content{
  padding-bottom:130px !important;
}

/* layout 2 kolom untuk halaman pengaturan agar proporsional */
.simbay-settings-grid,
.modern-settings-grid,
.settings-grid{
  display:grid !important;
  grid-template-columns:1.8fr 0.9fr !important;
  gap:18px !important;
  align-items:start !important;
}

@media (max-width: 1199px){
  .simbay-settings-grid,
  .modern-settings-grid,
  .settings-grid{
    grid-template-columns:1fr !important;
  }
}

/* box utama halaman pengaturan */
.simbay-settings-card,
.modern-settings-card,
.settings-card,
.box.box-primary,
.box.box-info{
  border-radius:22px !important;
  overflow:hidden !important;
  box-shadow:0 14px 34px rgba(30,64,175,.08) !important;
}

.box.box-primary > .box-header,
.box.box-info > .box-header,
.simbay-settings-card > .box-header,
.modern-settings-card > .box-header,
.settings-card > .box-header{
  padding:16px 20px !important;
}

.box.box-primary > .box-body,
.box.box-info > .box-body,
.simbay-settings-card > .box-body,
.modern-settings-card > .box-body,
.settings-card > .box-body{
  padding:18px 18px 20px !important;
}

/* kelompok form pengaturan */
.settings-form .row > [class*="col-"],
.simbay-settings-form .row > [class*="col-"],
.modern-settings-form .row > [class*="col-"]{
  margin-bottom:8px !important;
}

.settings-form .form-group,
.simbay-settings-form .form-group,
.modern-settings-form .form-group{
  margin-bottom:14px !important;
}

.settings-form label,
.simbay-settings-form label,
.modern-settings-form label,
.box-body label{
  display:block !important;
  margin-bottom:8px !important;
  font-weight:700 !important;
  font-size:15px !important;
  color:#334155 !important;
}

/* input pengaturan */
.settings-form .form-control,
.simbay-settings-form .form-control,
.modern-settings-form .form-control,
.box-body .form-control{
  min-height:48px !important;
  border-radius:18px !important;
  padding:12px 16px !important;
  border:1.5px solid #dbe4f0 !important;
  box-shadow:none !important;
  background:#fff !important;
  font-size:15px !important;
}

.settings-form textarea.form-control,
.simbay-settings-form textarea.form-control,
.modern-settings-form textarea.form-control,
.box-body textarea.form-control{
  min-height:96px !important;
  resize:vertical !important;
}

.settings-form .form-control:focus,
.simbay-settings-form .form-control:focus,
.modern-settings-form .form-control:focus,
.box-body .form-control:focus{
  border-color:#38bdf8 !important;
  box-shadow:0 0 0 4px rgba(56,189,248,.12) !important;
}

/* file input dibuat lebih rapi */
input[type="file"].form-control,
.box-body input[type="file"]{
  min-height:50px !important;
  padding:10px 14px !important;
  background:#f8fbff !important;
}

/* section logo preview di kanan */
.settings-logo-panel,
.simbay-logo-panel,
.modern-logo-panel{
  display:flex !important;
  flex-direction:column !important;
  gap:18px !important;
}

.settings-logo-preview,
.simbay-logo-preview,
.modern-logo-preview{
  background:#fff !important;
  border:1.5px solid #e4edf7 !important;
  border-radius:20px !important;
  padding:14px !important;
  box-shadow:0 10px 24px rgba(15,23,42,.05) !important;
  min-height:260px !important;
}

.settings-logo-preview img,
.simbay-logo-preview img,
.modern-logo-preview img,
.box-body img{
  max-width:100% !important;
  height:auto !important;
  display:block !important;
  margin:0 auto !important;
  object-fit:contain !important;
}

/* tabel / list kecil di pengaturan */
.settings-table,
.box-body table{
  border-radius:16px !important;
  overflow:hidden !important;
}

/* tombol simpan */
.settings-actions,
.simbay-settings-actions,
.modern-settings-actions{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  align-items:center !important;
  margin-top:8px !important;
}

.settings-actions .btn,
.simbay-settings-actions .btn,
.modern-settings-actions .btn,
.box-body .btn{
  min-height:44px !important;
  border-radius:16px !important;
  padding:10px 18px !important;
}

/* widget install diperkecil agar tidak terlalu menutup halaman pengaturan */
.simbay-install-card,
.simbay-pwa-install,
#simbayInstallPrompt,
#simbayInstallBanner,
.install-app-card,
.install-prompt,
.pwa-install-card{
  right:14px !important;
  bottom:14px !important;
  transform:scale(.94) !important;
  transform-origin:right bottom !important;
}

/* jika halaman lebar, isi pengaturan kanan-kiri diberi proporsi lebih pas */
@media (min-width: 1200px){
  .box-body .row{
    display:flex;
    flex-wrap:wrap;
  }
  .box-body .row > [class*="col-md-6"],
  .box-body .row > [class*="col-lg-6"]{
    width:50% !important;
    flex:0 0 50% !important;
  }
  .box-body .row > [class*="col-md-4"],
  .box-body .row > [class*="col-lg-4"]{
    width:33.3333% !important;
    flex:0 0 33.3333% !important;
  }
}

/* mobile */
@media (max-width: 767px){
  .box.box-primary > .box-body,
  .box.box-info > .box-body,
  .simbay-settings-card > .box-body,
  .modern-settings-card > .box-body,
  .settings-card > .box-body{
    padding:14px !important;
  }

  .box-body .row > [class*="col-"]{
    width:100% !important;
    flex:0 0 100% !important;
  }

  .settings-form .form-control,
  .simbay-settings-form .form-control,
  .modern-settings-form .form-control,
  .box-body .form-control{
    min-height:46px !important;
    font-size:14px !important;
  }
}



/* =========================================================
   Fix v82: TRANSAKSI TABUNGAN LEBIH PRESISI & TANPA GANGGUAN
   ========================================================= */

/* Desktop admin: sembunyikan prompt install agar tidak mengganggu area kerja */
@media (min-width: 992px){
  body:not(.modern-public-body) #simbayInstallPrompt,
  body:not(.modern-public-body) .simbay-install-card,
  body:not(.modern-public-body) .simbay-pwa-install,
  body:not(.modern-public-body) #simbayInstallBanner,
  body:not(.modern-public-body) .install-app-card,
  body:not(.modern-public-body) .install-prompt,
  body:not(.modern-public-body) .pwa-install-card{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
}

/* Ruang bawah area kerja kembali normal */
body:not(.modern-public-body) .content-wrapper,
body:not(.modern-public-body) .right-side{
  padding-bottom:24px !important;
}

/* Khusus halaman transaksi tabungan */
.simbay-tabungan-topbar,
.simbay-transaksi-hero{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  flex-wrap:wrap !important;
  gap:16px !important;
  min-height:auto !important;
  padding:18px 20px !important;
  margin:8px 0 16px !important;
}

.simbay-tabungan-actions-wrap{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:12px !important;
  align-items:center !important;
}

.simbay-tabungan-actions-wrap .btn{
  min-height:46px !important;
  padding:11px 18px !important;
  border-radius:16px !important;
  font-weight:800 !important;
}

.simbay-tabungan-saldo-wrap{
  margin:0 !important;
}

.simbay-tabungan-history-box{
  margin-top:4px !important;
  margin-bottom:18px !important;
}

.simbay-tabungan-history-box .box-header{
  padding:14px 18px !important;
}

.simbay-tabungan-history-box .box-title{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}

.simbay-tabungan-history-box .box-title:before{
  content:"\f0ce";
  font-family:FontAwesome;
  font-weight:normal;
}

.simbay-tabungan-history-box .box-body,
.simbay-tabungan-history-box .dataTables_wrapper,
.simbay-tabungan-transaksi-scroll{
  padding-bottom:12px !important;
  margin-bottom:0 !important;
}

/* Hilangkan area kosong terlalu besar di bawah tabel */
@media (min-width: 992px){
  .simbay-tabungan-history-box .dataTables_wrapper,
  .simbay-tabungan-history-box .table-responsive,
  .simbay-tabungan-transaksi-scroll{
    padding-bottom:10px !important;
  }
}

/* Baris DataTables bagian atas lebih rapi */
.simbay-tabungan-history-box .dataTables_wrapper > .row:first-child{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
  margin:0 0 10px !important;
}

.simbay-tabungan-history-box .dataTables_wrapper > .row:first-child > div{
  float:none !important;
}

.simbay-tabungan-history-box .dataTables_length,
.simbay-tabungan-history-box .dataTables_filter{
  margin:0 !important;
}

/* Baris bawah info + pagination */
.simbay-tabungan-history-box .dataTables_wrapper > .row:last-child{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
  margin-top:12px !important;
  padding-top:8px !important;
  border-top:1px solid rgba(226,232,240,.9) !important;
}

.simbay-tabungan-history-box .dataTables_wrapper > .row:last-child > div{
  float:none !important;
}

.simbay-tabungan-history-box .dataTables_info{
  padding-top:0 !important;
  margin-top:0 !important;
  white-space:normal !important;
}

.simbay-tabungan-history-box .dataTables_paginate{
  padding-top:0 !important;
  margin-top:0 !important;
  text-align:right !important;
}

.simbay-tabungan-history-box .pagination{
  margin:0 !important;
}

/* Tabel lebih rapat dan tidak tampak bertumpuk */
.simbay-tabungan-transaksi-table{
  margin-bottom:0 !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
}

.simbay-tabungan-transaksi-table tbody tr{
  box-shadow:none !important;
}

.simbay-tabungan-transaksi-table td,
.simbay-tabungan-transaksi-table th{
  line-height:1.35 !important;
}

/* Modal popup transaksi tetap tajam dan berada di depan */
.simbay-transaksi-modal,
.simbay-transaksi-modal.modal,
.simbay-transaksi-modal.fade,
.simbay-transaksi-modal.in{
  z-index:2147483500 !important;
}

.simbay-transaksi-modal + .modal-backdrop,
.modal-backdrop.in{
  z-index:2147483400 !important;
  opacity:.45 !important;
  filter:none !important;
  -webkit-filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

body.modal-open .content-wrapper,
body.modal-open .right-side,
body.modal-open .main-header,
body.modal-open .main-sidebar,
body.modal-open .main-footer,
body.modal-open .content{
  filter:none !important;
  -webkit-filter:none !important;
}

/* Responsif */
@media (max-width: 991px){
  .simbay-tabungan-history-box .dataTables_wrapper > .row:first-child,
  .simbay-tabungan-history-box .dataTables_wrapper > .row:last-child{
    display:block !important;
  }

  .simbay-tabungan-history-box .dataTables_paginate{
    text-align:left !important;
    margin-top:10px !important;
  }

  .simbay-tabungan-history-box .dataTables_info{
    margin-bottom:8px !important;
  }

  body:not(.modern-public-body) .content-wrapper,
  body:not(.modern-public-body) .right-side{
    padding-bottom:110px !important;
  }
}



/* =========================================================
   Fix v83: HALAMAN PENGATURAN LABEL TIDAK RATA KANAN
   ========================================================= */

/* Khusus form pengaturan: override bootstrap form-horizontal */
.simbay-settings-form form.form-horizontal .control-label,
.simbay-settings-form .control-label,
.simbay-settings-form label,
.settings-form form.form-horizontal .control-label,
.settings-form .control-label,
.settings-form label,
.modern-settings-form form.form-horizontal .control-label,
.modern-settings-form .control-label,
.modern-settings-form label{
  width:100% !important;
  float:none !important;
  display:block !important;
  text-align:left !important;
  padding-left:0 !important;
  padding-right:0 !important;
  margin-left:0 !important;
  margin-right:0 !important;
  margin-bottom:8px !important;
  line-height:1.35 !important;
}

/* Pastikan semua kolom form pengaturan rata kiri */
.simbay-settings-form .col-sm-6,
.simbay-settings-form .col-sm-4,
.simbay-settings-form .col-sm-12,
.settings-form .col-sm-6,
.settings-form .col-sm-4,
.settings-form .col-sm-12,
.modern-settings-form .col-sm-6,
.modern-settings-form .col-sm-4,
.modern-settings-form .col-sm-12{
  text-align:left !important;
}

/* Input dan select mengikuti lebar kolom dengan rapi */
.simbay-settings-form .form-control,
.settings-form .form-control,
.modern-settings-form .form-control{
  width:100% !important;
}

/* Box footer pengaturan lebih presisi */
.simbay-settings-form .box-footer,
.settings-form .box-footer,
.modern-settings-form .box-footer{
  clear:both !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  margin-top:16px !important;
  padding:14px 0 0 !important;
  border-top:1px solid rgba(226,232,240,.95) !important;
  background:transparent !important;
}

.simbay-settings-form .box-footer .btn,
.settings-form .box-footer .btn,
.modern-settings-form .box-footer .btn{
  min-width:138px !important;
  border-radius:16px !important;
  font-weight:800 !important;
}

.simbay-settings-form .box-footer .pull-left,
.simbay-settings-form .box-footer .pull-right,
.settings-form .box-footer .pull-left,
.settings-form .box-footer .pull-right,
.modern-settings-form .box-footer .pull-left,
.modern-settings-form .box-footer .pull-right{
  float:none !important;
}

/* Tabel preview logo kanan tidak terlalu mepet */
.box.box-warning .table.table-bordered{
  margin-bottom:0 !important;
}

.box.box-warning .table.table-bordered td,
.box.box-warning .table.table-bordered th{
  text-align:center !important;
  vertical-align:middle !important;
}

@media (max-width: 767px){
  .simbay-settings-form .box-footer,
  .settings-form .box-footer,
  .modern-settings-form .box-footer{
    flex-direction:column !important;
    align-items:stretch !important;
  }

  .simbay-settings-form .box-footer .btn,
  .settings-form .box-footer .btn,
  .modern-settings-form .box-footer .btn{
    width:100% !important;
  }
}


/* =========================================================
   Fix v84: halaman pembayaran dibuat lebih elegan, proporsional,
   dan tombol fitur kilat lebih presisi.
   ========================================================= */
.simbay-payment-info-card,
.simbay-payment-tools-card,
.simbay-payment-tabs-card,
.simbay-payment-filter-box{
  margin-bottom:16px !important;
  border-radius:22px !important;
  overflow:hidden !important;
}

.simbay-payment-info-card > .box-header,
.simbay-payment-tools-card > .box-header,
.simbay-payment-filter-box > .box-header,
.simbay-payment-tabs-card > .nav-tabs,
.simbay-payment-tabs-card > .tab-content{
  position:relative;
  z-index:1;
}

.simbay-payment-info-card > .box-header,
.simbay-payment-tools-card > .box-header,
.simbay-payment-filter-box > .box-header{
  padding:12px 16px !important;
}

.simbay-payment-info-card > .box-header .box-title,
.simbay-payment-tools-card > .box-header .box-title,
.simbay-payment-filter-box > .box-header .box-title{
  font-size:16px !important;
  font-weight:900 !important;
}

.simbay-payment-info-card > .box-body,
.simbay-payment-tools-card > .box-body,
.simbay-payment-filter-box > .box-body,
.simbay-payment-tabs-card .tab-content{
  padding:14px 16px !important;
}

.simbay-payment-filter-box .modern-student-search-row{
  grid-template-columns:190px minmax(240px,1fr) auto !important;
  gap:12px !important;
}
.simbay-payment-filter-box .modern-student-search-label{
  font-size:13px !important;
  font-weight:900 !important;
}
.simbay-payment-filter-box .modern-student-search-input,
.simbay-payment-filter-box .modern-search-btn{
  height:42px !important;
  border-radius:16px !important;
}
.simbay-payment-filter-box .modern-search-btn{
  min-width:132px !important;
  font-weight:800 !important;
}

.simbay-payment-info-card .simbay-student-info-table td{
  padding:10px 12px !important;
  font-size:13px !important;
}
.simbay-payment-info-card .simbay-student-info-table td:first-child{
  width:170px !important;
}

.simbay-payment-tools-card .simbay-quick-helper{
  margin:0 0 12px !important;
  color:#64748b !important;
  font-size:13px !important;
  font-weight:700 !important;
}

.simbay-payment-quick-actions{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:10px !important;
  margin-bottom:8px !important;
}

.simbay-payment-quick-actions .simbay-quick-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  min-height:42px !important;
  padding:0 16px !important;
  border:0 !important;
  border-radius:16px !important;
  font-size:13px !important;
  font-weight:850 !important;
  letter-spacing:.01em !important;
  color:#fff !important;
  box-shadow:0 12px 26px rgba(15,23,42,.14) !important;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}
.simbay-payment-quick-actions .simbay-quick-btn:hover{
  transform:translateY(-1px) !important;
  box-shadow:0 16px 32px rgba(15,23,42,.18) !important;
  filter:brightness(1.03) !important;
}
.simbay-payment-quick-actions .simbay-quick-btn .fa,
.simbay-payment-quick-actions .simbay-quick-btn span.fa{
  font-size:14px !important;
}
.simbay-payment-quick-actions .simbay-quick-btn-danger{background:linear-gradient(135deg,#ef4444,#f97316) !important;}
.simbay-payment-quick-actions .simbay-quick-btn-success{background:linear-gradient(135deg,#16a34a,#22c55e) !important;}
.simbay-payment-quick-actions .simbay-quick-btn-info{background:linear-gradient(135deg,#2563eb,#06b6d4) !important;}

.simbay-payment-tabs-card{
  border-radius:22px !important;
  overflow:hidden !important;
  background:rgba(255,255,255,.90) !important;
  box-shadow:0 16px 38px rgba(15,23,42,.10) !important;
}
.simbay-payment-tabs-card > .nav-tabs{
  display:flex !important;
  gap:8px !important;
  padding:12px 12px 0 !important;
  background:transparent !important;
  border-bottom:1px solid rgba(226,232,240,.9) !important;
}
.simbay-payment-tabs-card > .nav-tabs > li{
  float:none !important;
  margin-bottom:0 !important;
}
.simbay-payment-tabs-card > .nav-tabs > li > a{
  border:1px solid rgba(191,219,254,.9) !important;
  border-bottom:0 !important;
  border-radius:14px 14px 0 0 !important;
  padding:10px 16px !important;
  font-weight:850 !important;
  color:#334155 !important;
  background:rgba(255,255,255,.85) !important;
}
.simbay-payment-tabs-card > .nav-tabs > li.active > a,
.simbay-payment-tabs-card > .nav-tabs > li.active > a:hover,
.simbay-payment-tabs-card > .nav-tabs > li.active > a:focus{
  color:#2563eb !important;
  background:rgba(239,246,255,.96) !important;
  box-shadow:0 -6px 18px rgba(37,99,235,.08) inset !important;
}

.simbay-payment-tabs-card .tab-content{
  padding-top:14px !important;
}
.simbay-payment-tabs-card .box-body{
  padding:0 !important;
}

@media (max-width: 991px){
  .simbay-payment-filter-box .modern-student-search-row{
    grid-template-columns:1fr !important;
  }
  .simbay-payment-filter-box .modern-search-btn{
    width:100% !important;
  }
}
@media (max-width: 767px){
  .simbay-payment-info-card > .box-header,
  .simbay-payment-tools-card > .box-header,
  .simbay-payment-filter-box > .box-header,
  .simbay-payment-info-card > .box-body,
  .simbay-payment-tools-card > .box-body,
  .simbay-payment-filter-box > .box-body,
  .simbay-payment-tabs-card .tab-content{
    padding:12px !important;
  }
  .simbay-payment-quick-actions{
    flex-direction:column !important;
    align-items:stretch !important;
  }
  .simbay-payment-quick-actions .simbay-quick-btn{
    width:100% !important;
  }
}


/* =========================================================
   Fix v85: global compact elegant layout
   menyederhanakan ukuran komponen agar lebih ringan, rapi, dan profesional.
   ========================================================= */
body.modern-content-view .content,
body:not(.modern-public-body) .content{
  max-width:1420px;
  margin:0 auto !important;
  padding:12px 16px 18px !important;
}
body.modern-content-view .content-header,
body:not(.modern-public-body) .content-header{
  max-width:1420px;
  margin:0 auto !important;
  padding:8px 16px 0 !important;
}
body.modern-content-view .content-header h1,
body:not(.modern-public-body) .content-header h1{
  margin:0 0 10px !important;
  padding:10px 16px !important;
  font-size:15px !important;
  border-radius:16px !important;
}

.box,.panel,.nav-tabs-custom,.well,.callout{
  border-radius:18px !important;
  box-shadow:0 10px 28px rgba(15,23,42,.08) !important;
}
.well{
  padding:8px !important;
  margin-bottom:10px !important;
  background:rgba(255,255,255,.48) !important;
  border:1px solid rgba(226,232,240,.85) !important;
}
.box.box-solid>.box-header,
.box>.box-header,
.panel-heading{
  padding:11px 14px !important;
}
.box-body,.panel-body{
  padding:12px 14px !important;
}
.box-header .box-title,
.panel-title{
  font-size:16px !important;
  line-height:1.3 !important;
}
.box-header h2,
.box-header h3,
.box-header h4,
.panel-heading h2,
.panel-heading h3,
.panel-heading h4{
  margin:0 !important;
  font-size:15px !important;
  line-height:1.35 !important;
  font-weight:850 !important;
}
.box-header small{font-size:11px !important;}

.info-box,
.small-box{
  border-radius:18px !important;
  box-shadow:0 10px 28px rgba(15,23,42,.08) !important;
}
.info-box-icon{
  width:70px !important;
  height:76px !important;
  line-height:76px !important;
  border-radius:0 18px 18px 0 !important;
}
.info-box-content{padding:12px 12px !important;margin-left:76px !important;}
.info-box-text{font-size:11px !important;letter-spacing:.05em !important;}
.info-box-number{font-size:17px !important;line-height:1.2 !important;}

.form-control,
select.form-control,
textarea.form-control,
.input-group-addon,
.select2-container--default .select2-selection--single{
  border-radius:12px !important;
}
.form-control,
select.form-control,
textarea.form-control{min-height:38px !important;font-size:13px !important;}
.input-group-addon{padding:8px 11px !important;min-width:42px !important;}
label{font-size:12.5px !important;}

.btn,
.button,
input[type="submit"],
button{
  border-radius:12px !important;
  font-size:12.5px !important;
}
.btn-sm{padding:7px 13px !important;font-size:12px !important;}
.btn-xs{padding:6px 10px !important;font-size:11.5px !important;}
.btn.pull-right,.pull-right.btn{margin-left:8px !important;}

.table>thead>tr>th,
.table-bordered>thead>tr>th{font-size:12.5px !important;padding:10px 10px !important;}
.table>tbody>tr>td,
.table-bordered>tbody>tr>td{font-size:12.5px !important;padding:9px 10px !important;}
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate{font-size:12.5px !important;}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{height:38px !important;padding:6px 10px !important;}
.pagination>li>a,.pagination>li>span{padding:7px 11px !important;min-width:36px !important;text-align:center;}

/* Halaman laporan transaksi dipadatkan */
body.modern-content-view .col-md-6 > .box.box-solid.box-primary .box-header > h2,
body.modern-content-view .col-md-6 > .box.box-solid.box-primary .box-header > h3{margin-bottom:8px !important;}
body.modern-content-view .col-md-6 > .box.box-solid.box-primary .box-header .form-group{margin-bottom:6px !important;}
body.modern-content-view .col-md-6 > .box.box-solid.box-primary .box-header .input-group{margin-bottom:0 !important;}
body.modern-content-view .col-md-6 > .box.box-solid.box-primary .box-header .col-md-12,
body.modern-content-view .col-md-6 > .box.box-solid.box-primary .box-header .col-sm-12,
body.modern-content-view .col-md-6 > .box.box-solid.box-primary .box-header .col-xs-12{padding-left:0 !important;padding-right:0 !important;}
body.modern-content-view .col-md-6 > .box.box-solid.box-primary .box-header .btn{margin-top:2px !important;}
body.modern-content-view .col-md-6 > .box.box-solid.box-primary .box-header p{margin:2px 0 !important;font-size:12px !important;color:#e2e8f0 !important;}

/* Data table dan panel dibuat lebih proporsional */
body.modern-content-view .table-responsive{overflow-x:auto !important;}
body.modern-content-view table.table{margin-bottom:8px !important;}
body.modern-content-view .box .table-responsive:last-child,
body.modern-content-view .box .dataTables_wrapper:last-child{margin-bottom:0 !important;}
body.modern-content-view .box .row:last-child{margin-bottom:0 !important;}
body.modern-content-view .nav-tabs-custom>.nav-tabs>li>a{padding:9px 14px !important;font-size:12.5px !important;}

/* Tombol aksi list lebih kecil dan presisi */
body.modern-content-view .table .btn,
body.modern-content-view .table .btn-xs,
body.modern-content-view .table .btn-sm{
  min-width:auto !important;
  padding:6px 9px !important;
  border-radius:11px !important;
}
body.modern-content-view .table .btn .glyphicon,
body.modern-content-view .table .btn .fa{margin-right:0 !important;}

/* Prompt PWA hanya untuk layar kecil agar tidak mengganggu desktop/tablet */
@media (min-width:768px){
  #simbayInstallPrompt,
  #simbayInstallGuide{display:none !important;}
}

@media (max-width:991px){
  body.modern-content-view .content,
  body:not(.modern-public-body) .content,
  body.modern-content-view .content-header,
  body:not(.modern-public-body) .content-header{padding-left:12px !important;padding-right:12px !important;}
  .box.box-solid>.box-header,
  .box>.box-header,
  .panel-heading{padding:10px 12px !important;}
  .box-body,.panel-body{padding:10px 12px !important;}
}
@media (max-width:767px){
  body.modern-content-view .content,
  body:not(.modern-public-body) .content{padding:10px 10px 16px !important;}
  body.modern-content-view .content-header,
  body:not(.modern-public-body) .content-header{padding:8px 10px 0 !important;}
  .box-header h2,.box-header h3,.box-header h4{font-size:14px !important;}
  .table>thead>tr>th,.table>tbody>tr>td{font-size:12px !important;padding:8px 9px !important;}
  .btn-sm,.btn-xs{width:auto;}
}


/* =========================================================
   Fix v86: compact all pages globally
   merapikan semua halaman agar lebih padat, seimbang, elegan.
   ========================================================= */
body.modern-content-view .wrapper,
body.modern-content-view .content-wrapper,
body:not(.modern-public-body) .wrapper,
body:not(.modern-public-body) .content-wrapper{
  overflow-x:hidden !important;
}
body.modern-content-view .content,
body:not(.modern-public-body) .content{
  max-width:1360px !important;
  margin:0 auto !important;
  padding:10px 14px 16px !important;
}
body.modern-content-view .content-header,
body:not(.modern-public-body) .content-header{
  max-width:1360px !important;
  margin:0 auto !important;
  padding:6px 14px 0 !important;
}
body.modern-content-view .content-header h1,
body:not(.modern-public-body) .content-header h1{
  margin:0 0 8px !important;
  padding:9px 14px !important;
  font-size:14px !important;
  border-radius:14px !important;
}
body.modern-content-view .row,
body:not(.modern-public-body) .row{margin-left:-8px !important;margin-right:-8px !important;}
body.modern-content-view .row>[class*="col-"],
body:not(.modern-public-body) .row>[class*="col-"]{padding-left:8px !important;padding-right:8px !important;}

.box,.panel,.nav-tabs-custom,.well,.callout,.info-box,.small-box{
  border-radius:16px !important;
}
.box,.panel,.nav-tabs-custom,.well,.callout{margin-bottom:12px !important;}
.box.box-solid>.box-header,
.box>.box-header,
.panel-heading{padding:10px 12px !important;}
.box-body,.panel-body,.nav-tabs-custom>.tab-content{padding:10px 12px !important;}
.box-header .box-title,.panel-title{font-size:15px !important;}
.box-header h2,.box-header h3,.box-header h4,
.panel-heading h2,.panel-heading h3,.panel-heading h4{font-size:14px !important;}
.box-header>.box-tools{right:10px !important;top:8px !important;}

.small-box>.inner{padding:12px 12px 10px !important;}
.small-box h3{font-size:22px !important; margin:0 0 4px !important;}
.small-box p{font-size:12px !important; margin:0 !important;}
.small-box .icon{font-size:46px !important; top:12px !important; right:12px !important;}
.info-box-icon{width:64px !important;height:68px !important;line-height:68px !important;}
.info-box-content{margin-left:70px !important;padding:10px 11px !important;}
.info-box-number{font-size:16px !important;}

.form-group{margin-bottom:10px !important;}
.form-control,select.form-control,textarea.form-control{min-height:36px !important;height:36px !important;font-size:12.5px !important;padding:7px 10px !important;}
textarea.form-control{height:auto !important;min-height:72px !important;}
.input-group-addon{min-width:40px !important;height:36px !important;padding:7px 10px !important;}
label,.control-label{font-size:12px !important;margin-bottom:4px !important;}
.help-block{font-size:11px !important;margin-top:4px !important;}

.btn,.button,input[type="submit"],button{font-size:12px !important;padding:8px 14px !important;}
.btn-lg{font-size:13px !important;padding:10px 18px !important;}
.btn-sm{font-size:11.5px !important;padding:6px 11px !important;}
.btn-xs{font-size:11px !important;padding:5px 9px !important;}
.btn + .btn{margin-left:6px !important;}

.table>thead>tr>th,.table-bordered>thead>tr>th{font-size:12px !important;padding:9px 8px !important;white-space:nowrap;}
.table>tbody>tr>td,.table-bordered>tbody>tr>td{font-size:12px !important;padding:8px 8px !important;vertical-align:middle !important;}
.table .btn,.table .btn-sm,.table .btn-xs{padding:5px 8px !important;border-radius:10px !important;}
.table-responsive{margin-bottom:0 !important;}

.dataTables_wrapper .row{display:flex;flex-wrap:wrap;align-items:center;}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate{padding-top:4px !important;padding-bottom:4px !important;}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{height:36px !important;font-size:12px !important;}
.pagination>li>a,.pagination>li>span{padding:6px 10px !important;min-width:34px !important;}

.nav-tabs-custom>.nav-tabs>li>a{padding:8px 12px !important;font-size:12px !important;}
.nav-tabs-custom>.tab-content{padding-top:10px !important;}

/* tombol cepat pembayaran dibuat lebih ringkas dan elegan */
body.modern-content-view .box .btn-success.btn-sm,
body.modern-content-view .box .btn-danger.btn-sm,
body.modern-content-view .box .btn-primary.btn-sm,
body.modern-content-view .box .btn-info.btn-sm{
  box-shadow:0 8px 18px rgba(15,23,42,.08) !important;
}

/* pengaturan form dua kolom lebih presisi */
body.modern-content-view .box .col-md-6 > .form-group,
body.modern-content-view .box .col-lg-6 > .form-group{margin-bottom:9px !important;}

/* kurangi ruang kosong bawah tabel/halaman */
.content-wrapper section.content > .box:last-child,
.content-wrapper section.content > .row:last-child > [class*="col-"] > .box:last-child{margin-bottom:8px !important;}

@media (min-width:1200px){
  .col-lg-6 > .box .box-header,
  .col-md-6 > .box .box-header{padding:10px 12px !important;}
}
@media (max-width:991px){
  body.modern-content-view .content,
  body:not(.modern-public-body) .content{padding:10px 12px 16px !important;}
  body.modern-content-view .content-header,
  body:not(.modern-public-body) .content-header{padding:6px 12px 0 !important;}
  body.modern-content-view .row,
  body:not(.modern-public-body) .row{margin-left:-6px !important;margin-right:-6px !important;}
  body.modern-content-view .row>[class*="col-"],
  body:not(.modern-public-body) .row>[class*="col-"]{padding-left:6px !important;padding-right:6px !important;}
}
@media (max-width:767px){
  body.modern-content-view .content,
  body:not(.modern-public-body) .content{padding:8px 10px 14px !important;}
  body.modern-content-view .content-header,
  body:not(.modern-public-body) .content-header{padding:6px 10px 0 !important;}
  .box,.panel,.nav-tabs-custom,.well,.callout{margin-bottom:10px !important;}
  .box.box-solid>.box-header,.box>.box-header,.panel-heading{padding:9px 10px !important;}
  .box-body,.panel-body,.nav-tabs-custom>.tab-content{padding:9px 10px !important;}
  .small-box h3{font-size:20px !important;}
  .btn,.button,input[type="submit"],button{padding:8px 12px !important;}
}


/* =========================================================
   Fix v87: dashboard full responsive + icon user aktif tampil
   Membuat dashboard lebih presisi memenuhi layar, lebih ringkas,
   mengurangi kebutuhan geser, dan memastikan ikon User Aktif tampil.
   ========================================================= */
html, body{overflow-x:hidden !important;}
body:not(.modern-public-body) .wrapper,
body:not(.modern-public-body) .content-wrapper,
body:not(.modern-public-body) .right-side,
body:not(.modern-public-body) .content{overflow-x:hidden !important;}

/* gunakan area layar lebih penuh di desktop */
body:not(.modern-public-body) .content,
body:not(.modern-public-body) .content-header{
  max-width:none !important;
  width:auto !important;
}
body:not(.modern-public-body) .content{
  padding:8px 12px 14px !important;
}
body:not(.modern-public-body) .content-header{
  padding:6px 12px 0 !important;
}
body:not(.modern-public-body) .content-header h1{
  margin:0 0 8px !important;
  padding:8px 14px !important;
  font-size:13.5px !important;
  border-radius:14px !important;
}

/* dashboard lebih padat dan pas layar */
body.modern-dashboard-view .modern-dashboard-shell{
  width:100% !important;
  max-width:none !important;
  padding:0 !important;
  margin:0 !important;
}
body.modern-dashboard-view .modern-dashboard-hero{
  margin-bottom:12px !important;
  padding:16px 20px !important;
  min-height:auto !important;
  border-radius:20px !important;
}
body.modern-dashboard-view .modern-dashboard-hero h2{
  font-size:20px !important;
  line-height:1.2 !important;
  margin:0 0 6px !important;
}
body.modern-dashboard-view .modern-dashboard-hero p{
  font-size:12.5px !important;
  line-height:1.45 !important;
  margin:0 !important;
}
body.modern-dashboard-view .modern-dashboard-datebox{
  min-width:180px !important;
  padding:12px 16px !important;
  border-radius:18px !important;
}
body.modern-dashboard-view .modern-dashboard-datebox span{font-size:11px !important;}
body.modern-dashboard-view .modern-dashboard-datebox strong{font-size:18px !important;}

body.modern-dashboard-view .modern-dashboard-grid{
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:12px !important;
  margin-bottom:12px !important;
}
body.modern-dashboard-view .modern-stat-card,
body.modern-dashboard-view .modern-stat-card.stat-wide{
  grid-column:span 1 !important;
  min-height:92px !important;
  padding:12px 14px !important;
  border-radius:18px !important;
}
body.modern-dashboard-view .modern-stat-icon{
  width:54px !important;
  height:54px !important;
  flex:0 0 54px !important;
  font-size:22px !important;
  border-radius:16px !important;
}
body.modern-dashboard-view .modern-stat-card small{
  font-size:10px !important;
  margin-bottom:3px !important;
}
body.modern-dashboard-view .modern-stat-card strong{
  font-size:14px !important;
  line-height:1.15 !important;
}

body.modern-dashboard-view .modern-dashboard-chart-grid{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:12px !important;
  margin-bottom:12px !important;
}
body.modern-dashboard-view .modern-chart-card{
  padding:12px 14px !important;
  border-radius:20px !important;
  min-height:220px !important;
}
body.modern-dashboard-view .modern-chart-head{margin-bottom:10px !important;}
body.modern-dashboard-view .modern-chart-head h3,
body.modern-dashboard-view .modern-chart-head strong{font-size:13px !important;}
body.modern-dashboard-view .modern-chart-metric{font-size:15px !important;}
body.modern-dashboard-view .modern-chart-caption,
body.modern-dashboard-view .modern-chart-meta{font-size:11px !important;}
body.modern-dashboard-view .modern-bottom-appbar{
  margin-top:0 !important;
  padding:12px 16px !important;
  border-radius:18px !important;
  font-size:12px !important;
}

/* tabel dan box umum: jangan terlalu lebar / tinggi */
body:not(.modern-public-body) .box,
body:not(.modern-public-body) .panel,
body:not(.modern-public-body) .nav-tabs-custom{
  border-radius:16px !important;
}
body:not(.modern-public-body) .box-header,
body:not(.modern-public-body) .panel-heading{
  padding:10px 12px !important;
}
body:not(.modern-public-body) .box-body,
body:not(.modern-public-body) .panel-body,
body:not(.modern-public-body) .nav-tabs-custom>.tab-content{
  padding:10px 12px !important;
}
body:not(.modern-public-body) .table-responsive{
  overflow-x:auto !important;
  overflow-y:hidden !important;
}

/* responsif bertahap */
@media (max-width:1399px){
  body.modern-dashboard-view .modern-dashboard-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;}
}
@media (max-width:1199px){
  body.modern-dashboard-view .modern-dashboard-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
  body.modern-dashboard-view .modern-dashboard-chart-grid{grid-template-columns:1fr !important;}
}
@media (max-width:991px){
  body.modern-dashboard-view .modern-dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  body.modern-dashboard-view .modern-dashboard-hero{padding:14px 16px !important;}
}
@media (max-width:767px){
  body.modern-dashboard-view .modern-dashboard-grid{grid-template-columns:1fr !important;}
  body.modern-dashboard-view .modern-stat-card,
  body.modern-dashboard-view .modern-stat-card.stat-wide{min-height:84px !important;padding:12px !important;}
  body.modern-dashboard-view .modern-dashboard-datebox{min-width:auto !important;width:100% !important;}
}


/* =========================================================
   Fix v88: global compact layout - hilangkan ruang kosong bawah
   Merapikan box/list/table di semua halaman agar tinggi kontainer
   mengikuti isi, tidak menyisakan area kosong besar.
   ========================================================= */
html,body{overflow-x:hidden !important;}
body:not(.modern-public-body) .content-wrapper,
body:not(.modern-public-body) .right-side,
body:not(.modern-public-body) .content,
body:not(.modern-public-body) .box,
body:not(.modern-public-body) .box-body,
body:not(.modern-public-body) .panel,
body:not(.modern-public-body) .panel-body,
body:not(.modern-public-body) .nav-tabs-custom,
body:not(.modern-public-body) .tab-content,
body:not(.modern-public-body) .tab-pane{
  height:auto !important;
  min-height:0 !important;
}

/* padding halaman dibuat lebih rapat dan proporsional */
body:not(.modern-public-body) .content{
  padding:8px 10px 12px !important;
}
body:not(.modern-public-body) .content-header{
  padding:6px 10px 0 !important;
}
body:not(.modern-public-body) .content-header h1{
  margin:0 0 8px !important;
}
body:not(.modern-public-body) .content-wrapper,
body:not(.modern-public-body) .right-side{
  padding-bottom:20px !important;
}

/* box global dibuat lebih ringkas */
body:not(.modern-public-body) .box,
body:not(.modern-public-body) .panel,
body:not(.modern-public-body) .nav-tabs-custom{
  margin-bottom:12px !important;
}
body:not(.modern-public-body) .box-body,
body:not(.modern-public-body) .panel-body,
body:not(.modern-public-body) .nav-tabs-custom>.tab-content{
  padding:10px 12px !important;
}

/* DataTable dan area tabel: tinggi menyesuaikan isi */
body:not(.modern-public-body) .table-responsive,
body:not(.modern-public-body) .dataTables_wrapper,
body:not(.modern-public-body) .dataTables_scroll,
body:not(.modern-public-body) .dataTables_scrollHead,
body:not(.modern-public-body) .dataTables_scrollBody{
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
}
body:not(.modern-public-body) .dataTables_scrollBody{
  overflow-y:visible !important;
}
body:not(.modern-public-body) .dataTables_wrapper{
  margin-bottom:0 !important;
  padding-bottom:0 !important;
}
body:not(.modern-public-body) .dataTables_wrapper > .row:first-child,
body:not(.modern-public-body) .dataTables_wrapper > .row:last-child{
  margin-left:0 !important;
  margin-right:0 !important;
}
body:not(.modern-public-body) .dataTables_wrapper > .row:last-child{
  padding-top:8px !important;
  padding-bottom:0 !important;
  margin-bottom:0 !important;
}
body:not(.modern-public-body) .dataTables_wrapper .row:last-child > [class*="col-"]{
  margin-bottom:0 !important;
}
body:not(.modern-public-body) .dataTables_wrapper .dataTables_info,
body:not(.modern-public-body) .dataTables_wrapper .dataTables_paginate{
  margin-bottom:0 !important;
  padding-bottom:0 !important;
}
body:not(.modern-public-body) .dataTables_paginate .paginate_button{
  margin-bottom:0 !important;
}
body:not(.modern-public-body) table.dataTable,
body:not(.modern-public-body) .table{
  margin-bottom:0 !important;
}
body:not(.modern-public-body) .box-body > .table:last-child,
body:not(.modern-public-body) .box-body > .dataTables_wrapper:last-child,
body:not(.modern-public-body) .box-body > .table-responsive:last-child{
  margin-bottom:0 !important;
}

/* kolom dan grid lebih rapat agar proporsional */
body:not(.modern-public-body) .row{
  margin-left:-6px !important;
  margin-right:-6px !important;
}
body:not(.modern-public-body) .row > [class*="col-"]{
  padding-left:6px !important;
  padding-right:6px !important;
}

/* kartu judul dan tombol kanan tidak makan ruang berlebih */
body:not(.modern-public-body) .box-header{
  padding:10px 12px !important;
}
body:not(.modern-public-body) .box-header .box-title{
  font-size:14px !important;
  line-height:1.35 !important;
}
body:not(.modern-public-body) .box-header .btn.pull-right,
body:not(.modern-public-body) .box-header .pull-right.btn{
  margin-top:0 !important;
}

/* footer aplikasi tidak membuat halaman terkesan terlalu tinggi */
body:not(.modern-public-body) .main-footer{
  margin-top:6px !important;
  padding:8px 12px !important;
}

@media (max-width:991px){
  body:not(.modern-public-body) .content{padding:8px 8px 12px !important;}
  body:not(.modern-public-body) .content-header{padding:6px 8px 0 !important;}
  body:not(.modern-public-body) .row{margin-left:-4px !important;margin-right:-4px !important;}
  body:not(.modern-public-body) .row > [class*="col-"]{padding-left:4px !important;padding-right:4px !important;}
}




/* =========================================================
   Fix v89 TRUE COMPACT
   Perbaikan keras untuk space kosong besar yang belum berubah:
   - paksa box/table/DataTables mengikuti isi
   - hapus tinggi/min-height yang membuat blank area
   - hilangkan scroll horizontal besar jika tabel tidak perlu
   - buat semua halaman lebih presisi dan compact
   ========================================================= */

/* Halaman utama jangan menyisakan tinggi paksa */
body:not(.modern-public-body),
body:not(.modern-public-body) .wrapper,
body:not(.modern-public-body) .content-wrapper,
body:not(.modern-public-body) .right-side,
body:not(.modern-public-body) .content{
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
}

/* Hanya wrapper minimal setinggi layar, bukan box/table */
body:not(.modern-public-body) .wrapper{
  min-height:100vh !important;
}

/* Konten dibuat full, rapi, compact */
body:not(.modern-public-body) .content{
  padding:8px 12px 14px !important;
  margin:0 !important;
  max-width:none !important;
  width:100% !important;
}

/* Semua container panel mengikuti isi */
body:not(.modern-public-body) .box,
body:not(.modern-public-body) .panel,
body:not(.modern-public-body) .nav-tabs-custom,
body:not(.modern-public-body) .well,
body:not(.modern-public-body) .callout,
body:not(.modern-public-body) .x_panel,
body:not(.modern-public-body) .box-body,
body:not(.modern-public-body) .panel-body,
body:not(.modern-public-body) .tab-content,
body:not(.modern-public-body) .tab-pane,
body:not(.modern-public-body) .x_content{
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
}

/* Box tidak boleh meninggalkan ruang kosong besar */
body:not(.modern-public-body) .box,
body:not(.modern-public-body) .panel,
body:not(.modern-public-body) .nav-tabs-custom{
  margin-bottom:10px !important;
  overflow:hidden !important;
}

body:not(.modern-public-body) .box-body,
body:not(.modern-public-body) .panel-body,
body:not(.modern-public-body) .tab-content{
  padding:9px 11px !important;
  margin:0 !important;
  overflow:visible !important;
}

/* Header dan tombol lebih kecil */
body:not(.modern-public-body) .box-header,
body:not(.modern-public-body) .panel-heading{
  padding:9px 11px !important;
  min-height:0 !important;
}

body:not(.modern-public-body) .box-header .box-title{
  font-size:14px !important;
  line-height:1.25 !important;
}

/* Baris dan kolom tidak memberi jarak besar */
body:not(.modern-public-body) .row{
  margin-left:-5px !important;
  margin-right:-5px !important;
}

body:not(.modern-public-body) .row > [class*="col-"]{
  padding-left:5px !important;
  padding-right:5px !important;
  margin-bottom:8px !important;
}

/* DataTables: paksa tinggi mengikuti isi */
body:not(.modern-public-body) .dataTables_wrapper,
body:not(.modern-public-body) .dataTables_scroll,
body:not(.modern-public-body) .dataTables_scrollHead,
body:not(.modern-public-body) .dataTables_scrollBody,
body:not(.modern-public-body) .dataTables_scrollFoot{
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
}

/* Hilangkan scroll area kosong raksasa */
body:not(.modern-public-body) .dataTables_wrapper,
body:not(.modern-public-body) .table-responsive{
  overflow-x:auto !important;
  overflow-y:visible !important;
  padding-bottom:0 !important;
  margin-bottom:0 !important;
}

/* Tabel default full width, jangan max-content yang menciptakan scrollbar panjang */
body:not(.modern-public-body) table.table,
body:not(.modern-public-body) table.dataTable,
body:not(.modern-public-body) .table-responsive > table,
body:not(.modern-public-body) .dataTables_wrapper table{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  margin:0 !important;
}

/* Jika tabel memang lebar, scroll hanya pada layar kecil */
@media (max-width: 991px){
  body:not(.modern-public-body) table.table,
  body:not(.modern-public-body) table.dataTable,
  body:not(.modern-public-body) .table-responsive > table,
  body:not(.modern-public-body) .dataTables_wrapper table{
    min-width:760px !important;
  }
}

/* Row DataTables bagian atas dan bawah jangan menambah area kosong */
body:not(.modern-public-body) .dataTables_wrapper > .row{
  margin-left:0 !important;
  margin-right:0 !important;
  margin-bottom:6px !important;
}

body:not(.modern-public-body) .dataTables_wrapper > .row:first-child{
  margin-bottom:8px !important;
}

body:not(.modern-public-body) .dataTables_wrapper > .row:last-child{
  margin-top:7px !important;
  margin-bottom:0 !important;
  padding:0 !important;
}

body:not(.modern-public-body) .dataTables_wrapper > .row > [class*="col-"]{
  margin-bottom:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

/* Info dan pagination rapat ke tabel */
body:not(.modern-public-body) .dataTables_info{
  padding-top:5px !important;
  padding-bottom:0 !important;
  margin:0 !important;
  font-size:12px !important;
}

body:not(.modern-public-body) .dataTables_paginate{
  padding-top:0 !important;
  padding-bottom:0 !important;
  margin:0 !important;
}

body:not(.modern-public-body) .pagination{
  margin:0 !important;
}

/* Table row lebih compact */
body:not(.modern-public-body) .table > thead > tr > th,
body:not(.modern-public-body) table.dataTable thead th{
  padding:8px 8px !important;
  font-size:12px !important;
}

body:not(.modern-public-body) .table > tbody > tr > td,
body:not(.modern-public-body) table.dataTable tbody td{
  padding:7px 8px !important;
  font-size:12px !important;
}

/* Form/tombol compact */
body:not(.modern-public-body) .form-group{
  margin-bottom:8px !important;
}

body:not(.modern-public-body) .form-control,
body:not(.modern-public-body) select.form-control{
  height:34px !important;
  min-height:34px !important;
  padding:6px 9px !important;
  font-size:12px !important;
}

body:not(.modern-public-body) .btn{
  padding:6px 11px !important;
  font-size:12px !important;
  border-radius:11px !important;
}

/* Khusus halaman master/tabel/list: jangan ada blank area */
body:not(.modern-public-body) .box.box-warning,
body:not(.modern-public-body) .box.box-primary,
body:not(.modern-public-body) .box.box-info,
body:not(.modern-public-body) .box.box-success{
  height:auto !important;
  min-height:0 !important;
}

/* Sembunyikan scrollbar horizontal jika tabel cukup muat */
body:not(.modern-public-body) .box-body::-webkit-scrollbar,
body:not(.modern-public-body) .dataTables_wrapper::-webkit-scrollbar,
body:not(.modern-public-body) .table-responsive::-webkit-scrollbar{
  height:7px !important;
}

/* Hapus efek panel terlalu tinggi dari fix lama */
body:not(.modern-public-body) .simbay-tabungan-history-box,
body:not(.modern-public-body) .simbay-payment-tabs-card,
body:not(.modern-public-body) .simbay-settings-card{
  height:auto !important;
  min-height:0 !important;
}

/* Mobile tetap aman */
@media (max-width: 767px){
  body:not(.modern-public-body) .content{
    padding:7px 8px 12px !important;
  }

  body:not(.modern-public-body) .box-body,
  body:not(.modern-public-body) .panel-body,
  body:not(.modern-public-body) .tab-content{
    padding:8px 9px !important;
  }
}



/* =========================================================
   Fix v90: dashboard hero diperlebar sedikit agar lebih jelas
   ========================================================= */
body.modern-dashboard-view .content,
body.modern-dashboard-view .content-header{
  max-width:none !important;
  width:100% !important;
}
body.modern-dashboard-view .content{
  padding:8px 10px 14px !important;
}
body.modern-dashboard-view .modern-dashboard-shell{
  max-width:100% !important;
  width:100% !important;
  margin:0 auto 14px !important;
}
body.modern-dashboard-view .modern-dashboard-hero{
  width:100% !important;
  min-height:132px !important;
  padding:18px 20px !important;
  border-radius:24px !important;
  gap:16px !important;
  margin-bottom:12px !important;
}
body.modern-dashboard-view .modern-dashboard-hero h2{
  font-size:clamp(24px,2.2vw,34px) !important;
  margin:8px 0 5px !important;
}
body.modern-dashboard-view .modern-dashboard-hero p{
  max-width:980px !important;
  font-size:13px !important;
}
body.modern-dashboard-view .modern-dashboard-datebox{
  min-width:200px !important;
  padding:14px 18px !important;
  border-radius:20px !important;
}
body.modern-dashboard-view .modern-dashboard-datebox strong{
  font-size:20px !important;
}
@media (min-width: 1400px){
  body.modern-dashboard-view .content{padding-left:8px !important;padding-right:8px !important;}
  body.modern-dashboard-view .modern-dashboard-hero{padding:20px 22px !important;}
}
@media (max-width: 991px){
  body.modern-dashboard-view .modern-dashboard-hero{
    min-height:auto !important;
    padding:16px !important;
  }
}



/* =========================================================
   Fix v91: bottom bar paten di bawah, tidak ikut naik,
   konten tetap normal tanpa ruang kosong berlebih
   ========================================================= */
html,body{min-height:100% !important;}
body:not(.modern-public-body) .main-footer{
  display:block !important;
  position:fixed !important;
  left:230px !important;
  right:0 !important;
  bottom:0 !important;
  top:auto !important;
  height:56px !important;
  min-height:56px !important;
  z-index:1060 !important;
  margin:0 !important;
  padding:7px 16px !important;
}
body.sidebar-collapse:not(.modern-public-body) .main-footer{left:50px !important;}
body:not(.modern-public-body) .content-wrapper,
body:not(.modern-public-body) .right-side{
  min-height:calc(100vh - 50px) !important;
  height:auto !important;
  overflow:visible !important;
  padding-bottom:78px !important;
}
body.modern-dashboard-view:not(.modern-public-body) .content-wrapper,
body.modern-dashboard-view:not(.modern-public-body) .right-side{
  min-height:calc(100vh - 50px) !important;
  height:auto !important;
  overflow-y:auto !important;
  padding-bottom:78px !important;
}
.wrapper{min-height:100vh !important;}
.main-footer .modern-bottom-appbar{
  height:42px !important;
  min-height:42px !important;
  align-items:center !important;
}
@media (max-width:991px){
  body:not(.modern-public-body) .main-footer{left:0 !important;}
}
@media (max-width:767px){
  body:not(.modern-public-body) .main-footer{
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    height:auto !important;
    min-height:62px !important;
    padding:8px 12px !important;
  }
  body:not(.modern-public-body) .content-wrapper,
  body:not(.modern-public-body) .right-side,
  body.modern-dashboard-view:not(.modern-public-body) .content-wrapper,
  body.modern-dashboard-view:not(.modern-public-body) .right-side{
    min-height:calc(100vh - 50px) !important;
    height:auto !important;
    padding-bottom:92px !important;
  }
}


/* =========================================================
   Fix v94: Tabungan - hilangkan space kosong dan tampilan menumpuk
   ========================================================= */
body:not(.modern-public-body) .simbay-tabungan-history-box,
body:not(.modern-public-body) .simbay-tabungan-history-box .box-body,
body:not(.modern-public-body) .simbay-tabungan-history-box .dataTables_wrapper,
body:not(.modern-public-body) .simbay-tabungan-history-box .table-responsive,
body:not(.modern-public-body) .simbay-tabungan-history-box .simbay-tabungan-transaksi-scroll,
body:not(.modern-public-body) .simbay-tabungan-history-box .dataTables_scroll,
body:not(.modern-public-body) .simbay-tabungan-history-box .dataTables_scrollHead,
body:not(.modern-public-body) .simbay-tabungan-history-box .dataTables_scrollBody,
body:not(.modern-public-body) .simbay-tabungan-history-box .dataTables_scrollFoot{
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
}

body:not(.modern-public-body) .simbay-tabungan-history-box{
  margin-top:0 !important;
  margin-bottom:12px !important;
}

body:not(.modern-public-body) .simbay-tabungan-history-box .box-body{
  padding:10px 12px 12px !important;
}

body:not(.modern-public-body) .simbay-tabungan-history-box .dataTables_wrapper{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  padding:0 !important;
  margin:0 !important;
}

body:not(.modern-public-body) .simbay-tabungan-history-box .dataTables_wrapper > .row{
  margin:0 !important;
}

body:not(.modern-public-body) .simbay-tabungan-history-box .dataTables_wrapper > .row:first-child{
  margin-bottom:6px !important;
}

body:not(.modern-public-body) .simbay-tabungan-history-box .dataTables_wrapper > .row:last-child{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  margin-top:2px !important;
  padding-top:8px !important;
  padding-bottom:0 !important;
  border-top:1px solid rgba(226,232,240,.95) !important;
}

body:not(.modern-public-body) .simbay-tabungan-history-box .dataTables_info,
body:not(.modern-public-body) .simbay-tabungan-history-box .dataTables_paginate{
  float:none !important;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
}

body:not(.modern-public-body) .simbay-tabungan-history-box .dataTables_paginate{
  margin-left:auto !important;
  text-align:right !important;
}

body:not(.modern-public-body) .simbay-tabungan-history-box .table-responsive,
body:not(.modern-public-body) .simbay-tabungan-history-box .simbay-tabungan-transaksi-scroll{
  overflow-x:auto !important;
  overflow-y:hidden !important;
  padding-bottom:0 !important;
  margin-bottom:0 !important;
}

body:not(.modern-public-body) .simbay-tabungan-history-box .simbay-tabungan-transaksi-table{
  margin-bottom:0 !important;
}

body:not(.modern-public-body) .simbay-tabungan-history-box .table > thead > tr > th,
body:not(.modern-public-body) .simbay-tabungan-history-box .table > tbody > tr > td{
  padding-top:9px !important;
  padding-bottom:9px !important;
}

body:not(.modern-public-body) .simbay-tabungan-history-box .pagination{
  margin:0 !important;
}

@media (max-width: 767px){
  body:not(.modern-public-body) .simbay-tabungan-history-box .dataTables_wrapper > .row:last-child{
    align-items:flex-start !important;
  }
  body:not(.modern-public-body) .simbay-tabungan-history-box .dataTables_paginate{
    width:100% !important;
    margin-left:0 !important;
    text-align:left !important;
  }
}


/* =========================================================
   Fix v95: Popup tanggal pembayaran/cicilan dibuat rapi
   ========================================================= */
.simbay-popup-date-group .simbay-input-group-date{
  display:flex !important;
  align-items:stretch !important;
  width:100% !important;
  border:1px solid #d9e2ef !important;
  border-radius:16px !important;
  overflow:hidden !important;
  background:#ffffff !important;
  box-shadow:0 8px 24px rgba(15, 23, 42, 0.06) !important;
}

.simbay-popup-date-group .simbay-input-group-date .input-group-addon{
  width:52px !important;
  min-width:52px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:0 !important;
  border-right:1px solid #d9e2ef !important;
  border-radius:0 !important;
  background:linear-gradient(135deg, #2563eb 0%, #06b6d4 100%) !important;
  color:#ffffff !important;
}

.simbay-popup-date-group .simbay-date-input{
  border:0 !important;
  border-radius:0 !important;
  height:46px !important;
  padding:10px 14px !important;
  font-size:15px !important;
  font-weight:600 !important;
  color:#0f172a !important;
  background:#ffffff !important;
  box-shadow:none !important;
}

.simbay-popup-date-group .simbay-date-input:focus{
  outline:none !important;
  box-shadow:none !important;
  background:#ffffff !important;
}

.simbay-popup-date-group .help-block{
  font-size:12px !important;
}


/* =========================================================
   Fix v96: Tabungan dirapatkan, space kosong dihilangkan,
   loading dibuat lebih ringan dan responsif.
   ========================================================= */
:root{
  --simbay-footer-space: 74px !important;
}

body:not(.modern-public-body) .content-wrapper,
body:not(.modern-public-body) .right-side{
  padding-bottom:74px !important;
}

body:not(.modern-public-body) .content{
  padding-bottom:66px !important;
}

body:not(.modern-public-body) .dataTables_wrapper,
body:not(.modern-public-body) .table-responsive,
body:not(.modern-public-body) .simbay-tabungan-history-box,
body:not(.modern-public-body) .simbay-table-scroll-x,
body:not(.modern-public-body) .simbay-mobile-table-scroll,
body:not(.modern-public-body) .simbay-tabungan-history-box .box-body,
body:not(.modern-public-body) .simbay-tabungan-history-box .dataTables_wrapper,
body:not(.modern-public-body) .simbay-tabungan-history-box .simbay-tabungan-transaksi-scroll,
body:not(.modern-public-body) .simbay-tabungan-history-box .dataTables_scrollBody{
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  padding-bottom:0 !important;
  margin-bottom:0 !important;
}

body:not(.modern-public-body) .simbay-tabungan-history-box{
  margin-bottom:8px !important;
}

body:not(.modern-public-body) .simbay-tabungan-history-box .box-body{
  padding:10px 12px 8px !important;
}

body:not(.modern-public-body) .simbay-tabungan-history-box .dataTables_wrapper > .row:first-child{
  margin-bottom:6px !important;
}

body:not(.modern-public-body) .simbay-tabungan-history-box .dataTables_wrapper > .row:last-child,
body:not(.modern-public-body) .dataTables_wrapper > .row:last-child{
  margin-top:6px !important;
  margin-bottom:0 !important;
  padding-top:6px !important;
  padding-bottom:0 !important;
  border-top:1px solid rgba(226,232,240,.9) !important;
}

body:not(.modern-public-body) .simbay-tabungan-history-box .dataTables_info,
body:not(.modern-public-body) .simbay-tabungan-history-box .dataTables_paginate,
body:not(.modern-public-body) .dataTables_info,
body:not(.modern-public-body) .dataTables_paginate,
body:not(.modern-public-body) .dataTables_paginate .pagination{
  margin:0 !important;
  padding:0 !important;
}

body:not(.modern-public-body) .simbay-tabungan-history-box .box,
body:not(.modern-public-body) .box.simbay-tabungan-history-box{
  height:auto !important;
  min-height:0 !important;
}

body:not(.modern-public-body) .simbay-tabungan-history-box table.dataTable tbody tr td,
body:not(.modern-public-body) .simbay-tabungan-history-box table.dataTable thead tr th{
  white-space:nowrap;
}

body:not(.modern-public-body) .dataTables_processing{
  border-radius:14px !important;
  box-shadow:0 12px 30px rgba(15,23,42,.12) !important;
  border:1px solid rgba(37,99,235,.14) !important;
  padding:10px 16px !important;
}

@media (max-width: 991px){
  body:not(.modern-public-body) .content-wrapper,
  body:not(.modern-public-body) .right-side{padding-bottom:82px !important;}
  body:not(.modern-public-body) .content{padding-bottom:74px !important;}
}


/* =========================================================
   Fix v97: tabel pembayaran dibuat lebih presisi,
   tombol Bayar lebih rapi, dan lebar tabel lebih enak dilihat.
   ========================================================= */
body:not(.modern-public-body) .simbay-tagihan-lainnya-table,
body:not(.modern-public-body) .simbay-tagihan-bulanan-table{
  border-collapse:separate !important;
  border-spacing:0 !important;
}

body:not(.modern-public-body) .simbay-tagihan-lainnya-table{
  width:100% !important;
  min-width:100% !important;
  table-layout:fixed !important;
}

body:not(.modern-public-body) .simbay-tagihan-lainnya-table th,
body:not(.modern-public-body) .simbay-tagihan-lainnya-table td{
  padding:9px 8px !important;
  font-size:12.5px !important;
  line-height:1.35 !important;
  vertical-align:middle !important;
}

body:not(.modern-public-body) .simbay-tagihan-lainnya-table thead th{
  font-size:12px !important;
  font-weight:800 !important;
}

body:not(.modern-public-body) .simbay-tagihan-lainnya-table th:nth-child(1),
body:not(.modern-public-body) .simbay-tagihan-lainnya-table td:nth-child(1){
  width:46px !important;
  min-width:46px !important;
  max-width:46px !important;
  text-align:center !important;
}

body:not(.modern-public-body) .simbay-tagihan-lainnya-table th:nth-child(2),
body:not(.modern-public-body) .simbay-tagihan-lainnya-table td:nth-child(2){
  width:56px !important;
  min-width:56px !important;
  max-width:56px !important;
  text-align:center !important;
}

body:not(.modern-public-body) .simbay-tagihan-lainnya-table th:nth-child(3),
body:not(.modern-public-body) .simbay-tagihan-lainnya-table td:nth-child(3){
  width:42% !important;
  min-width:250px !important;
  max-width:560px !important;
  white-space:normal !important;
  word-break:break-word !important;
}

body:not(.modern-public-body) .simbay-tagihan-lainnya-table th:nth-child(4),
body:not(.modern-public-body) .simbay-tagihan-lainnya-table td:nth-child(4),
body:not(.modern-public-body) .simbay-tagihan-lainnya-table th:nth-child(5),
body:not(.modern-public-body) .simbay-tagihan-lainnya-table td:nth-child(5){
  width:140px !important;
  min-width:120px !important;
  text-align:left !important;
}

body:not(.modern-public-body) .simbay-tagihan-lainnya-table th:nth-child(6),
body:not(.modern-public-body) .simbay-tagihan-lainnya-table td:nth-child(6){
  width:126px !important;
  min-width:126px !important;
  max-width:126px !important;
  text-align:center !important;
}

body:not(.modern-public-body) .simbay-tagihan-lainnya-table th:nth-child(7),
body:not(.modern-public-body) .simbay-tagihan-lainnya-table td:nth-child(7){
  width:96px !important;
  min-width:96px !important;
  max-width:96px !important;
  text-align:center !important;
}

body:not(.modern-public-body) .simbay-tagihan-lainnya-table td:last-child a.btn,
body:not(.modern-public-body) .simbay-tagihan-lainnya-table td:last-child .btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  min-width:66px !important;
  height:34px !important;
  padding:6px 10px !important;
  border-radius:12px !important;
  font-size:12px !important;
  font-weight:800 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  box-shadow:0 8px 18px rgba(34,197,94,.18) !important;
}

body:not(.modern-public-body) .simbay-tagihan-lainnya-table td:last-child a.btn .fa,
body:not(.modern-public-body) .simbay-tagihan-lainnya-table td:last-child .btn .fa{
  font-size:11px !important;
  margin:0 !important;
}

body:not(.modern-public-body) .simbay-tagihan-lainnya-table .view-cicilan{
  min-width:92px !important;
  padding:6px 10px !important;
  font-size:11px !important;
  line-height:1.2 !important;
}

body:not(.modern-public-body) .simbay-table-scroll-x{
  border-radius:16px !important;
}

body:not(.modern-public-body) .simbay-tagihan-lainnya-table input[type="checkbox"]{
  margin:0 auto !important;
  display:block !important;
}

body:not(.modern-public-body) .simbay-tagihan-lainnya-table tbody tr td{
  background-clip:padding-box !important;
}

body:not(.modern-public-body) .simbay-tagihan-lainnya-table tbody tr.success td:nth-child(4),
body:not(.modern-public-body) .simbay-tagihan-lainnya-table tbody tr.success td:nth-child(5),
body:not(.modern-public-body) .simbay-tagihan-lainnya-table tbody tr.danger td:nth-child(4),
body:not(.modern-public-body) .simbay-tagihan-lainnya-table tbody tr.danger td:nth-child(5){
  font-weight:700 !important;
}

@media (max-width: 991px){
  body:not(.modern-public-body) .simbay-tagihan-lainnya-table{
    width:max-content !important;
    min-width:900px !important;
    table-layout:auto !important;
  }

  body:not(.modern-public-body) .simbay-tagihan-lainnya-table th,
  body:not(.modern-public-body) .simbay-tagihan-lainnya-table td{
    font-size:12px !important;
    padding:8px 8px !important;
  }

  body:not(.modern-public-body) .simbay-tagihan-lainnya-table th:nth-child(3),
  body:not(.modern-public-body) .simbay-tagihan-lainnya-table td:nth-child(3){
    min-width:280px !important;
    white-space:normal !important;
  }
}

@media (max-width: 575px){
  body:not(.modern-public-body) .simbay-tagihan-lainnya-table{
    min-width:860px !important;
  }
}


/* Fix v98: input tanggal pembayaran popup */
.simbay-datetime-input{
  min-height: 40px !important;
  font-weight: 700 !important;
  letter-spacing: .2px;
}
.simbay-datetime-input::-webkit-calendar-picker-indicator{
  opacity: 1 !important;
  cursor: pointer;
}


/* =========================================================
   Fix v99: hero dashboard diperbesar lagi agar lebih jelas
   ========================================================= */
body.modern-dashboard-view .modern-dashboard-hero{
  min-height:170px !important;
  padding:26px 30px !important;
  border-radius:28px !important;
  gap:20px !important;
  margin-bottom:16px !important;
}
body.modern-dashboard-view .modern-dashboard-kicker{
  padding:10px 18px !important;
  font-size:13px !important;
  letter-spacing:.8px !important;
}
body.modern-dashboard-view .modern-dashboard-hero h2{
  font-size:clamp(32px,2.8vw,44px) !important;
  margin:12px 0 8px !important;
  line-height:1.15 !important;
}
body.modern-dashboard-view .modern-dashboard-hero p{
  max-width:1100px !important;
  font-size:15px !important;
  line-height:1.65 !important;
}
body.modern-dashboard-view .modern-dashboard-datebox{
  min-width:230px !important;
  padding:18px 22px !important;
  border-radius:22px !important;
}
body.modern-dashboard-view .modern-dashboard-datebox span{
  font-size:14px !important;
}
body.modern-dashboard-view .modern-dashboard-datebox strong{
  font-size:30px !important;
}
@media (max-width: 991px){
  body.modern-dashboard-view .modern-dashboard-hero{
    min-height:auto !important;
    padding:18px 18px !important;
    border-radius:22px !important;
  }
  body.modern-dashboard-view .modern-dashboard-hero h2{
    font-size:clamp(24px,5.6vw,32px) !important;
  }
  body.modern-dashboard-view .modern-dashboard-hero p{
    font-size:13px !important;
  }
  body.modern-dashboard-view .modern-dashboard-datebox{
    width:100% !important;
    min-width:0 !important;
    padding:14px 16px !important;
  }
  body.modern-dashboard-view .modern-dashboard-datebox strong{
    font-size:24px !important;
  }
}




/* =========================================================
   Fix v100: Responsive & Lightweight untuk semua menu
   Fokus:
   - semua halaman lebih cepat dibuka
   - tampilan desktop/tablet/HP lebih stabil
   - tabel, form, box, modal, sidebar lebih responsif
   - efek berat dikurangi tanpa menghilangkan kesan modern
   ========================================================= */

:root{
  --simbay-page-pad: 12px;
  --simbay-card-radius: 18px;
  --simbay-fast-shadow: 0 8px 22px rgba(15,23,42,.07);
}

/* Ringankan efek berat global */
body:not(.modern-public-body) *,
body:not(.modern-public-body) *::before,
body:not(.modern-public-body) *::after{
  scroll-behavior:auto !important;
}

body:not(.modern-public-body) .box,
body:not(.modern-public-body) .panel,
body:not(.modern-public-body) .nav-tabs-custom,
body:not(.modern-public-body) .modern-stat-card,
body:not(.modern-public-body) .modern-chart-card,
body:not(.modern-public-body) .compact-card,
body:not(.modern-public-body) .simbay-payment-info-card,
body:not(.modern-public-body) .simbay-tabungan-history-box{
  box-shadow:var(--simbay-fast-shadow) !important;
  will-change:auto !important;
}

/* blur/backdrop berat dikurangi agar akses lebih ringan */
body:not(.modern-public-body) .content-wrapper,
body:not(.modern-public-body) .right-side,
body:not(.modern-public-body) .box,
body:not(.modern-public-body) .panel,
body:not(.modern-public-body) .main-sidebar{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Struktur halaman responsif global */
body:not(.modern-public-body){
  overflow-x:hidden !important;
}

body:not(.modern-public-body) .content-wrapper,
body:not(.modern-public-body) .right-side{
  width:auto !important;
  overflow-x:hidden !important;
}

body:not(.modern-public-body) .content,
body:not(.modern-public-body) .content-header{
  width:100% !important;
  max-width:none !important;
  padding-left:var(--simbay-page-pad) !important;
  padding-right:var(--simbay-page-pad) !important;
}

body:not(.modern-public-body) .content{
  padding-top:8px !important;
}

/* Box/card semua menu lebih konsisten */
body:not(.modern-public-body) .box,
body:not(.modern-public-body) .panel,
body:not(.modern-public-body) .nav-tabs-custom,
body:not(.modern-public-body) .well{
  border-radius:var(--simbay-card-radius) !important;
  margin-bottom:12px !important;
  overflow:hidden !important;
}

body:not(.modern-public-body) .box-header,
body:not(.modern-public-body) .panel-heading{
  padding:10px 13px !important;
}

body:not(.modern-public-body) .box-body,
body:not(.modern-public-body) .panel-body,
body:not(.modern-public-body) .nav-tabs-custom > .tab-content{
  padding:10px 13px !important;
}

/* Form global lebih ringan dan responsif */
body:not(.modern-public-body) .form-group{
  margin-bottom:10px !important;
}

body:not(.modern-public-body) label,
body:not(.modern-public-body) .control-label{
  font-size:12.5px !important;
  line-height:1.35 !important;
}

body:not(.modern-public-body) .form-control,
body:not(.modern-public-body) select.form-control,
body:not(.modern-public-body) textarea.form-control{
  width:100% !important;
  max-width:100% !important;
  height:38px !important;
  min-height:38px !important;
  padding:7px 10px !important;
  font-size:13px !important;
  border-radius:13px !important;
}

body:not(.modern-public-body) textarea.form-control{
  height:auto !important;
  min-height:82px !important;
}

/* Button global lebih proporsional */
body:not(.modern-public-body) .btn{
  min-height:36px !important;
  border-radius:12px !important;
  padding:7px 13px !important;
  font-size:12.5px !important;
  line-height:1.2 !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}

body:not(.modern-public-body) .btn-xs{
  min-height:30px !important;
  padding:5px 9px !important;
  font-size:11.5px !important;
}

body:not(.modern-public-body) .btn-sm{
  min-height:34px !important;
  padding:6px 11px !important;
  font-size:12px !important;
}

/* Tabel semua menu dibuat aman untuk layar kecil */
body:not(.modern-public-body) .table-responsive,
body:not(.modern-public-body) .simbay-table-scroll-x,
body:not(.modern-public-body) .simbay-mobile-table-scroll,
body:not(.modern-public-body) .dataTables_wrapper{
  width:100% !important;
  max-width:100% !important;
  overflow-x:auto !important;
  overflow-y:visible !important;
  -webkit-overflow-scrolling:touch !important;
}

body:not(.modern-public-body) table.table,
body:not(.modern-public-body) table.dataTable{
  width:100% !important;
  margin-bottom:0 !important;
}

body:not(.modern-public-body) .table > thead > tr > th,
body:not(.modern-public-body) .table > tbody > tr > td,
body:not(.modern-public-body) table.dataTable thead th,
body:not(.modern-public-body) table.dataTable tbody td{
  padding:8px 8px !important;
  font-size:12.2px !important;
  line-height:1.35 !important;
  vertical-align:middle !important;
}

/* DataTables lebih compact */
body:not(.modern-public-body) .dataTables_wrapper > .row{
  margin-left:0 !important;
  margin-right:0 !important;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
}

body:not(.modern-public-body) .dataTables_wrapper > .row > [class*="col-"]{
  padding-left:0 !important;
  padding-right:0 !important;
  margin-bottom:6px !important;
}

body:not(.modern-public-body) .dataTables_filter input,
body:not(.modern-public-body) .dataTables_length select{
  height:36px !important;
  border-radius:12px !important;
  font-size:12px !important;
}

body:not(.modern-public-body) .dataTables_info,
body:not(.modern-public-body) .dataTables_paginate{
  font-size:12px !important;
  margin:0 !important;
  padding:0 !important;
}

body:not(.modern-public-body) .pagination{
  margin:0 !important;
}

/* Modal responsif semua menu */
body:not(.modern-public-body) .modal-dialog{
  max-width:min(720px, calc(100vw - 28px)) !important;
  margin:24px auto !important;
}

body:not(.modern-public-body) .modal-content{
  border-radius:22px !important;
  overflow:hidden !important;
}

body:not(.modern-public-body) .modal-body{
  padding:16px 18px !important;
}

body:not(.modern-public-body) .modal-footer{
  padding:12px 18px 16px !important;
}

/* Dashboard tetap besar tapi menyesuaikan layar */
body.modern-dashboard-view .modern-dashboard-shell{
  width:100% !important;
  max-width:none !important;
}

body.modern-dashboard-view .modern-dashboard-grid{
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr)) !important;
  gap:12px !important;
}

body.modern-dashboard-view .modern-dashboard-chart-grid{
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr)) !important;
  gap:12px !important;
}

/* Sidebar lebih ringan dan stabil */
body:not(.modern-public-body) .sidebar-menu > li > a,
body:not(.modern-public-body) .sidebar-menu .treeview-menu > li > a{
  transition:background-color .12s ease, color .12s ease !important;
}

/* Laptop kecil */
@media (max-width: 1366px){
  :root{--simbay-page-pad:10px;}
  body:not(.modern-public-body) .content-header h1{
    font-size:13px !important;
    padding:7px 12px !important;
  }
  body:not(.modern-public-body) .box-header .box-title{
    font-size:14px !important;
  }
}

/* Tablet */
@media (max-width: 991px){
  :root{--simbay-page-pad:10px; --simbay-card-radius:16px;}
  body:not(.modern-public-body) .row{
    margin-left:-5px !important;
    margin-right:-5px !important;
  }
  body:not(.modern-public-body) .row > [class*="col-"]{
    padding-left:5px !important;
    padding-right:5px !important;
  }
  body:not(.modern-public-body) table.table,
  body:not(.modern-public-body) table.dataTable{
    min-width:760px !important;
  }
  body.modern-dashboard-view .modern-dashboard-chart-grid{
    grid-template-columns:1fr !important;
  }
}

/* HP */
@media (max-width: 767px){
  :root{--simbay-page-pad:8px; --simbay-card-radius:15px;}
  body:not(.modern-public-body) .content{
    padding-top:7px !important;
  }
  body:not(.modern-public-body) .content-header{
    padding-top:6px !important;
  }
  body:not(.modern-public-body) .content-header h1{
    width:100% !important;
    font-size:13px !important;
    white-space:normal !important;
  }
  body:not(.modern-public-body) .box-header,
  body:not(.modern-public-body) .panel-heading,
  body:not(.modern-public-body) .box-body,
  body:not(.modern-public-body) .panel-body,
  body:not(.modern-public-body) .nav-tabs-custom > .tab-content{
    padding:9px 10px !important;
  }
  body:not(.modern-public-body) .btn{
    min-height:36px !important;
  }
  body:not(.modern-public-body) .modal-dialog{
    max-width:calc(100vw - 18px) !important;
    margin:12px auto !important;
  }
  body:not(.modern-public-body) .modal-body{
    padding:13px !important;
  }
  body:not(.modern-public-body) table.table,
  body:not(.modern-public-body) table.dataTable{
    min-width:720px !important;
  }
  body.modern-dashboard-view .modern-dashboard-grid,
  body.modern-dashboard-view .modern-dashboard-chart-grid{
    grid-template-columns:1fr !important;
  }
}

/* Mode hemat gerak agar ringan */
@media (prefers-reduced-motion: reduce){
  body:not(.modern-public-body) *,
  body:not(.modern-public-body) *::before,
  body:not(.modern-public-body) *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}


/* Fix v103: dropdown tahun ajaran pada menu Tunggakan Siswa */
body:not(.modern-public-body) select#tahun.form-control{
  font-weight:700 !important;
  color:#0f172a !important;
}


/* Fix v104: notifikasi kosong Tunggakan Siswa */
.simbay-empty-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:28px 18px;
  margin:6px 0;
  border-radius:20px;
  border:1px solid rgba(59,130,246,.18);
  background:linear-gradient(135deg, rgba(37,99,235,.06), rgba(34,211,238,.10));
  text-align:center;
  box-shadow:0 12px 28px rgba(15,23,42,.08);
}
.simbay-empty-state-warning .simbay-empty-state-icon{
  width:72px;
  height:72px;
  border-radius:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#10b981,#22c55e);
  color:#fff;
  font-size:32px;
  box-shadow:0 14px 24px rgba(34,197,94,.26);
}
.simbay-empty-state-title{
  font-size:24px;
  font-weight:800;
  color:#0f172a;
}
.simbay-empty-state-text{
  max-width:720px;
  color:#475569;
  font-size:15px;
  line-height:1.65;
}


/* Fix v107: Filter Tunggakan Siswa presisi dan lebih cepat */
.simbay-tunggakan-filter{
  display:grid;
  grid-template-columns:minmax(220px,1fr) minmax(220px,1fr) auto;
  gap:12px;
  align-items:end;
  padding:14px 16px 16px;
  border-radius:0 0 18px 18px;
  background:linear-gradient(135deg, rgba(239,246,255,.96), rgba(248,250,252,.98));
}

.simbay-tunggakan-filter .simbay-filter-field label{
  display:block;
  margin:0 0 7px;
  font-size:12.5px;
  font-weight:800;
  color:#0f172a;
}

.simbay-tunggakan-filter .form-control{
  height:42px !important;
  border-radius:14px !important;
  font-weight:700 !important;
  border:1px solid #d8e2ef !important;
  box-shadow:0 8px 20px rgba(15,23,42,.05) !important;
}

.simbay-tunggakan-filter .simbay-filter-action{
  display:flex;
  align-items:end;
  justify-content:flex-end;
}

.simbay-tunggakan-filter .btn{
  height:42px !important;
  min-width:132px !important;
  border-radius:14px !important;
  font-weight:800 !important;
  padding:0 18px !important;
  box-shadow:0 10px 22px rgba(34,197,94,.22) !important;
  white-space:nowrap !important;
}

.simbay-tunggakan-filter .btn.is-loading{
  opacity:.88;
  pointer-events:none;
}

.simbay-tunggakan-table{
  margin-bottom:0 !important;
}

.simbay-tunggakan-table th,
.simbay-tunggakan-table td{
  padding:9px 10px !important;
  vertical-align:middle !important;
}

body.simbayTunggakanSubmit .content-wrapper:after{
  content:"Memuat data tunggakan...";
  position:fixed;
  right:24px;
  bottom:82px;
  z-index:2000;
  padding:12px 18px;
  border-radius:18px;
  background:linear-gradient(135deg,#2563eb,#06b6d4);
  color:#fff;
  font-size:13px;
  font-weight:800;
  box-shadow:0 16px 36px rgba(37,99,235,.25);
}

@media (max-width:991px){
  .simbay-tunggakan-filter{
    grid-template-columns:1fr 1fr;
  }
  .simbay-tunggakan-filter .simbay-filter-action{
    grid-column:1 / -1;
  }
  .simbay-tunggakan-filter .btn{
    width:100% !important;
  }
}

@media (max-width:575px){
  .simbay-tunggakan-filter{
    grid-template-columns:1fr;
    padding:12px;
  }
  .simbay-tunggakan-filter .simbay-filter-action{
    grid-column:auto;
  }
}


/* Fix v109: tombol kirim notif WA tunggakan siswa */
.simbay-tunggakan-action{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
}

.simbay-tunggakan-action .btn{
  min-height:34px !important;
  border-radius:12px !important;
  font-size:12px !important;
  font-weight:800 !important;
  padding:7px 11px !important;
  line-height:1 !important;
  white-space:nowrap !important;
}

.simbay-tunggakan-action .simbay-btn-wa{
  background:linear-gradient(135deg,#16a34a,#22c55e) !important;
  border:0 !important;
  box-shadow:0 10px 20px rgba(34,197,94,.20) !important;
  color:#fff !important;
}

.simbay-wa-alert{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 14px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.8);
  background:linear-gradient(135deg,rgba(240,253,244,.96),rgba(236,253,245,.88));
  box-shadow:0 14px 32px rgba(15,23,42,.10);
  animation:simbayWaAlertIn .45s cubic-bezier(.2,.9,.2,1.08) both;
}

@keyframes simbayWaAlertIn{
  from{opacity:0;transform:translateY(-8px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

.simbay-wa-alert-icon{
  width:48px;
  height:48px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 48px;
  font-size:24px;
  color:#fff;
  background:linear-gradient(135deg,#16a34a,#22c55e);
  box-shadow:0 12px 24px rgba(34,197,94,.24);
}

.simbay-wa-alert strong{
  display:block;
  font-size:15px;
  color:#0f172a;
  margin-bottom:3px;
}

.simbay-wa-alert p{
  margin:0;
  color:#475569;
  font-size:13px;
  line-height:1.45;
}

.simbay-wa-alert-warning{
  background:linear-gradient(135deg,rgba(255,251,235,.96),rgba(254,243,199,.88));
}

.simbay-wa-alert-warning .simbay-wa-alert-icon{
  background:linear-gradient(135deg,#f59e0b,#f97316);
  box-shadow:0 12px 24px rgba(249,115,22,.24);
}

.simbay-wa-alert-danger{
  background:linear-gradient(135deg,rgba(254,242,242,.96),rgba(255,228,230,.88));
}

.simbay-wa-alert-danger .simbay-wa-alert-icon{
  background:linear-gradient(135deg,#ef4444,#f43f5e);
  box-shadow:0 12px 24px rgba(244,63,94,.24);
}

@media (max-width:767px){
  .simbay-tunggakan-action{
    justify-content:flex-start;
  }
  .simbay-tunggakan-action .btn{
    width:100%;
  }
  .simbay-wa-alert{
    align-items:flex-start;
  }
}


/* Fix v110: Dashboard Tunggakan Pembayaran + Notifikasi Masuk */
body.modern-dashboard-view .modern-stat-card.stat-tunggakan{
  background:linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,247,237,.92)) !important;
  border:1px solid rgba(251,146,60,.18) !important;
}

body.modern-dashboard-view .modern-stat-card.stat-tunggakan .modern-stat-icon{
  background:linear-gradient(135deg,#f97316 0%,#ef4444 100%) !important;
  color:#fff !important;
  box-shadow:0 12px 26px rgba(239,68,68,.23) !important;
}

body.modern-dashboard-view .modern-stat-card.stat-tunggakan em{
  display:block;
  margin-top:4px;
  color:#b45309;
  font-size:11px;
  font-style:normal;
  font-weight:800;
}

.simbay-dashboard-welcome{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:86px 18px 18px;
  background:rgba(15,23,42,.18);
  opacity:0;
  transition:opacity .22s ease;
  pointer-events:none;
}

.simbay-dashboard-welcome.is-show{
  display:flex;
  pointer-events:auto;
}

.simbay-dashboard-welcome.is-ready{
  opacity:1;
}

.simbay-dashboard-welcome-card{
  position:relative;
  width:min(640px, calc(100vw - 28px));
  display:grid;
  grid-template-columns:74px 1fr auto;
  gap:16px;
  align-items:center;
  padding:20px 22px;
  border-radius:28px;
  color:#fff;
  background:
    radial-gradient(circle at 92% 10%, rgba(255,255,255,.22), transparent 32%),
    linear-gradient(135deg,#1e3a8a 0%,#2563eb 48%,#06b6d4 100%);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 26px 70px rgba(15,23,42,.30);
  transform:translateY(-18px) scale(.96);
  animation:simbayWelcomePop .58s cubic-bezier(.2,.9,.2,1.1) forwards;
  overflow:hidden;
}

.simbay-dashboard-welcome-card:before{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  right:-84px;
  top:-88px;
  border-radius:50%;
  background:rgba(255,255,255,.14);
}

@keyframes simbayWelcomePop{
  to{transform:translateY(0) scale(1)}
}

.simbay-dashboard-welcome-icon{
  width:74px;
  height:74px;
  border-radius:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:32px;
  color:#fff;
  background:linear-gradient(135deg,#f97316,#ef4444);
  box-shadow:0 18px 38px rgba(239,68,68,.35);
  animation:simbayBellPulse 1.6s ease-in-out infinite;
}

@keyframes simbayBellPulse{
  0%,100%{transform:scale(1) rotate(0deg)}
  50%{transform:scale(1.06) rotate(-4deg)}
}

.simbay-dashboard-welcome-content{
  position:relative;
  z-index:1;
}

.simbay-dashboard-welcome-content small{
  display:inline-flex;
  padding:6px 12px;
  border-radius:999px;
  margin-bottom:8px;
  background:rgba(255,255,255,.15);
  font-size:12px;
  font-weight:900;
  letter-spacing:.4px;
  text-transform:uppercase;
}

.simbay-dashboard-welcome-content h3{
  margin:0 0 6px;
  font-size:24px;
  line-height:1.15;
  font-weight:900;
}

.simbay-dashboard-welcome-content p{
  margin:0;
  font-size:14px;
  line-height:1.55;
  color:rgba(255,255,255,.92);
}

.simbay-dashboard-welcome-content strong{
  display:inline-flex;
  margin-top:10px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  font-size:14px;
  font-weight:900;
}

.simbay-dashboard-welcome-action{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  padding:10px 15px;
  border-radius:15px;
  color:#0f172a !important;
  background:#fff;
  font-size:13px;
  font-weight:900;
  box-shadow:0 14px 28px rgba(15,23,42,.18);
  white-space:nowrap;
}

.simbay-dashboard-welcome-close{
  position:absolute;
  right:14px;
  top:12px;
  z-index:2;
  width:34px;
  height:34px;
  border-radius:50%;
  border:0;
  background:rgba(255,255,255,.16);
  color:#fff;
  font-size:24px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
}

@media (max-width:767px){
  .simbay-dashboard-welcome{
    padding-top:72px;
  }
  .simbay-dashboard-welcome-card{
    grid-template-columns:58px 1fr;
    padding:18px;
    gap:12px;
  }
  .simbay-dashboard-welcome-icon{
    width:58px;
    height:58px;
    border-radius:18px;
    font-size:26px;
  }
  .simbay-dashboard-welcome-action{
    grid-column:1 / -1;
    width:100%;
  }
  .simbay-dashboard-welcome-content h3{
    font-size:20px;
  }
}


/* Fix v111: kirim notif WA tunggakan ke nomor ortu dan nomor siswa */
.simbay-wa-alert p{
  word-break:break-word;
}


/* Fix v112: Notifikasi login animasi icon senyum + rekap tunggakan per kelas */
.simbay-login-toast{
  position:fixed;
  top:76px;
  right:22px;
  z-index:100000;
  opacity:0;
  transform:translateY(-16px) scale(.96);
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.simbay-login-toast.is-show{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.simbay-login-toast-card{
  position:relative;
  width:min(430px, calc(100vw - 28px));
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  border-radius:24px;
  color:#fff;
  background:radial-gradient(circle at 90% 10%, rgba(255,255,255,.26), transparent 32%), linear-gradient(135deg,#16a34a 0%,#22c55e 45%,#06b6d4 100%);
  box-shadow:0 22px 54px rgba(15,23,42,.24);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.32);
}
.simbay-login-toast-icon{
  width:62px;
  height:62px;
  border-radius:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 62px;
  font-size:34px;
  background:rgba(255,255,255,.22);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), 0 12px 26px rgba(15,23,42,.16);
  animation:simbaySmileBounce 1.45s ease-in-out infinite;
}
@keyframes simbaySmileBounce{
  0%,100%{transform:translateY(0) rotate(0deg)}
  45%{transform:translateY(-5px) rotate(-4deg)}
  70%{transform:translateY(1px) rotate(3deg)}
}
.simbay-login-toast-text small{
  display:inline-flex;
  padding:5px 10px;
  border-radius:999px;
  margin-bottom:6px;
  background:rgba(255,255,255,.18);
  font-size:11px;
  font-weight:900;
  letter-spacing:.5px;
  text-transform:uppercase;
}
.simbay-login-toast-text strong{
  display:block;
  font-size:17px;
  line-height:1.25;
  margin-bottom:4px;
  font-weight:900;
}
.simbay-login-toast-text span{
  display:block;
  color:rgba(255,255,255,.92);
  font-size:13px;
  line-height:1.45;
  font-weight:700;
}
.simbay-login-toast-close{
  position:absolute;
  right:10px;
  top:9px;
  width:28px;
  height:28px;
  border:0;
  border-radius:50%;
  color:#fff;
  background:rgba(255,255,255,.18);
  font-size:20px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.simbay-rekap-kelas-note{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 12px;
  padding:10px 14px;
  border-radius:999px;
  color:#1e3a8a;
  background:linear-gradient(135deg,rgba(219,234,254,.95),rgba(224,242,254,.9));
  font-size:12.5px;
  font-weight:800;
}
.simbay-kelas-count{
  display:inline-flex;
  min-width:84px;
  justify-content:center;
  padding:7px 12px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,#2563eb,#06b6d4);
  font-weight:900;
}
.simbay-tunggakan-kelas-table td,
.simbay-tunggakan-kelas-table th{
  vertical-align:middle !important;
}
@media(max-width:767px){
  .simbay-login-toast{top:66px;right:10px;left:10px;}
  .simbay-login-toast-card{width:100%;padding:14px;}
  .simbay-login-toast-icon{width:54px;height:54px;flex-basis:54px;font-size:30px;}
  .simbay-rekap-kelas-note{border-radius:16px;align-items:flex-start;}
}


/* Fix v115: dashboard cepat - tunggakan diload setelah halaman tampil */
body.modern-dashboard-view #dashboardTunggakanTotal{
  display:inline-block;
  min-width:92px;
}

body.modern-dashboard-view #dashboardTunggakanTotal:empty::after{
  content:"Memuat...";
}

body.modern-dashboard-view #dashboardTunggakanTotal{
  animation:simbayTunggakanLoadPulse 1.25s ease-in-out infinite;
}

@keyframes simbayTunggakanLoadPulse{
  0%,100%{opacity:1}
  50%{opacity:.62}
}


/* Fix v117: Tunggakan All Ajaran dan sinkron daftar-cetak */
.simbay-tunggakan-table tfoot th{
  background:#f8fafc !important;
  font-weight:900 !important;
}


/* Fix v118: Tunggakan All Ajaran dibuat ringan dan tidak error */
.simbay-tunggakan-kelas-table td,
.simbay-tunggakan-kelas-table th{
  vertical-align:middle !important;
}


/* Fix v119: Tunggakan All Ajaran anti error 500 */
.simbay-tunggakan-kelas-table td,
.simbay-tunggakan-kelas-table th{
  vertical-align:middle !important;
}


/* Fix v120: tombol Export Excel di menu Tunggakan */
.simbay-export-excel-btn{
  margin-left:8px !important;
  border:0 !important;
  border-radius:12px !important;
  font-weight:800 !important;
  padding:7px 12px !important;
  background:linear-gradient(135deg,#16a34a,#22c55e) !important;
  color:#fff !important;
  box-shadow:0 10px 20px rgba(34,197,94,.20) !important;
}

.simbay-export-excel-btn .fa{
  margin-right:5px;
}


/* Fix v121: tombol Export Excel selalu muncul, elegan, dan presisi */
.simbay-filter-action-group{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  width:100%;
}

.simbay-tunggakan-filter .simbay-filter-action{
  display:flex !important;
  align-items:end !important;
  justify-content:flex-end !important;
}

.simbay-tunggakan-filter .simbay-filter-action .simbay-filter-action-group .btn{
  height:42px !important;
  min-width:132px !important;
  border-radius:14px !important;
  font-weight:900 !important;
  padding:0 16px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  white-space:nowrap !important;
  border:0 !important;
}

.simbay-export-excel-btn{
  background:linear-gradient(135deg,#16a34a 0%,#22c55e 55%,#0ea5e9 100%) !important;
  color:#fff !important;
  box-shadow:0 12px 25px rgba(34,197,94,.22) !important;
  position:relative;
  overflow:hidden;
}

.simbay-export-excel-btn:before{
  content:"";
  position:absolute;
  inset:-40% auto auto -40%;
  width:55%;
  height:180%;
  background:rgba(255,255,255,.28);
  transform:rotate(24deg);
  transition:.45s ease;
}

.simbay-export-excel-btn:hover:before{
  left:115%;
}

.simbay-export-excel-btn:hover,
.simbay-export-excel-btn:focus{
  color:#fff !important;
  transform:translateY(-1px);
}

.simbay-export-excel-btn .fa{
  font-size:15px !important;
  margin:0 !important;
}

@media (max-width:991px){
  .simbay-filter-action-group{
    justify-content:stretch;
  }
  .simbay-tunggakan-filter .simbay-filter-action .simbay-filter-action-group .btn{
    flex:1 1 160px;
  }
}

@media (max-width:575px){
  .simbay-filter-action-group{
    flex-direction:column;
  }
  .simbay-tunggakan-filter .simbay-filter-action .simbay-filter-action-group .btn{
    width:100% !important;
    flex:auto;
  }
}

/* Fix v122: mode aman anti Error 500 */
.simbay-kelas-count{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  background:#eff6ff;
  color:#1d4ed8;
  font-weight:800;
}