/* =========================================================
   Pesta Gotilon HKBP Ressort Pondok Kopi
   Tema warna terinspirasi kain ulos: maroon, emas, gading
   ========================================================= */
:root{
    --maroon-900:#4A1015;
    --maroon-800:#6B1A22;
    --maroon-700:#8A222B;
    --gold-500:#C99A3B;
    --gold-300:#E4C77E;
    --ink:#2B2118;
    --cream:#F7F1E4;
    --cream-2:#EFE6D2;
    --white:#FFFFFF;
    --green-ok:#2F7A4F;
    --red-danger:#B23A2E;
    --border:#DCCFAE;
    --shadow: 0 6px 18px rgba(74,16,21,0.12);
    --radius:10px;
    --font-display: 'Georgia', 'Times New Roman', serif;
    --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
    font-family:var(--font-body);
    background:var(--cream);
    color:var(--ink);
    line-height:1.5;
}

a{color:var(--maroon-700); text-decoration:none;}
a:hover{text-decoration:underline;}

h1,h2,h3{font-family:var(--font-display); color:var(--maroon-900); margin:0 0 .4em;}

/* ---------- Login ---------- */
.login-body{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
      linear-gradient(160deg, rgba(74,16,21,0.94), rgba(106,26,34,0.9)),
      repeating-linear-gradient(45deg, rgba(201,154,59,0.15) 0 10px, transparent 10px 20px);
    padding:20px;
}
.login-card{
    background:var(--white);
    width:100%;
    max-width:400px;
    border-radius:var(--radius);
    box-shadow:0 20px 50px rgba(0,0,0,0.35);
    padding:36px 32px;
    border-top:6px solid var(--gold-500);
}
.login-header{text-align:center; margin-bottom:24px;}
.login-emblem{
    width:56px; height:56px; border-radius:50%;
    background:linear-gradient(135deg, var(--maroon-800), var(--maroon-900));
    color:var(--gold-300);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-weight:bold; font-size:22px;
    margin:0 auto 12px;
    border:2px solid var(--gold-500);
}
.login-header p{color:#7a6f5c; margin:0; font-size:14px;}
.login-form label{display:block; font-size:13px; font-weight:600; margin:14px 0 6px; color:var(--maroon-900);}
.login-form input{
    width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:8px;
    font-size:14px; background:var(--cream);
}
.login-form input:focus{outline:2px solid var(--gold-500); border-color:var(--gold-500);}
.login-hint{font-size:12px; color:#948966; text-align:center; margin-top:16px;}

/* ---------- Layout shell ---------- */
.app-shell{display:flex; min-height:100vh;}
.app-sidebar{
    width:260px; flex-shrink:0;
    background:linear-gradient(180deg, var(--maroon-900), var(--maroon-800));
    color:var(--cream);
    display:flex; flex-direction:column;
    position:sticky; top:0; height:100vh;
}
.sidebar-brand{
    display:flex; align-items:center; gap:12px;
    padding:22px 18px; border-bottom:1px solid rgba(255,255,255,0.12);
}
.sidebar-emblem{margin:0; flex-shrink:0;}
.sidebar-brand strong{display:block; font-family:var(--font-display); font-size:16px; color:var(--gold-300);}
.sidebar-brand span{font-size:11px; color:#D8C9AE;}
.sidebar-nav{flex:1; padding:16px 10px; display:flex; flex-direction:column; gap:6px;}
.sidebar-nav a{
    color:#EFE3C8; padding:13px 14px; border-radius:8px; font-size:16px;
    display:flex; align-items:center; gap:12px;
}
.sidebar-nav a:hover{background:rgba(255,255,255,0.08); text-decoration:none;}
.sidebar-nav a.active{background:var(--gold-500); color:var(--maroon-900); font-weight:700;}
.sidebar-nav .ico{width:26px; text-align:center; font-size:20px; flex-shrink:0;}
.sidebar-footer{padding:14px 18px; font-size:11px; color:#B7A98A; border-top:1px solid rgba(255,255,255,0.12);}
.sidebar-public{padding:14px 18px; border-top:1px solid rgba(255,255,255,0.12);}
.sidebar-public span{display:block; font-size:11px; color:#B7A98A; margin-top:8px; text-align:center;}

.app-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.app-topbar{
    display:flex; align-items:center; gap:16px;
    background:var(--white); padding:16px 24px; border-bottom:1px solid var(--border);
    position:sticky; top:0; z-index:5;
}
.app-topbar h2{margin:0; flex:1; font-size:19px;}
.hamburger{display:none; background:none; border:none; font-size:22px; cursor:pointer; color:var(--maroon-900);}
.topbar-user{display:flex; align-items:center; gap:12px; font-size:13px; color:#5a5040;}
.app-content{padding:24px; flex:1;}

/* ---------- Cards ---------- */
.card{
    background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
    padding:20px; border:1px solid var(--border);
}
.card + .card{margin-top:20px;}
.card-title{margin:0 0 14px; font-size:16px; color:var(--maroon-900); display:flex; justify-content:space-between; align-items:center;}

.stat-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:18px; margin-bottom:22px;}
.stat-grid-2col{grid-template-columns:repeat(2,1fr);}
.stat-grid-3col{grid-template-columns:repeat(3,1fr);}
.stat-card{
    background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
    padding:20px; border-left:6px solid var(--gold-500);
}
.stat-card.income{border-left-color:var(--green-ok);}
.stat-card.expense{border-left-color:var(--red-danger);}
.stat-card.balance{border-left-color:var(--maroon-800);}
.stat-card .label{font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:#8a7f66; font-weight:600;}
.stat-card .value{font-family:var(--font-display); font-size:26px; color:var(--ink); margin-top:6px;}
.stat-card .sub{font-size:12px; color:#a3987e; margin-top:4px;}

/* ---------- Buttons ---------- */
.btn{
    display:inline-flex; align-items:center; gap:6px; justify-content:center;
    padding:9px 16px; border-radius:8px; font-size:13.5px; font-weight:600;
    border:1px solid transparent; cursor:pointer; text-decoration:none !important;
}
.btn-primary{background:var(--maroon-800); color:var(--white);}
.btn-primary:hover{background:var(--maroon-900);}
.btn-gold{background:var(--gold-500); color:var(--maroon-900);}
.btn-gold:hover{background:var(--gold-300);}
.btn-outline{background:transparent; border-color:var(--border); color:var(--maroon-900);}
.btn-outline:hover{background:var(--cream-2);}
.btn-danger{background:var(--red-danger); color:var(--white);}
.btn-danger:hover{background:#8f2d23;}
.btn-sm{padding:6px 10px; font-size:12px;}
.btn-block{width:100%;}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;}
table{width:100%; border-collapse:collapse; font-size:13.5px;}
thead th{
    background:var(--cream-2); text-align:left; padding:10px 12px; color:var(--maroon-900);
    font-size:12px; text-transform:uppercase; letter-spacing:.4px; border-bottom:2px solid var(--gold-500);
    white-space:nowrap;
}
tbody td{padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:top;}
tbody tr:hover{background:#FBF7EC;}
tfoot td{padding:10px 12px; font-weight:700; background:var(--cream-2); border-top:2px solid var(--gold-500);}
.text-right{text-align:right;}
.text-center{text-align:center;}
.nowrap{white-space:nowrap;}

.badge{display:inline-block; padding:3px 9px; border-radius:20px; font-size:11.5px; font-weight:700;}
.badge-aktif{background:#E1F0E5; color:var(--green-ok);}
.badge-nonaktif{background:#F1E1DE; color:var(--red-danger);}
.badge-tunai{background:#EAF2E4; color:#4C7A2C;}
.badge-transfer{background:#E4ECF2; color:#2C5D7A;}
.badge-belum-lunas{background:#FBE7DD; color:#B2531E;}
.badge-otomatis{background:#F1E6D2; color:var(--maroon-800);}
.badge-manual{background:#E9E4D8; color:#5a5040;}

/* ---------- Forms ---------- */
.form-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:16px;}
.form-group{display:flex; flex-direction:column;}
.form-group.full{grid-column:1 / -1;}
.form-group label{font-size:13px; font-weight:600; margin-bottom:6px; color:var(--maroon-900);}
.hint{font-size:11.5px; color:#9a8f74; margin-top:4px;}
.form-group .hint{font-size:11.5px; color:#9a8f74; margin-top:4px;}
input[type=text], input[type=number], input[type=date], input[type=password],
input[type=file], select, textarea{
    padding:9px 11px; border:1px solid var(--border); border-radius:8px; font-size:14px;
    font-family:inherit; background:var(--white); width:100%;
}
input:focus, select:focus, textarea:focus{outline:2px solid var(--gold-500); border-color:var(--gold-500);}
textarea{resize:vertical; min-height:70px;}
.input-locked{background:var(--cream-2); color:#6b6250; cursor:not-allowed;}
.input-locked::-webkit-outer-spin-button,
.input-locked::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.input-locked[type=number]{-moz-appearance:textfield;}

/* ---------- Autocomplete (pencarian nama jemaat) ---------- */
.autocomplete-list{
    position:absolute; top:100%; left:0; right:0; z-index:20;
    background:#1a1a1a; border:1px solid #000; border-top:none;
    border-radius:0 0 10px 10px; box-shadow:0 10px 24px rgba(0,0,0,0.35);
    max-height:240px; overflow-y:auto; padding:4px;
}
.autocomplete-item{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:10px 12px; font-size:13.5px; color:#F7F1E4; cursor:pointer;
    border-radius:6px; margin:2px 0; border:1px solid transparent;
    transition:background .15s ease, border-color .15s ease;
}
.autocomplete-item:hover,
.autocomplete-item:focus{
    background:var(--gold-500); color:#1a1a1a; border-color:var(--gold-300); cursor:pointer;
}
.autocomplete-item-nama{font-weight:600;}
.autocomplete-item-wilayah{
    font-size:11px; color:#C9BB9D; flex-shrink:0;
    padding:2px 8px; border:1px solid #4a4a4a; border-radius:20px;
}
.autocomplete-item:hover .autocomplete-item-wilayah{
    color:#1a1a1a; border-color:#1a1a1a;
}
.form-actions{display:flex; gap:10px; margin-top:20px;}

.filter-bar{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; align-items:flex-end;}
.filter-bar .form-group{min-width:160px;}

/* ---------- Alerts ---------- */
.alert{padding:12px 16px; border-radius:8px; font-size:13.5px; margin-bottom:16px;}
.alert-error{background:#F7E0DC; color:var(--red-danger); border:1px solid #E9B7AE;}
.alert-success{background:#E1F0E5; color:var(--green-ok); border:1px solid #B9DDC3;}

.empty-state{text-align:center; padding:40px 20px; color:#a3987e;}

/* ---------- Responsive ---------- */
@media (max-width: 880px){
    .app-sidebar{position:fixed; left:-270px; top:0; z-index:50; transition:left .2s ease; box-shadow:0 0 30px rgba(0,0,0,0.3);}
    .app-sidebar.open{left:0;}
    .hamburger{display:block;}
    .app-content{padding:16px;}
    .app-topbar{padding:12px 16px;}
    .topbar-user span{display:none;}
    .stat-grid-2col, .stat-grid-3col{grid-template-columns:1fr;}
}

/* ---------- Laporan / Report Sheet ---------- */
.report-sheet{
    background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
    padding:32px; border:1px solid var(--border); max-width:960px; margin:0 auto;
}
.report-header{display:flex; align-items:center; gap:16px; border-bottom:3px solid var(--gold-500); padding-bottom:16px; margin-bottom:20px;}
.report-emblem{
    width:52px; height:52px; border-radius:50%; flex-shrink:0;
    background:linear-gradient(135deg, var(--maroon-800), var(--maroon-900));
    color:var(--gold-300); display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-weight:bold; font-size:20px; border:2px solid var(--gold-500);
}
.report-header h1{margin:0 0 2px; font-size:22px;}
.report-sub{font-size:13px; color:#7a6f5c;}

.report-summary{width:100%; border-collapse:collapse; margin-bottom:26px;}
.report-summary td{padding:10px 14px; font-size:14px; border:1px solid var(--border);}
.report-summary td.label{background:var(--cream-2); font-weight:700; width:220px; color:var(--maroon-900);}
.report-summary td.value{text-align:right; font-family:var(--font-display); font-size:18px; font-weight:700;}
.report-summary td.value.income{color:var(--green-ok);}
.report-summary td.value.expense{color:var(--red-danger);}
.report-summary td.value.margin{color:var(--gold-500);}
.report-summary tr.saldo-row td{border-top:2px solid var(--gold-500);}

/* ---------- Progress Bar (dipakai di halaman Pengaturan) ---------- */
.progress-wrap{margin-top:6px;}
.progress-label{display:flex; justify-content:space-between; font-size:13px; color:#7a6f5c; margin-bottom:8px; font-weight:600;}
.progress-bar{height:16px; border-radius:10px; background:var(--cream-2); overflow:hidden; border:1px solid var(--border);}
.progress-fill{height:100%; border-radius:10px; background:linear-gradient(90deg, var(--gold-500), var(--maroon-700)); width:0%; transition:width .6s ease;}

/* ---------- Tab navigasi grup Pengaturan ---------- */
.settings-tabs{
    display:flex; gap:6px; flex-wrap:wrap;
    background:var(--white); border:1px solid var(--border); border-radius:12px;
    padding:6px; margin-bottom:20px; box-shadow:var(--shadow);
}
.settings-tab{
    display:flex; align-items:center; gap:8px;
    padding:10px 18px; border-radius:8px; font-size:13.5px; font-weight:600;
    color:#6b6250; flex:1; justify-content:center; text-align:center;
    white-space:nowrap;
}
.settings-tab:hover{background:var(--cream-2); text-decoration:none;}
.settings-tab.active{background:var(--maroon-800); color:var(--white);}
.settings-tab .ico{font-size:15px;}
@media (max-width:700px){
    .settings-tabs{flex-direction:column;}
    .settings-tab{justify-content:flex-start;}
}

.report-section-title{font-size:15px; margin:22px 0 10px; color:var(--maroon-900); border-left:4px solid var(--gold-500); padding-left:10px;}
.report-table{width:100%; border-collapse:collapse; font-size:12.5px; margin-bottom:6px;}
.report-table th{background:var(--cream-2); border:1px solid var(--border); padding:7px 9px; text-align:left; color:var(--maroon-900); font-size:11.5px; text-transform:uppercase;}
.report-table td{border:1px solid var(--border); padding:7px 9px;}
.report-table tfoot td{background:var(--cream-2); font-weight:700;}

/* Bungkus tabel laporan supaya bisa discroll horizontal di layar sempit/HP,
   tanpa memaksa seluruh halaman melebar. Saat dicetak, dikembalikan normal. */
.report-table-wrap{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; margin-bottom:6px;}
.report-table-wrap .report-table{margin-bottom:0; min-width:640px;}
@media print{
    .report-table-wrap{overflow:visible;}
    .report-table-wrap .report-table{min-width:0;}
}

.report-footer{display:flex; justify-content:space-between; font-size:11.5px; color:#8a7f66; margin-top:24px;}
.report-signature{display:flex; justify-content:space-between; margin-top:50px; max-width:520px; margin-left:auto; margin-right:auto;}
.sign-box{text-align:center; font-size:13px;}
.sign-label{margin-bottom:60px;}
.sign-space{border-bottom:1px solid var(--ink); width:160px; margin:0 auto;}
.sign-name{margin-top:6px; font-weight:600;}

/* ---------- Print Mode ---------- */
@media print{
    body{background:#fff;}
    .app-sidebar, .app-topbar, .no-print{display:none !important;}
    .app-main, .app-content{padding:0; margin:0;}
    .report-sheet{box-shadow:none; border:none; padding:0; max-width:100%;}
    @page{ size:A4; margin:16mm; }
}