:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#172033;background:#f7f9fb;--navy:#102c4a;--teal:#18a5a8;--border:#e8edf2;--muted:#6b7687}*{box-sizing:border-box}body{margin:0;background:#f7f9fb}.auth-page{min-height:100vh;display:grid;place-items:center;padding:24px}.auth-card{width:min(440px,100%);padding:36px;background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:0 20px 60px rgba(20,40,80,.1)}.eyebrow{margin:0 0 8px;text-transform:uppercase;letter-spacing:.1em;font-size:12px;font-weight:700;color:#64748b}h1{margin:0;font-size:30px}h2{margin:0;font-size:22px}.subtitle{color:#64748b;margin:12px 0 24px}label{display:block;margin:14px 0;font-size:14px;font-weight:600}input{display:block;width:100%;margin-top:7px;padding:12px;border:1px solid #d8dee9;border-radius:10px;font:inherit}button{width:100%;margin-top:10px;padding:12px;border:0;border-radius:10px;background:#172033;color:white;font:inherit;font-weight:700;cursor:pointer}.message{min-height:20px;color:#b42318;font-size:13px}.app-shell{min-height:100vh;display:grid;grid-template-columns:205px 1fr}.sidebar{background:linear-gradient(180deg,#102f50,#0c2947);color:#fff;padding:24px 10px;position:sticky;top:0;height:100vh}.brand{padding:5px 16px 28px}.brand .eyebrow{color:#fff;font-size:20px;line-height:1.4;letter-spacing:0;text-transform:uppercase;margin:0;font-weight:800}.brand h2{display:none}.nav{display:grid;gap:6px}.nav button{margin:0;text-align:left;background:transparent;color:#dce3ef;padding:13px 16px;border-radius:14px;font-size:15px;font-weight:600}.nav button:hover,.nav button.active{background:#12a5a9;color:#fff}.sidebar-footer{position:absolute;left:16px;right:16px;bottom:20px}.logout{background:#fff!important;color:#172033!important}.main-area{min-width:0}.topbar{height:58px;display:flex;justify-content:space-between;align-items:center;padding:0 28px;background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:5}.topbar h1{font-size:15px}.topbar .eyebrow{display:none}.status{font-size:13px}.container{max-width:1180px;margin:0 auto;padding:22px 28px}.dashboard-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px}.dashboard-head h2{font-size:24px;margin:0 0 6px}.dashboard-head p{margin:0;color:var(--muted);font-size:14px}.period-tools{display:flex;gap:10px;align-items:center}.period{background:#fff;border:1px solid var(--border);border-radius:10px;padding:10px 14px;font-size:13px;min-width:200px;display:flex;justify-content:space-between;gap:12px}.apply-btn{width:auto;margin:0;padding:11px 20px;background:#108f96;border-radius:9px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}.stat-card,.card{background:#fff;border:1px solid var(--border);border-radius:13px;box-shadow:0 4px 18px rgba(15,23,42,.035)}.stat-card{padding:18px}.stat-card span{display:block;color:#5e6878;font-size:12px}.stat-card strong{display:block;margin-top:7px;font-size:22px}.stat-card.modern{display:flex;gap:13px;align-items:center}.stat-icon{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#e7f7f7;color:#12989d;font-size:23px;flex:none}.trend{display:block;font-size:11px;margin-top:7px}.trend.up{color:#19a76b}.trend.neutral{color:#7c8797}.trend em{color:#687487;font-style:normal;margin-left:3px}.dashboard-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:12px}.card{padding:16px;margin-bottom:12px}.section-head{display:flex;justify-content:space-between;gap:16px;margin-bottom:14px;align-items:center}.section-head h3{margin:0;font-size:15px}.more-btn{width:auto;margin:0;padding:0 5px;background:transparent;color:#7b8796;font-size:20px}.chart{height:190px;position:relative;padding-top:8px}.chart svg{width:100%;height:160px;overflow:visible}.gridline{stroke:#edf1f4;stroke-width:.5}.line{stroke-width:1.2;vector-effect:non-scaling-stroke}.line.teal{stroke:#149ea3}.line.red{stroke:#ff5b5b}.xlabels{display:flex;justify-content:space-between;color:#8993a1;font-size:10px;padding:0 7%}.legend{display:flex;gap:20px;font-size:11px;color:#6e7887;justify-content:center}.dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:6px}.dot.teal{background:#149ea3}.dot.navy{background:#193b60}.dot.red{background:#ff5757}.dot.orange{background:#ffab45}.donut-wrap{display:flex;align-items:center;gap:28px;min-height:190px}.donut{width:174px;height:174px;border-radius:50%;position:relative;background:conic-gradient(#149ea3 0 calc(var(--p1)*1%),#193b60 calc(var(--p1)*1%) calc(var(--p2)*1%),#ffab45 calc(var(--p2)*1%) 100%);flex:none}.donut:after{content:"";position:absolute;inset:34px;background:#fff;border-radius:50%}.donut-center{position:absolute;z-index:1;inset:0;display:grid;place-content:center;text-align:center;font-size:22px;font-weight:700}.donut-center small{display:block;font-size:10px;font-weight:400;color:#7c8797}.comp-list{display:grid;gap:16px;width:100%;font-size:12px}.comp-list div{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2px}.comp-list b{font-weight:500}.recent-card{margin-bottom:0}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:12px}th,td{text-align:left;padding:12px 10px;border-bottom:1px solid #edf0f5;white-space:nowrap}th{font-size:11px;color:#6f7b8d;background:#fafbfc}.muted{color:#64748b}.pill{display:inline-block;padding:4px 8px;border-radius:999px;background:#eef2f7;font-size:12px}.status-pill{display:inline-block;padding:4px 10px;border-radius:999px;font-size:11px}.status-pill.success{background:#dff5ec;color:#25a26e}.source-link{font-size:13px;color:#3157a4;text-decoration:none}.empty{padding:28px;text-align:center;color:#64748b}.year-select{padding:10px;border:1px solid #d8dee9;border-radius:10px;font:inherit}.search{width:300px;padding:11px;border:1px solid #d8dee9;border-radius:10px;font:inherit}@media(max-width:1000px){.app-shell{grid-template-columns:185px 1fr}.stats{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}}@media(max-width:720px){.app-shell{grid-template-columns:1fr}.sidebar{height:auto;position:static;padding:12px}.brand{padding:4px 10px 12px}.brand .eyebrow{font-size:16px}.nav{display:flex;overflow:auto}.nav button{white-space:nowrap}.sidebar-footer{position:static;margin-top:10px}.dashboard-head{flex-direction:column;align-items:stretch}.period-tools{justify-content:stretch}.period{flex:1}.container{padding:18px}.topbar{padding:0 18px}.donut-wrap{justify-content:center;flex-wrap:wrap}.comp-list{min-width:230px}}@media(max-width:560px){.stats{grid-template-columns:1fr}.period-tools{flex-direction:column;align-items:stretch}.period{min-width:0}.dashboard-head h2{font-size:21px}}.transaction-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.transaction-head h2{font-size:24px;margin:0 0 5px}.transaction-head p{margin:0;color:var(--muted);font-size:14px}.transaction-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:12px}.transaction-form-card,.transaction-summary{min-height:100%}.transaction-form{margin-top:4px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px}.form-grid label{margin:7px 0;color:#334155}.form-grid label.full{grid-column:1/-1}.form-grid input,.form-grid select,.form-grid textarea{margin-top:7px;background:#fff}.form-grid textarea{display:block;width:100%;min-height:78px;resize:vertical;padding:12px;border:1px solid #d8dee9;border-radius:10px;font:inherit}.form-grid small{display:block;color:#8792a2;font-size:10px;font-weight:400;margin-top:4px}.flow-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.flow-btn,.pay-btn{width:100%;margin:7px 0 0;padding:11px;border:1px solid #d8dee9;background:#fff;color:#526071}.flow-btn.active,.pay-btn.active{border-color:#18a5a8;color:#138f93;background:#f0fbfb}.flow-btn:disabled{opacity:1;cursor:not-allowed}.transaction-actions{display:flex;gap:10px;border-top:1px solid #edf0f5;margin-top:14px;padding-top:14px}.transaction-actions button{width:auto;margin:0}.detail-btn.primary{background:#149ea3}.summary-list{display:grid}.summary-list>div{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 8px;border-bottom:1px solid #edf0f5;font-size:13px}.summary-list>div:last-child{border-bottom:0}.summary-list span:first-child{color:#4e5a6b}.summary-list b{font-weight:700}.accent{color:#149ea3}.status-pill.pending{background:#fff1cf;color:#a86a00}.transaction-history{margin-top:0}@media(max-width:900px){.transaction-grid{grid-template-columns:1fr}}@media(max-width:560px){.form-grid{grid-template-columns:1fr}.form-grid label.full{grid-column:auto}.transaction-actions{flex-direction:column}.transaction-actions button{width:100%}}.anggota-head{margin-bottom:16px}.anggota-stats{margin-bottom:12px}.anggota-list-card{padding:18px}.anggota-list-head{margin-bottom:16px}.anggota-tools{display:flex;align-items:center;gap:8px}.anggota-tools .year-select{min-width:170px}.anggota-tools .search{width:280px;margin:0}.anggota-list-card table th,.anggota-list-card table td{vertical-align:middle}.table-actions{display:flex;gap:6px}.table-actions .detail-btn{margin:0;width:auto;padding:8px 11px}.status-pill.pending{background:#fff1cf;color:#a86a00}@media(max-width:900px){.anggota-list-head{align-items:flex-start}.anggota-tools{flex-wrap:wrap}.anggota-tools .search{width:240px}}@media(max-width:560px){.anggota-tools{width:100%;flex-direction:column;align-items:stretch}.anggota-tools .year-select,.anggota-tools .search{width:100%}.table-actions{flex-direction:column}.table-actions .detail-btn{width:100%}}.wajib-list-card{padding:18px}.wajib-list-card .anggota-list-head{margin-bottom:16px}.wajib-list-card table th,.wajib-list-card table td{vertical-align:middle}@media(max-width:900px){.wajib-list-card .anggota-tools{flex-wrap:wrap}}@media(max-width:560px){.wajib-list-card .anggota-tools{flex-direction:column;align-items:stretch}.wajib-list-card .year-select,.wajib-list-card .search{width:100%}}

.transaction-side{display:grid;gap:18px;align-content:start;min-width:0}.transaction-side .transaction-history{margin:0}.transaction-side .table-wrap{max-height:420px;overflow:auto}

/* Perapihan form Transaksi: posisi tetap, kolom tertentu diperkecil */
.transaction-form-card{min-width:0;overflow:hidden}.transaction-form{min-width:0}.form-grid{min-width:0}.form-grid>label{min-width:0}.form-grid input,.form-grid select,.form-grid textarea{min-width:0;max-width:100%}
#txNo{max-width:210px}.form-grid label:has(#txAmount){max-width:230px}#txAmount{max-width:230px}.form-grid label.full{min-width:0}#txNote{max-width:100%;min-height:70px}
@media(max-width:900px){#txNo,#txAmount{max-width:100%}}