/* ============================================================
   VILLAGE BANKING SYSTEM — Mobile-First Stylesheet
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=DM+Serif+Display&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; -webkit-text-size-adjust: 100%; }

:root {
  --g:#1a6b4a; --gd:#124d35; --gl:#e8f5ef; --ac:#f4a020;
  --danger:#c0392b; --warn:#e67e22; --info:#2980b9; --purple:#8e44ad;
  --tx:#1c1a16; --tx2:#6b6458; --surf:#ffffff; --bg:#f7f6f2; --bd:#e0dbd0;
  --r:12px; --shadow:0 1px 6px rgba(0,0,0,.07);
  --font:'Plus Jakarta Sans',sans-serif; --font-d:'DM Serif Display',serif;
}

body { font-family:var(--font); background:var(--bg); color:var(--tx); min-height:100vh; }

/* ── TOP BAR ── */
.topbar { background:var(--gd); padding:14px 16px 12px; position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; }
.tb-logo { font-family:var(--font-d); font-size:1.1rem; color:var(--ac); line-height:1.2; }
.tb-group { font-size:.68rem; color:rgba(255,255,255,.55); margin-top:1px; }
.tb-right { display:flex; align-items:center; gap:8px; }
.icon-btn { width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.12); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#fff; }
.icon-btn svg { width:18px; height:18px; fill:currentColor; }
.avatar { width:32px; height:32px; border-radius:50%; background:var(--ac); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.72rem; color:#fff; }

/* ── CYCLE BANNER ── */
.cycle-banner { background:linear-gradient(135deg,var(--g) 0%,#1d8a5c 100%); padding:16px; margin:12px 12px 0; border-radius:var(--r); color:#fff; position:relative; overflow:hidden; }
.cycle-banner::after { content:''; position:absolute; right:-20px; top:-20px; width:100px; height:100px; border-radius:50%; background:rgba(255,255,255,.06); }
.cb-label { font-size:.65rem; opacity:.7; text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
.cb-name  { font-family:var(--font-d); font-size:1.3rem; margin:2px 0; }
.cb-dates { font-size:.7rem; opacity:.65; }
.cb-stats { display:flex; margin-top:12px; background:rgba(0,0,0,.18); border-radius:8px; overflow:hidden; }
.cb-stat  { flex:1; padding:9px 8px; text-align:center; border-right:1px solid rgba(255,255,255,.1); }
.cb-stat:last-child { border-right:none; }
.cb-stat .val { font-size:1rem; font-weight:700; }
.cb-stat .lbl { font-size:.6rem; opacity:.65; margin-top:1px; }

/* ── KPI STRIP ── */
.kpi-strip { display:flex; gap:10px; padding:12px 12px 4px; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
.kpi-strip::-webkit-scrollbar { display:none; }
.kpi { background:var(--surf); border-radius:var(--r); padding:12px 14px; min-width:130px; border-top:3px solid; flex-shrink:0; box-shadow:var(--shadow); }
.kpi.g{border-color:var(--g)}.kpi.o{border-color:var(--warn)}.kpi.b{border-color:var(--info)}.kpi.r{border-color:var(--danger)}.kpi.p{border-color:var(--purple)}
.kpi .kl { font-size:.62rem; color:var(--tx2); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.kpi .kv { font-size:1.1rem; font-weight:700; color:var(--tx); margin:3px 0 1px; line-height:1; }
.kpi .ks { font-size:.65rem; color:var(--tx2); }

/* ── SECTION HEADER ── */
.sec-head { display:flex; justify-content:space-between; align-items:center; padding:14px 14px 8px; }
.sec-head h2 { font-size:.9rem; font-weight:700; color:var(--tx); }
.sec-head a  { font-size:.75rem; color:var(--g); font-weight:600; text-decoration:none; }

/* ── QUICK ACTIONS ── */
.qa-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:4px 12px 12px; }
.qa { background:var(--surf); border-radius:var(--r); padding:14px; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; cursor:pointer; border:1.5px solid var(--bd); box-shadow:var(--shadow); transition:all .12s; text-decoration:none; }
.qa:active { transform:scale(.97); background:var(--bg); }
.qa .qi { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; }
.qa .qi svg { width:20px; height:20px; fill:currentColor; }
.qa .qt { font-size:.8rem; font-weight:600; color:var(--tx); }
.qa .qs { font-size:.65rem; color:var(--tx2); }
.qa.qa-green  .qi { background:#e8f5ef; color:var(--g); }
.qa.qa-orange .qi { background:#fef3e2; color:var(--warn); }
.qa.qa-blue   .qi { background:#e8f4fd; color:var(--info); }
.qa.qa-purple .qi { background:#f5eef8; color:var(--purple); }

/* ── MEETING CARD ── */
.meeting-card { margin:0 12px 10px; background:var(--surf); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); }
.mc-head { background:var(--g); padding:12px 14px; display:flex; justify-content:space-between; align-items:center; }
.mc-head .mn { font-weight:700; font-size:.9rem; color:#fff; }
.mc-head .md { font-size:.7rem; color:rgba(255,255,255,.7); margin-top:2px; }
.mc-body { padding:4px 14px; }
.mc-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--bd); font-size:.82rem; }
.mc-row:last-child { border-bottom:none; }
.mc-row .lbl { color:var(--tx2); font-size:.78rem; }
.mc-row .val { font-weight:600; color:var(--tx); }
.mc-actions  { padding:10px 14px; background:var(--bg); display:flex; gap:8px; }

/* ── MEMBER ITEMS ── */
.member-item { display:flex; align-items:center; gap:12px; padding:11px 14px; background:var(--surf); margin:0 12px 8px; border-radius:var(--r); box-shadow:var(--shadow); }
.mav { width:38px; height:38px; border-radius:50%; background:var(--g); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.8rem; color:#fff; flex-shrink:0; }
.mav.female { background:var(--purple); }
.mav.blue   { background:var(--info); }
.minfo { flex:1; min-width:0; }
.mname   { font-size:.85rem; font-weight:600; color:var(--tx); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mdetail { font-size:.7rem; color:var(--tx2); margin-top:1px; }
.mright  { text-align:right; flex-shrink:0; }
.mshares { font-size:.82rem; font-weight:700; color:var(--g); }
.mamount { font-size:.68rem; color:var(--tx2); }
.prog-wrap { height:5px; background:var(--bg); border-radius:3px; overflow:hidden; margin-top:4px; width:60px; }
.prog-bar  { height:100%; background:linear-gradient(90deg,var(--g),#2ecc71); border-radius:3px; }

/* ── LOAN ITEMS ── */
.loan-item { margin:0 12px 8px; background:var(--surf); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); }
.li-head { padding:10px 14px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--bd); }
.li-name { font-size:.85rem; font-weight:600; color:var(--tx); }
.li-body { padding:8px 14px 12px; }
.li-row  { display:flex; justify-content:space-between; padding:4px 0; font-size:.78rem; }
.li-row .lbl { color:var(--tx2); }
.li-row .val { font-weight:600; color:var(--tx); }
.li-row .val.good   { color:var(--g); }
.li-row .val.caution{ color:var(--warn); }
.li-progress { height:6px; background:var(--bg); border-radius:3px; overflow:hidden; margin:8px 0 4px; }
.li-prog-bar { height:100%; background:linear-gradient(90deg,var(--g),#2ecc71); border-radius:3px; }
.li-pct { font-size:.65rem; color:var(--tx2); }

/* ── BADGES ── */
.badge { display:inline-block; padding:3px 9px; border-radius:20px; font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.badge-success  { background:#d4efdf; color:#1e8449; }
.badge-primary  { background:#d5e8f0; color:#1a6b9a; }
.badge-warning  { background:#fdebd0; color:#9a5e00; }
.badge-danger   { background:#fadbd8; color:#922b21; }
.badge-secondary{ background:#eaecee; color:#5d6d7e; }

/* ── BUTTONS ── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 18px; border-radius:8px; font-size:.85rem; font-weight:600; border:none; cursor:pointer; transition:all .12s; text-decoration:none; font-family:var(--font); }
.btn-primary { background:var(--g); color:#fff; }
.btn-primary:active { background:var(--gd); }
.btn-outline  { background:transparent; color:var(--g); border:1.5px solid var(--g); }
.btn-outline:active { background:var(--gl); }
.btn-sm   { padding:6px 12px; font-size:.78rem; }
.btn-full { width:100%; }
.btn svg  { width:15px; height:15px; fill:currentColor; }

/* ── FORMS ── */
.form-group { margin-bottom:14px; }
.form-group label { display:block; font-size:.75rem; font-weight:600; color:var(--tx2); margin-bottom:5px; }
.form-control { width:100%; padding:11px 12px; border:1.5px solid var(--bd); border-radius:8px; font-family:var(--font); font-size:16px; color:var(--tx); background:#fff; transition:border-color .12s; }
input.form-control, textarea.form-control { -webkit-appearance:none; }
.form-control:focus { outline:none; border-color:var(--g); box-shadow:0 0 0 3px rgba(26,107,74,.1); }
select.form-control { height:auto; cursor:pointer; }
.help-block { font-size:.72rem; color:var(--danger); margin-top:4px; }

/* ── PAYMENT METHOD SELECTOR ── */
.pay-methods { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:14px; }
.pay-method  { padding:10px 6px; border-radius:10px; border:1.5px solid var(--bd); text-align:center; cursor:pointer; transition:all .12s; background:var(--surf); }
.pay-method.selected { border-color:var(--g); background:var(--gl); }
.pay-method .pm-icon  { font-size:1.25rem; display:block; margin-bottom:3px; }
.pay-method .pm-label { font-size:.68rem; font-weight:600; color:var(--tx); }
.summary-box { background:var(--gl); border-radius:8px; padding:10px 12px; margin-bottom:14px; font-size:.82rem; color:var(--g); font-weight:600; }

/* ── BOTTOM SHEET MODAL ── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:200; display:flex; align-items:flex-end; justify-content:center; opacity:0; pointer-events:none; transition:opacity .2s; }
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal-sheet { background:var(--surf); border-radius:20px 20px 0 0; padding:20px 16px 40px; width:100%; max-width:480px; transform:translateY(100%); transition:transform .25s cubic-bezier(.4,0,.2,1); max-height:90vh; overflow-y:auto; }
.modal-overlay.open .modal-sheet { transform:translateY(0); }
.modal-handle { width:36px; height:4px; background:var(--bd); border-radius:2px; margin:0 auto 16px; }
.modal-title  { font-family:var(--font-d); font-size:1.15rem; color:var(--tx); margin-bottom:14px; }

/* ── ALERTS ── */
.alert { padding:11px 14px; border-radius:8px; margin:0 12px 10px; font-size:.82rem; display:flex; align-items:flex-start; gap:8px; }
.alert-success { background:#d4efdf; color:#1e8449; border:1px solid #a9dfbf; }
.alert-danger  { background:#fadbd8; color:#922b21; border:1px solid #f1948a; }
.alert-warning { background:#fdebd0; color:#9a5e00; border:1px solid #f8c471; }
.alert-info    { background:#d6eaf8; color:#1a5276; border:1px solid #85c1e9; }

/* ── BOTTOM NAV ── */
.bottom-nav { position:fixed; bottom:0; left:0; right:0; background:var(--surf); border-top:1px solid var(--bd); display:flex; z-index:100; box-shadow:0 -2px 12px rgba(0,0,0,.08); padding-bottom:env(safe-area-inset-bottom,0px); }
.bn-item { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 4px 11px; cursor:pointer; border:none; background:none; color:var(--tx2); font-family:var(--font); transition:color .12s; }
.bn-item svg  { width:20px; height:20px; fill:currentColor; }
.bn-item span { font-size:.6rem; font-weight:600; }
.bn-item.active { color:var(--g); }
.bn-center { width:52px; height:52px; border-radius:50%; background:var(--g); display:flex; align-items:center; justify-content:center; margin-top:-18px; box-shadow:0 4px 16px rgba(26,107,74,.4); cursor:pointer; flex-shrink:0; }
.bn-center svg { width:24px; height:24px; fill:#fff; }
.page-content { padding-bottom:80px; }

/* ── NAV TABS (horizontal scroll on mobile) ── */
.nav-tabs { flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.nav-tabs::-webkit-scrollbar { display:none; }
.nav-tabs .nav-link { white-space:nowrap; }

/* ── DESKTOP ≥768px ── */
@media (min-width:768px) {
  .bottom-nav { display:none; }
  .sidebar { width:220px; background:var(--gd); display:flex; flex-direction:column; position:fixed; top:0; left:0; height:100vh; z-index:100; }
  .main-wrap { margin-left:220px; flex:1; }
  .topbar { padding:0 24px; height:56px; background:var(--surf); border-bottom:1px solid var(--bd); }
  .tb-logo { color:var(--tx); }
  .tb-group { color:var(--tx2); }
  .icon-btn { background:var(--bg); color:var(--tx2); }
  .cycle-banner { margin:20px 20px 0; }
  .kpi-strip { display:grid; grid-template-columns:repeat(3,1fr); overflow:visible; padding:16px 20px 0; }
  .kpi { min-width:unset; }
  .qa-grid { grid-template-columns:repeat(4,1fr); padding:8px 20px 16px; }
  .sec-head { padding:16px 20px 8px; }
  .meeting-card,.member-item,.loan-item { margin-left:20px; margin-right:20px; }
  .two-col { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; padding:0 20px; }
  .two-col .member-item,.two-col .loan-item { margin:0 0 8px; }
  .page-content { padding-bottom:24px; }
  .modal-overlay { align-items:center; }
  .modal-sheet { border-radius:16px; max-width:440px; }
}

@media (min-width:1200px) {
  .sidebar { width:240px; }
  .main-wrap { margin-left:240px; }
  .kpi-strip { grid-template-columns:repeat(5,1fr); }
}