/* =========================================================
   Sistem Keuangan RT — identitas visual "buku kas"
   Palet: hijau tua (dipercaya, tenang) + kuningan/brass (uang,
   ditulis tangan di buku kas) di atas kertas hangat.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,500;8..60,600&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  --paper:   #FAF8F2;
  --paper-2: #F1EEE3;
  --ink:     #23261F;
  --muted:   #6B6E5F;
  --forest:  #1F3B2C;
  --forest-2:#2C4F3A;
  --brass:   #A9781F;
  --brass-2: #F4E9CE;
  --brick:   #9C4632;
  --brick-2: #F6E3DC;
  --line:    #DBD5C1;
  --radius:  3px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans', system-ui, sans-serif;
  font-size:15px;
  line-height:1.5;
}
h1,h2,h3,h4{
  font-family:'Source Serif 4', Georgia, serif;
  font-weight:600;
  color:var(--forest);
  margin:0 0 .4em;
}
a{color:var(--forest-2); text-decoration:none;}
a:hover{text-decoration:underline;}

/* ---------- layout ---------- */
.app{display:flex; min-height:100vh;}

.sidebar{
  width:230px; flex-shrink:0;
  background:var(--forest);
  color:#EDEADE;
  padding:24px 0;
  display:flex; flex-direction:column;
}
.sidebar .brand{
  font-family:'Source Serif 4', serif;
  font-size:1.15rem; font-weight:600;
  color:#fff; padding:0 22px 20px;
  border-bottom:1px solid rgba(255,255,255,.14);
  margin-bottom:12px;
}
.sidebar .brand small{display:block; font-family:'IBM Plex Sans',sans-serif; font-weight:400; font-size:.72rem; color:#C9D6C9; margin-top:3px;}
.sidebar nav a{
  display:block; padding:10px 22px;
  color:#DDE6DD; font-size:.92rem;
  border-left:3px solid transparent;
}
.sidebar nav a:hover{background:rgba(255,255,255,.06); text-decoration:none;}
.sidebar nav a.active{
  background:rgba(255,255,255,.09);
  border-left-color:var(--brass);
  color:#fff; font-weight:500;
}
.sidebar .foot{margin-top:auto; padding:14px 22px 0; font-size:.78rem; color:#9FB3A1;}

.main{flex:1; min-width:0;}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px; background:var(--paper);
  border-bottom:1px solid var(--line);
}
.topbar h1{font-size:1.25rem;}
.topbar .user{font-size:.85rem; color:var(--muted);}
.content{padding:26px 28px 60px;}

/* ---------- components ---------- */
.panel{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px 22px;
  margin-bottom:22px;
}
.panel h2{font-size:1.05rem; margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--line);}

.stat-row{display:flex; gap:18px; flex-wrap:wrap; margin-bottom:22px;}
.stat{
  flex:1; min-width:190px;
  background:#fff; border:1px solid var(--line); border-left:4px solid var(--forest);
  border-radius:var(--radius); padding:16px 18px;
}
.stat.masuk{border-left-color:var(--forest);}
.stat.keluar{border-left-color:var(--brick);}
.stat.saldo{border-left-color:var(--brass);}
.stat .label{font-size:.78rem; color:var(--muted); margin-bottom:6px;}
.stat .value{font-family:'Source Serif 4',serif; font-size:1.5rem; font-weight:600; color:var(--ink);}

table{width:100%; border-collapse:collapse; font-size:.92rem;}
thead th{
  text-align:left; font-weight:500; color:var(--muted);
  font-size:.78rem; padding:8px 10px;
  border-bottom:2px solid var(--ink);
}
tbody td{padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:middle;}
tbody tr:hover{background:var(--paper-2);}
td.num, th.num{text-align:right; font-variant-numeric:tabular-nums;}
.amt-masuk{color:var(--forest-2); font-weight:500;}
.amt-keluar{color:var(--brick); font-weight:500;}

.badge{display:inline-block; padding:2px 9px; border-radius:20px; font-size:.75rem; font-weight:500;}
.badge.lunas{background:var(--brass-2); color:var(--brass);}
.badge.belum{background:var(--brick-2); color:var(--brick);}

.btn{
  display:inline-block; padding:8px 16px; border-radius:var(--radius);
  border:1px solid var(--forest); background:var(--forest); color:#fff;
  font-size:.88rem; cursor:pointer; font-family:inherit;
}
.btn:hover{background:var(--forest-2); text-decoration:none;}
.btn.outline{background:transparent; color:var(--forest); border-color:var(--line);}
.btn.outline:hover{border-color:var(--forest); background:var(--paper-2);}
.btn.danger{background:#fff; color:var(--brick); border-color:var(--brick);}
.btn.danger:hover{background:var(--brick-2);}
.btn.small{padding:4px 10px; font-size:.8rem;}

.form-row{margin-bottom:14px;}
.form-row label{display:block; font-size:.85rem; color:var(--muted); margin-bottom:5px;}
.form-row input, .form-row select, .form-row textarea{
  width:100%; padding:8px 10px; border:1px solid var(--line);
  border-radius:var(--radius); font-family:inherit; font-size:.92rem; background:#fff;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{outline:2px solid var(--brass); outline-offset:0; border-color:var(--brass);}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 18px;}
@media(max-width:640px){.form-grid{grid-template-columns:1fr;}}

.flash{padding:11px 16px; border-radius:var(--radius); margin-bottom:18px; font-size:.9rem;}
.flash.success{background:var(--brass-2); color:#6b4e13; border:1px solid #e6d19d;}
.flash.error{background:var(--brick-2); color:var(--brick); border:1px solid #e3b8ab;}

.filter-bar{display:flex; gap:10px; align-items:end; flex-wrap:wrap; margin-bottom:18px;}
.filter-bar .form-row{margin-bottom:0; min-width:140px;}

.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--forest);}
.login-box{background:var(--paper); padding:36px 34px; border-radius:var(--radius); width:340px;}
.login-box h1{text-align:center; margin-bottom:4px;}
.login-box p.sub{text-align:center; color:var(--muted); font-size:.85rem; margin-bottom:22px;}

.empty{padding:30px 10px; text-align:center; color:var(--muted); font-size:.9rem;}

@media print{
  .sidebar, .topbar, .no-print{display:none !important;}
  .content{padding:0;}
  body{background:#fff;}
}