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

/* ===== VARIABEL TEMA ===== */
:root {
  --primary:#2E7D32; --primary-light:#4CAF50; --primary-dark:#1B5E20;
  --primary-alpha:rgba(46,125,50,0.12);
  --accent:#FF8F00; --danger:#C62828; --success:#2E7D32;
  --bg-main:#F5F7F5; --bg-card:#FFFFFF; --bg-surface:#EDF4EE; --bg-input:#F0F7F0;
  --text-primary:#1B2E1C; --text-secondary:#4A6741; --text-muted:#7A9E78;
  --border:#D8E8D8; --border-focus:#4CAF50;
  --shadow-sm:0 2px 8px rgba(0,0,0,.07); --shadow-md:0 4px 20px rgba(0,0,0,.11); --shadow-lg:0 8px 32px rgba(0,0,0,.16);
  --gradient-primary:linear-gradient(135deg,#1B5E20,#2E7D32,#43A047);
  --gradient-card:linear-gradient(135deg,#0D2810,#1B5E20,#2E7D32);
  --nav-h:60px; --bottom-nav-h:68px;
  --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-xl:24px; --radius-full:9999px;
  --tr:0.3s cubic-bezier(.4,0,.2,1); --tr-fast:0.15s cubic-bezier(.4,0,.2,1);
  --font:'Poppins',sans-serif;
}
[data-theme="dark"] {
  --primary:#66BB6A; --primary-light:#81C784; --primary-dark:#43A047;
  --primary-alpha:rgba(102,187,106,0.14);
  --accent:#FFB74D; --danger:#EF9A9A;
  --bg-main:#0F1510; --bg-card:#1A2218; --bg-surface:#1F2B1E; --bg-input:#243320;
  --text-primary:#E8F5E9; --text-secondary:#A5C8A3; --text-muted:#6A9E68;
  --border:#2A3D28; --border-focus:#66BB6A;
  --shadow-sm:0 2px 8px rgba(0,0,0,.35); --shadow-md:0 4px 20px rgba(0,0,0,.45); --shadow-lg:0 8px 32px rgba(0,0,0,.55);
  --gradient-card:linear-gradient(135deg,#0A1F0C,#1B5E20,#2E7D32);
}

/* ===== RESET ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--bg-main);color:var(--text-primary);min-height:100vh;transition:background var(--tr),color var(--tr);overflow-x:hidden}
a{color:var(--primary);text-decoration:none}
img{max-width:100%;display:block}
input,button,select,textarea{font-family:var(--font)}

/* ===== TYPOGRAPHY ===== */
h1{font-size:1.625rem;font-weight:700;line-height:1.25}
h2{font-size:1.25rem;font-weight:600;line-height:1.3}
h3{font-size:1rem;font-weight:600}
p{line-height:1.6}
.text-sm{font-size:.8125rem} .text-xs{font-size:.75rem} .text-lg{font-size:1.125rem}
.text-muted{color:var(--text-muted)} .text-secondary{color:var(--text-secondary)}
.text-primary-c{color:var(--primary)} .text-accent{color:var(--accent)} .text-danger{color:var(--danger)}
.font-bold{font-weight:700} .font-semibold{font-weight:600} .font-medium{font-weight:500}

/* ===== LAYOUT ===== */
.app-layout{display:flex;flex-direction:column;min-height:100vh;padding-top:var(--nav-h);padding-bottom:var(--bottom-nav-h)}
.page-content{flex:1;padding:1rem;max-width:480px;margin:0 auto;width:100%}
.page-content.admin{max-width:860px}

/* ===== TOP APP BAR ===== */
.top-bar{position:fixed;top:0;left:0;right:0;height:var(--nav-h);background:var(--bg-card);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 1rem;gap:.75rem;z-index:200;box-shadow:var(--shadow-sm);transition:background var(--tr),border-color var(--tr)}
.top-bar-brand{display:flex;align-items:center;gap:.625rem;flex:1;min-width:0}
.top-bar-icon{width:36px;height:36px;background:var(--gradient-primary);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.125rem;flex-shrink:0}
.top-bar-title{font-size:.9375rem;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-bar-sub{font-size:.6875rem;color:var(--text-muted);display:block;line-height:1.2}
.top-bar-actions{display:flex;align-items:center;gap:.375rem;flex-shrink:0}

/* Icon Button */
.icon-btn{width:38px;height:38px;border-radius:var(--radius-full);border:none;background:var(--bg-surface);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--tr-fast);flex-shrink:0}
.icon-btn:hover{background:var(--primary-alpha);color:var(--primary);transform:scale(1.05)}
.icon-btn:active{transform:scale(.95)}

/* Year Selector */
.year-select-wrap{display:flex;align-items:center;gap:.25rem;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-full);padding:.3rem .75rem;cursor:pointer;transition:all var(--tr-fast);font-size:.8125rem;font-weight:500;color:var(--text-primary)}
.year-select-wrap:hover{border-color:var(--primary);color:var(--primary)}
.year-select-wrap select{background:transparent;border:none;outline:none;color:inherit;font-family:var(--font);font-size:inherit;font-weight:inherit;cursor:pointer}

/* Avatar */
.avatar{width:36px;height:36px;border-radius:var(--radius-full);background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;font-size:.8125rem;font-weight:700;color:#fff;cursor:pointer;flex-shrink:0;transition:transform var(--tr-fast);border:2px solid var(--primary-alpha)}
.avatar:hover{transform:scale(1.08)}

/* ===== BOTTOM NAVIGATION ===== */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:var(--bottom-nav-h);background:var(--bg-card);border-top:1px solid var(--border);display:flex;align-items:stretch;z-index:200;box-shadow:0 -4px 20px rgba(0,0,0,.08);transition:background var(--tr),border-color var(--tr)}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;padding:.5rem 0;cursor:pointer;text-decoration:none;color:var(--text-muted);transition:color var(--tr-fast);position:relative;-webkit-tap-highlight-color:transparent}
.nav-item.active{color:var(--primary)}
.nav-icon-wrap{position:relative;width:28px;height:28px;display:flex;align-items:center;justify-content:center}
.nav-pip{position:absolute;top:-1px;width:20px;height:3px;background:var(--primary);border-radius:0 0 4px 4px;left:50%;transform:translateX(-50%) scaleX(0);transition:transform var(--tr)}
.nav-item.active .nav-pip{transform:translateX(-50%) scaleX(1)}
.nav-item.active .nav-icon-wrap svg{transform:translateY(-1px)}
.nav-label{font-size:.625rem;font-weight:500;letter-spacing:.02em;line-height:1}

/* ===== FAB ===== */
.fab{position:fixed;bottom:calc(var(--bottom-nav-h) + 1rem);right:1.25rem;width:54px;height:54px;border-radius:var(--radius-full);background:var(--gradient-primary);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 18px rgba(46,125,50,.45);transition:all var(--tr);z-index:150;text-decoration:none}
.fab:hover{transform:translateY(-3px) scale(1.06);box-shadow:0 8px 26px rgba(46,125,50,.55)}
.fab:active{transform:scale(.95)}
.fab svg{transition:transform var(--tr)}
.fab:hover svg{transform:rotate(90deg)}

/* ===== CARDS ===== */
.card{background:var(--bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--border);overflow:hidden;transition:background var(--tr),border-color var(--tr)}
.card-body{padding:1.125rem}
.card-header{padding:.875rem 1.125rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.card-header h3{font-size:.9375rem}

/* Saldo Card Gradient */
.saldo-card{background:var(--gradient-card);border:none;color:#fff;position:relative;overflow:hidden}
.saldo-card::before{content:'';position:absolute;top:-30px;right:-30px;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.06)}
.saldo-card::after{content:'';position:absolute;bottom:-40px;left:-20px;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.04)}
.saldo-label{font-size:.75rem;font-weight:500;opacity:.8;letter-spacing:.05em;text-transform:uppercase}
.saldo-amount{font-size:1.875rem;font-weight:700;letter-spacing:-.02em;margin:.25rem 0}
.saldo-sub{font-size:.75rem;opacity:.75}

/* Progress Bar */
.progress-wrap{margin-top:.875rem}
.progress-label{display:flex;justify-content:space-between;font-size:.75rem;opacity:.85;margin-bottom:.375rem}
.progress-bar{height:8px;background:rgba(255,255,255,.2);border-radius:var(--radius-full);overflow:hidden}
.progress-fill{height:100%;border-radius:var(--radius-full);background:rgba(255,255,255,.9);transition:width 1s cubic-bezier(.4,0,.2,1)}

/* Progress Ring */
.progress-ring-wrap{display:flex;flex-direction:column;align-items:center;gap:.5rem;position:relative}
.progress-ring-svg{ /* Hapus transform di sini */ }
.progress-ring-track, .progress-ring-fill {
  transform: rotate(-90deg);
  transform-origin: center;
}
.progress-ring-track{fill:none;stroke:var(--bg-surface);stroke-width:8}
.progress-ring-fill{fill:none;stroke:var(--primary);stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1)}
.progress-ring-text{font-size:1.25rem;font-weight:700;color:var(--text-primary)}

