*{box-sizing:border-box}
body {
  margin: 0;
  padding: 0;
  padding-bottom: 80px; /* Lebih tipis, pas buat batas navbar */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #F2F2F7;
  color: #1c1c1e;
  min-height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}


.container {
  max-width: 720px;
  margin: auto;
  padding: 16px;
  height: auto;
  display: block;
}

.header{font-size:22px;font-weight:700;margin-bottom:4px;text-align:center}
.sub{opacity:.7;font-size:13px;margin-bottom:16px;text-align:center}
.logo{display:block;margin:auto;width:80px;height:80px;object-fit:contain;margin-bottom:10px}
.card{
background:#ffffff;
border-radius:22px;
padding:16px;
margin-bottom:14px;

box-shadow:
0 12px 30px rgba(0,0,0,.10),
0 4px 10px rgba(0,0,0,.05);

border:1px solid #E9E9EC;

transition:all .2s ease;
}

.card:hover{
transform:translateY(-3px);
box-shadow:
0 16px 35px rgba(0,0,0,.12),
0 6px 12px rgba(0,0,0,.08);
}

.chart-card{
margin-top:18px;
}
#kasChart{
margin-top:6px;
background:none;
box-shadow:none;
padding:0;
}
.stats{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
width:100%;
}

.stats > *{
min-width:0;
}