/* Stat Cards */
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1rem;text-align:center;transition:all var(--tr-fast)}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--primary-alpha)}
.stat-icon{width:40px;height:40px;border-radius:var(--radius-md);background:var(--primary-alpha);display:flex;align-items:center;justify-content:center;margin:0 auto .625rem;color:var(--primary)}
.stat-value{font-size:1.25rem;font-weight:700;color:var(--text-primary)}
.stat-label{font-size:.7rem;color:var(--text-muted);margin-top:.15rem}

/* ===== LIST ITEMS ===== */
.list-item{display:flex;align-items:center;gap:.875rem;padding:1rem 1.25rem;border-bottom:1px solid var(--border);transition:background var(--tr-fast)}
.list-item:last-child{border-bottom:none}
.list-avatar{width:40px;height:40px;border-radius:var(--radius-full);background:var(--primary-alpha);display:flex;align-items:center;justify-content:center;color:var(--primary);font-weight:700;font-size:.875rem;flex-shrink:0}
.list-body{flex:1;min-width:0}
.list-title{font-size:.875rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
.list-sub{font-size:.75rem;color:var(--text-muted);margin-top:.1rem}
.list-end{text-align:right;flex-shrink:0}
.list-amount{font-size:.9375rem;font-weight:700;color:var(--primary)}
.list-date{font-size:.7rem;color:var(--text-muted)}

/* ===== TABLE STYLES ===== */
table { width: 100%; border-collapse: collapse; }
th { font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); }
th, td { padding: 1rem .75rem; vertical-align: middle; }
th:first-child, td:first-child { padding-left: 1.5rem; } /* Jarak kiri ekstra */
th:last-child, td:last-child { padding-right: 1.5rem; } /* Jarak kanan ekstra */
tr.border-bottom { border-bottom: 1px solid var(--border); }
tr:last-child { border-bottom: none; }

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.5rem;border-radius:var(--radius-full);font-family:var(--font);font-size:.9rem;font-weight:600;cursor:pointer;border:none;transition:all var(--tr-fast);text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--gradient-primary);color:#fff;box-shadow:0 4px 14px rgba(46,125,50,.35)}
.btn-primary:hover{box-shadow:0 6px 20px rgba(46,125,50,.5);transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--primary);border:2px solid var(--primary)}
.btn-outline:hover{background:var(--primary-alpha)}
.btn-danger{background:#C62828;color:#fff}
.btn-sm{padding:.5rem 1rem;font-size:.8125rem}
.btn-block{width:100%}
.btn-icon{width:38px;height:38px;padding:0;border-radius:var(--radius-md)}

/* ===== FORMS ===== */
.form-group{margin-bottom:1rem}
.form-label{display:block;font-size:.8125rem;font-weight:600;color:var(--text-secondary);margin-bottom:.4rem}
.form-control{width:100%;padding:.75rem 1rem;background:var(--bg-input);border:1.5px solid var(--border);border-radius:var(--radius-md);color:var(--text-primary);font-family:var(--font);font-size:.9rem;transition:all var(--tr-fast);outline:none}
.form-control:focus{border-color:var(--primary);background:var(--bg-card);box-shadow:0 0 0 3px var(--primary-alpha)}
.form-control::placeholder{color:var(--text-muted)}
.form-hint{font-size:.75rem;color:var(--text-muted);margin-top:.3rem}
.form-error{font-size:.75rem;color:var(--danger);margin-top:.3rem}
.input-group{position:relative}
.input-icon{position:absolute;top:50%;left:1rem;transform:translateY(-50%);color:var(--text-muted);pointer-events:none}
.input-group .form-control{padding-left:2.75rem}
.input-toggle{position:absolute;top:50%;right:1rem;transform:translateY(-50%);cursor:pointer;color:var(--text-muted)}

/* ===== MODAL ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:500;display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity var(--tr)}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal-sheet{background:var(--bg-card);border-radius:var(--radius-xl) var(--radius-xl) 0 0;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;transform:translateY(100%);transition:transform var(--tr)}
.modal-overlay.open .modal-sheet{transform:translateY(0)}
.modal-handle{width:36px;height:4px;background:var(--border);border-radius:var(--radius-full);margin:.75rem auto}
.modal-header{padding:0 1.25rem 1rem;display:flex;align-items:center;justify-content:space-between}
.modal-title{font-size:1.0625rem;font-weight:700}
.modal-body{padding:0 1.25rem 1.5rem}

/* ===== BADGES ===== */
.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .625rem;border-radius:var(--radius-full);font-size:.7rem;font-weight:600}
.badge-success{background:rgba(46,125,50,.12);color:var(--success)}
.badge-warning{background:rgba(255,143,0,.12);color:var(--accent)}
.badge-danger{background:rgba(198,40,40,.12);color:var(--danger)}
.badge-gray{background:var(--bg-surface);color:var(--text-muted)}

/* ===== TOAST ===== */
.toast-container{position:fixed;bottom:calc(var(--bottom-nav-h) + 1rem);left:50%;transform:translateX(-50%);z-index:999;display:flex;flex-direction:column;gap:.5rem;align-items:center;pointer-events:none}
.toast{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-full);padding:.625rem 1.25rem;font-size:.875rem;font-weight:500;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:.5rem;white-space:nowrap;animation:toastIn .3s ease;pointer-events:all}
.toast.success{border-color:var(--primary);color:var(--primary)}
.toast.error{border-color:var(--danger);color:var(--danger)}
@keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* ===== SKELETON ===== */
.skeleton{background:linear-gradient(90deg,var(--bg-surface) 25%,var(--border) 50%,var(--bg-surface) 75%);background-size:200% 100%;animation:skeleton 1.4s infinite;border-radius:var(--radius-md)}
@keyframes skeleton{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ===== LOGIN PAGE ===== */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem;background:var(--bg-main);position:relative;overflow:hidden}
.login-bg{position:absolute;inset:0;background:var(--gradient-card);opacity:.06}
.login-bg-circle{position:absolute;border-radius:50%;background:var(--gradient-primary);opacity:.07}
.login-card{background:var(--bg-card);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:2rem 1.75rem;width:100%;max-width:400px;border:1px solid var(--border);position:relative;animation:loginCardIn .5s cubic-bezier(.4,0,.2,1)}
@keyframes loginCardIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.login-logo{width:64px;height:64px;background:var(--gradient-primary);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-size:2rem;margin:0 auto 1.25rem;box-shadow:0 6px 20px rgba(46,125,50,.35)}
.login-title{text-align:center;font-size:1.375rem;font-weight:700;margin-bottom:.25rem}
.login-sub{text-align:center;font-size:.8125rem;color:var(--text-muted);margin-bottom:1.75rem}
.login-divider{display:flex;align-items:center;gap:.75rem;margin:1rem 0;color:var(--text-muted);font-size:.75rem}
.login-divider::before,.login-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.tab-switcher{display:flex;background:var(--bg-surface);border-radius:var(--radius-full);padding:.25rem;margin-bottom:1.5rem}
.tab-btn{flex:1;padding:.5rem;border-radius:var(--radius-full);border:none;background:transparent;cursor:pointer;font-family:var(--font);font-size:.8125rem;font-weight:500;color:var(--text-muted);transition:all var(--tr-fast)}
.tab-btn.active{background:var(--bg-card);color:var(--primary);font-weight:600;box-shadow:var(--shadow-sm)}