.stat{
background:linear-gradient(145deg,#ffffff,#f1f1f1);
border-radius:18px;
padding:14px;
text-align:center;

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;

height:95px;
}

.stat:hover{
transform:translateY(-3px);
box-shadow:
10px 10px 20px rgba(0,0,0,.12),
-4px -4px 8px rgba(255,255,255,1);
transition:all .2s ease;
}
.stat h2{
font-size:17px;
white-space:nowrap;
}

.stat p{
font-size:13px;
line-height:1.2;
margin:0;
}
.income{color:#34C759}
.expense{color:#FF3B30}
.balance{color:#007AFF}
.paidtxt{color:#22c55e}
.unpaidtxt{color:#ef4444}
.pendingtxt{color:#fbbf24}
.month-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:8px;
margin-top:12px;
}

.month-box{
background:#020617;
border-radius:8px;
padding:8px;
text-align:center;
font-size:11px;
}

.month-box span{
display:block;
font-size:16px;
margin-top:2px;
}

.month-paid{color:#22c55e}
.month-unpaid{color:#ef4444}
label{font-size:13px;opacity:.8}

input,select{
width:100%;
padding:12px 14px;
margin-top:6px;
margin-bottom:14px;

border-radius:14px;
border:1px solid #E5E7EB;

background:#F2F2F7;
color:#111;

font-size:14px;

box-shadow:inset 0 1px 2px rgba(0,0,0,.04);
}
input:focus, select:focus{
outline:none;
box-shadow:
0 0 0 2px rgba(0,122,255,.25),
inset 0 1px 2px rgba(0,0,0,.04);
}
button{width:100%;padding:12px;border:none;border-radius:10px;background:#22c55e;color:white;font-weight:600;font-size:14px;cursor:pointer}
button:hover{background:#16a34a}
.blueBtn{background:#3b82f6}
.blueBtn:hover{background:#2563eb}
.confirmBtn{background:#f59e0b;margin-top:6px}
.confirmBtn:hover{background:#d97706}

.amount{
font-weight:700;
font-size:16px;
}
.income{
color:#16a34a;
}
.expense{
color:#ef4444;
}
.date{font-size:12px;opacity:.6}
.status{font-size:12px;margin-top:4px}
.dropdown-box{
background:#ffffff;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,.08);
max-height:150px;
overflow:auto;
display:none;
margin-top:-8px;
margin-bottom:12px;
}
.dropdown-item{
padding:10px;
cursor:pointer;
color:#111;
}

.dropdown-item:hover{
background:#F2F2F7;
}
/* dropdown bulan premium */

.bulanDropdown{
position:relative;
margin-bottom:12px;
}

.bulanSelected{
background:#1f2937;
padding:12px;
border-radius:10px;
display:flex;
justify-content:space-between;
cursor:pointer;
}

.bulanList{
display:none;
position:absolute;
width:100%;
background:#ffffff;
border-radius:10px;
margin-top:6px;
box-shadow:0 6px 20px rgba(0,0,0,.5);
overflow:hidden;
z-index:10;
}

.bulanList div{
padding:10px;
cursor:pointer;
}

.bulanList div:hover{
background:#1f2937;
}
/* ===== DROPDOWN BULAN PREMIUM ===== */

#bulanBayar{
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
width:100%;
padding:12px 42px 12px 14px;
border-radius:12px;
border:1px solid rgba(255,255,255,.08);
background:linear-gradient(145deg,#020617,#0f172a);
color:#e5e7eb;
font-size:14px;
font-weight:500;
box-shadow:0 4px 12px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
transition:all .2s ease;

background-image:
linear-gradient(45deg,transparent 50%,#9ca3af 50%),
linear-gradient(135deg,#9ca3af 50%,transparent 50%);
background-position:
calc(100% - 18px) calc(50% - 3px),
calc(100% - 12px) calc(50% - 3px);
background-size:6px 6px;
background-repeat:no-repeat;
}

#bulanBayar:hover{
border-color:rgba(255,255,255,.18);
box-shadow:0 6px 16px rgba(0,0,0,.45);
}

#bulanBayar:focus{
outline:none;
border-color:#22c55e;
box-shadow:
0 0 0 2px rgba(34,197,94,.25),
0 6px 16px rgba(0,0,0,.45);
}
.member-month{
background:#020617;
border-radius:10px;
padding:10px;
margin-top:10px;
max-width:100%;
overflow:hidden;
}

.member-name{
font-size:13px;
font-weight:600;
margin-bottom:6px;
}

.member-grid{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-top:6px;
}

.month-dot{
width:20px;
height:20px;
display:flex;
align-items:center;
justify-content:center;
font-size:11px;
border-radius:5px;
flex-shrink:0;
}

.month-paid{
background:#16a34a;
}

.month-unpaid{
background:#7f1d1d;
}.iuran-table{
width:max-content;
border-collapse:collapse;
margin-top:10px;
font-size:12px;
}

.iuran-table th{
background:#F2F2F7;
font-weight:600;
}
.iuran-table td{
padding:6px 10px;
text-align:center;
white-space:nowrap;
min-width:40px;
}
.iuran-table{
width:max-content;
border-collapse:collapse;
margin-top:10px;
font-size:12px;
}
.iuran-table th:first-child{
position:sticky;
left:0;
background:#f6f6f7;
z-index:3;
}
.iuran-name{
position:sticky;
left:0;
background:#f6f6f7;
z-index:2;
box-shadow:4px 0 8px rgba(0,0,0,.05);
}

.iuran-paid{
color:#22c55e;
font-weight:700;
}

.iuran-unpaid{
color:#ef4444;
font-weight:700;
}#anggotaQR{
transition:all .15s ease;
}
.bulanSelected{
border-radius:16px;
transition:all .15s ease;
outline:none;
}

.bulanSelected:active{
box-shadow:0 0 0 3px rgba(0,122,255,.25);
border-radius:16px;
}

.bulanSelected:focus{
outline:none;
}
.bulanSelected{
border-radius:16px;
transition:all .15s ease;
outline:none;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.top-header{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
margin-bottom:24px;
text-align:left;
}
.top-header div{
display:flex;
flex-direction:column;
justify-content:space-between;
height:70px;
text-align:center;
}
.logo{
width:70px;
height:70px;
object-fit:contain;
margin:0;
}

.header{
font-size:20px;
font-weight:700;
line-height:1.1;
}

.sub{
font-size:13px;
opacity:.7;
line-height:1.1;
}

.running-text{
width:100%;
overflow:hidden;
background:#ffffff;
border-radius:7px;
margin-bottom:18px;
border:1px solid #E5E7EB;
padding:8px 0;

box-shadow:0 8px 20px rgba(0,0,0,.06);
}

.running-track{
display:inline-flex;
animation:runText 28s linear infinite;
}

.running-track span{
white-space:nowrap;
padding-right:60px;
font-size:12px;
opacity:.75;
}

@keyframes runText{
0%{
transform:translateX(0);
}
100%{
transform:translateX(-50%);
}
}

@keyframes runTextStart{
0%{
transform:translateX(100%);
}
100%{
transform:translateX(0);
}
}

.run-item{
padding-right:60px;
}

.bulanList{
transition:all .15s ease;
}
select:invalid{
color:#9ca3af;
}

#btnBuktiUrunan:disabled{
background:#9ca3af;
color:#111827;
cursor:not-allowed;
opacity:0.8;
}

.page{display:none}
.page.active{display:block}

/* ===== NAVBAR ===== */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 70px;
  /* Efek Kaca Premium */
  background: rgba(255, 255, 255, 0.8); 
  backdrop-filter: blur(20px); 
  -webkit-backdrop-filter: blur(20px);
  
  border-top: 0.5px solid rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 9999;
  
  /* Biar pas di HP layar poni/bezel tipis nggak kepotong */
  padding-bottom: env(safe-area-inset-bottom);
}


.bottom-nav a{
  flex:1; /* isi rata antar menu */
  text-align:center;
  text-decoration:none;
  color:#9ca3af;
  font-size:11px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0px; 
  line-height:1;
}

/* ICON */
.bottom-nav a span{
  font-size:26px;
  margin-bottom:0;
  transition:.2s;
}

/* HOVER */
.bottom-nav a:hover{
  color:#111;
  transform:translateY(-2px);
}

/* ACTIVE */
.bottom-nav a.active{
  color:#22c55e;
}

.bottom-nav a.active span{
  transform:translateY(-2px);
}

/* ===== 🔥 TOMBOL TENGAH (FIX ANTI OVAL) ===== */
.bottom-nav .nav-center{
  flex:0 0 auto !important;

  width:58px !important;
  height:58px !important;
  aspect-ratio:1/1;

  position:relative;
  top:-18px;

  background:#22c55e;
  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;

  border:4px solid rgba(255,255,255,0.9);
  box-shadow:0 6px 15px rgba(0,0,0,0.2);

  z-index:1000;
}

/* ICON TENGAH */
.nav-center span{
  font-size:28px; /* sedikit lebih besar biar balance sama tombol */
  color:white;
}

/* KLIK */
.nav-center:active{
  transform:scale(0.9);
}

/* ===== BODY FIX ===== */


.filter-bar{display:flex;gap:6px;overflow-x:auto;margin-bottom:8px;padding:2px 0}
.filter-btn{
width:auto !important;
background:#F2F2F7;
color:#111;
border:none;
padding:8px 12px;
border-radius:20px;
font-size:12px;
white-space:nowrap;
flex-shrink:0;
box-shadow:0 1px 2px rgba(0,0,0,.06);
transition:.15s;
}
.filter-btn:active{
transform:scale(.96);
background:#E5E5EA;
}
#adminPassword:focus{
outline:none;
box-shadow:0 0 0 2px rgba(0,122,255,.25);
}
#alertBox{
animation:popupScale .18s ease;
}

@keyframes popupScale{
from{
transform:scale(.9);
opacity:0;
}
to{
transform:scale(1);
opacity:1;
}
}
#alertOverlay{
transition:opacity .25s ease;
}
button:active{
transform:scale(0.96);
transition:transform .08s ease;
}
button{
transition:transform .12s ease, box-shadow .12s ease;
}

button:hover{
transform:translateY(-2px);
box-shadow:0 6px 14px rgba(0,0,0,.12);
}

#clockBox{
display:flex;
justify-content:space-between;
align-items:center;

background:#ffffff;
border-radius:7px;
padding:8px 12px;
margin-bottom:12px;

box-shadow:0 4px 12px rgba(0,0,0,.06);
border:1px solid #E9E9EC;

font-size:13px;
}

#clockDate{
opacity:.75;
}

#clockTime{
font-weight:600;
font-variant-numeric:tabular-nums;
}

#btnBukti:disabled{
background:#d1d5db;
color:#6b7280;
cursor:not-allowed;
box-shadow:none;
transform:none;
}

.laporan-bulan-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:6px;
padding:8px;
}

.laporan-bulan-grid div{
padding:8px 6px;
font-size:13px;
cursor:pointer;
border-radius:8px;
text-align:center;
}

.laporan-bulan-grid div:hover{
background:#F2F2F7;
}

.laporan-bulan-grid div.active{
background:#007AFF;
color:white;
font-weight:600;
}

#customDateBox {
  background:#F2F2F7;
  border-radius:12px;
  margin-top:10px;
}

#rangePicker {
  width:100%;
  padding:10px;
  border:none;
  border-radius:8px;
  background:#ffffff;
  color:#111;
  border:1px solid #E5E7EB;
}

.filter-wrapper{
  background:#ffffff;
  border-radius:20px;
  padding:12px;
  margin-bottom:14px;

  box-shadow:
    0 6px 18px rgba(0,0,0,.06);

  border:1px solid #E9E9EC;
}

#customDateBox{
  display:none;
  margin-top:10px;
  padding:10px;
  border-radius:12px;
  background:#F2F2F7;
}

.custom-label{
  font-size:12px;
  opacity:.6;
  margin-bottom:6px;
}

.history-card{
  background:#ffffff;
  border-radius:20px;
  padding:14px 16px;
  margin-bottom:12px;

  display:flex;
  justify-content:space-between;
  align-items:center;

  box-shadow:
    0 8px 20px rgba(0,0,0,0.06),
    0 2px 6px rgba(0,0,0,0.04);

  border:1px solid rgba(0,0,0,0.04);

  transition:all .2s ease;
}

.history-card:active{
  transform:scale(0.98);
}

.history-left{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.history-date{
  font-size:12px;
  opacity:.5;
}

.history-name{
  font-size:15px;
  font-weight:600;
}

.history-desc{
  font-size:13px;
  color:#22c55e;
}

.history-right{
  text-align:right;
}

.history-amount{
  font-weight:700;
  font-size:16px;
  color:#16a34a;
}

.history-month{
  font-size:12px;
  opacity:.5;
}