/* ===== DASHBOARD WELCOME ===== */
.welcome-banner{padding:.875rem 0;margin-bottom:.75rem}
.welcome-greeting{font-size:.875rem;color:var(--text-muted);font-weight:400}
.welcome-name{font-size:1.25rem;font-weight:700}

/* ===== SECTION HEADERS ===== */
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.875rem}
.section-title{font-size:.9375rem;font-weight:700}
.section-link{font-size:.8125rem;color:var(--primary);font-weight:500}

/* ===== UTILS ===== */
.mt-1{margin-top:.25rem} .mt-2{margin-top:.5rem} .mt-3{margin-top:.75rem} .mt-4{margin-top:1rem} .mt-6{margin-top:1.5rem}
.mb-1{margin-bottom:.25rem} .mb-2{margin-bottom:.5rem} .mb-3{margin-bottom:.75rem} .mb-4{margin-bottom:1rem}
.gap-1{gap:.25rem} .gap-2{gap:.5rem} .gap-3{gap:.75rem}
.d-flex{display:flex} .align-center{align-items:center} .justify-between{justify-content:space-between}
.w-full{width:100%} .text-center{text-align:center} .text-right{text-align:right}
.rounded-full{border-radius:var(--radius-full)}
.hidden{display:none!important}

/* ===== PWA INSTALL BANNER ===== */
.pwa-banner{position:fixed;bottom:calc(var(--bottom-nav-h) + .75rem);left:.75rem;right:.75rem;background:var(--bg-card);border:1px solid var(--primary-alpha);border-radius:var(--radius-lg);padding:1rem;box-shadow:var(--shadow-lg);z-index:180;display:flex;align-items:center;gap:.875rem;animation:slideUp .4s ease}
@keyframes slideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.pwa-banner-text{flex:1;font-size:.8125rem}
.pwa-banner-text strong{display:block;font-weight:600}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--radius-full)}