/* account-ui.css — Frenzon member portal: modern Account sections.
   Obligations, payment split, profit, activity, pause-account, FDF profit, profile photo.
   Reads theme.css tokens. Load after style.css and loans.css. */

:root {
  --f-savings: #1f6b4a; --f-fdf: #c98a12; --f-wd: #2a7fa8; --f-renewal: #6b52b3; --f-fine: #b42318; --f-other: #6b7280;
}
.f-savings { --fc: var(--f-savings); } .f-fdf { --fc: var(--f-fdf); } .f-wd { --fc: var(--f-wd); }
.f-renewal { --fc: var(--f-renewal); } .f-fine { --fc: var(--f-fine); } .f-other, .f-all { --fc: var(--f-other); }
.f-all { --fc: var(--primary-500); }

/* ---------- progress bars (shared) ---------- */
.ob-prog { display: block; width: 100%; height: 8px; margin: 8px 0 2px; border: 0; border-radius: 99px; overflow: hidden; appearance: none; -webkit-appearance: none; background: #e2eae6; }
.ob-prog::-webkit-progress-bar { background: #e2eae6; border-radius: 99px; }
.ob-prog::-webkit-progress-value { background: var(--fc, var(--primary-500)); border-radius: 99px; }
.ob-prog::-moz-progress-bar { background: var(--fc, var(--primary-500)); border-radius: 99px; }

/* ---------- status pills ---------- */
.ob-pill { flex: none; padding: 3px 10px; border-radius: 99px; font-size: .7rem; font-weight: 800; letter-spacing: .02em; background: #e6ede9; color: #3d4f46; }
.ob-pill.st-done { background: var(--success-light); color: #0f5d3c; }
.ob-pill.st-part { background: var(--info-light); color: #174a85; }
.ob-pill.st-due { background: var(--warning-light); color: #7a4504; }
.ob-pill.st-late { background: var(--danger-light); color: #9a1a10; }
.ob-pill.st-waived { background: #eceff1; color: #52606a; }

/* ================= 1. MONTHLY OBLIGATIONS ================= */
.ob-summary { display: flex; align-items: stretch; gap: 12px; padding: 16px; margin-bottom: 14px; border-radius: 18px; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, #2b8a62 0%, #14432f 62%); box-shadow: var(--shadow-md); }
.ob-sum-main { flex: 1; min-width: 0; }
.ob-sum-big { font-size: 2rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.ob-sum-big small { font-size: .95rem; font-weight: 700; color: #bfe3cf; }
.ob-sum-lbl { margin-top: 4px; font-size: .8rem; color: #d3eddf; }
.ob-summary .ob-prog { background: rgba(255,255,255,.2); height: 7px; }
.ob-summary .ob-prog::-webkit-progress-bar { background: rgba(255,255,255,.2); }
.ob-summary .ob-prog::-webkit-progress-value { background: linear-gradient(90deg, #f0cd7c, #e0b04a); }
.ob-summary .ob-prog::-moz-progress-bar { background: #e0b04a; }
.ob-sum-side { display: grid; gap: 8px; align-content: center; flex: none; }
.ob-sum-chip { display: flex; align-items: baseline; gap: 6px; padding: 7px 12px; border-radius: 12px; background: rgba(255,255,255,.14); font-size: .74rem; }
.ob-sum-chip b { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.ob-sum-chip.warn { background: rgba(240,205,124,.26); }
.ob-sum-chip.bad { background: rgba(255,120,105,.32); }

.ob-filters, .pf-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ob-chip { min-height: 36px; padding: 6px 14px; border: 1px solid var(--border-dark); border-radius: 99px; background: var(--surface); color: var(--text-main); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; }
.ob-chip.on { background: var(--primary); border-color: var(--primary); color: #fff; }

.ob-year { margin: 14px 2px 6px; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.ob-list { display: grid; gap: 10px; }
.ob-month, .ob-more { border: 1px solid var(--border-color); border-radius: 16px; background: var(--surface); overflow: hidden; box-shadow: var(--shadow-sm); border-left: 5px solid var(--border-dark); }
.ob-month.st-done { border-left-color: var(--success); }
.ob-month.st-part { border-left-color: var(--info); }
.ob-month.st-due { border-left-color: #e0a43a; }
.ob-month.st-late { border-left-color: var(--danger); background: #fffafa; }
.ob-month.st-waived { border-left-color: #9aa5ab; }
.ob-month > summary { list-style: none; cursor: pointer; padding: 13px 14px 12px; }
.ob-month > summary::-webkit-details-marker { display: none; }
.ob-mtop { display: flex; align-items: center; gap: 10px; }
.ob-mname { flex: 1; min-width: 0; font-weight: 800; font-size: 1rem; }
.ob-dots { display: flex; flex: none; }
.ob-dot { display: grid; place-items: center; width: 24px; height: 24px; margin-right: -7px; border: 2px solid var(--surface); border-radius: 50%; background: var(--fc); color: #fff; }
.ob-dot svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ob-dot.st-done { opacity: .55; }
.ob-dots { order: 0; margin-right: 8px; }
.ob-mtotal { margin-top: 8px; font-size: .86rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ob-mtotal i { font-style: normal; font-weight: 600; color: var(--text-muted); }
.ob-mbody { display: grid; gap: 0; border-top: 1px dashed var(--border-color); }
.ob-fund { display: flex; gap: 12px; padding: 12px 14px; }
.ob-fund + .ob-fund { border-top: 1px solid var(--border-color); }
.ob-fic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--fc); color: #fff; }
.ob-fic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ob-fmain { flex: 1; min-width: 0; }
.ob-ftop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ob-fname { font-weight: 750; font-size: .92rem; }
.ob-famt { margin-top: 2px; font-size: .82rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ob-kv { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: .74rem; color: var(--text-muted); }
.ob-kv b { color: var(--text-main); font-weight: 700; }
.ob-more { border-left-width: 1px; margin-top: 10px; }
.ob-more > summary { cursor: pointer; padding: 12px 14px; font-size: .84rem; font-weight: 800; color: var(--primary); list-style: none; text-align: center; }
.ob-more > summary::-webkit-details-marker { display: none; }
.ob-more[open] > summary { border-bottom: 1px solid var(--border-color); }
.ob-more > .ob-month, .ob-more > .ob-year { margin: 10px; }
.ob-more > .ob-year { margin: 12px 14px 0; }
.ob-empty-filter { display: none; padding: 18px; text-align: center; color: var(--text-muted); font-size: .88rem; }
.ob-wrap[data-filter="open"] .ob-month[data-open="0"], .ob-wrap[data-filter="paid"] .ob-month[data-open="1"] { display: none; }
.ob-wrap.is-empty .ob-empty-filter { display: block; }

/* ================= 2. WHERE MY PAYMENTS WENT ================= */
.al-total { padding: 16px; margin-bottom: 14px; border-radius: 18px; background: linear-gradient(160deg, #f4fbf7, #dcf0e5); border: 1px solid #bfe3cf; }
.al-total-lbl { font-size: .78rem; font-weight: 700; color: #3d6150; }
.al-total-val { font-size: 1.7rem; font-weight: 800; color: #0f3626; font-variant-numeric: tabular-nums; }
.al-split { display: block; width: 100%; height: 10px; margin: 10px 0 8px; border-radius: 99px; overflow: hidden; background: #e2eae6; }
.al-split rect { fill: var(--fc); }
.al-split rect.f-savings { fill: var(--f-savings); } .al-split rect.f-fdf { fill: var(--f-fdf); } .al-split rect.f-wd { fill: var(--f-wd); }
.al-split rect.f-renewal { fill: var(--f-renewal); } .al-split rect.f-fine { fill: var(--f-fine); } .al-split rect.f-other { fill: var(--f-other); }
.al-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .78rem; color: var(--text-muted); }
.al-legend span { display: inline-flex; align-items: center; gap: 6px; }
.al-legend i { width: 10px; height: 10px; border-radius: 50%; background: var(--fc); }
.al-legend b { color: var(--text-main); }
.al-list { display: grid; gap: 10px; }
.al-card { padding: 14px; border: 1px solid var(--border-color); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm); }
.al-top { display: flex; align-items: center; gap: 12px; }
.al-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--primary-light); color: var(--primary); }
.al-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.al-mid { flex: 1; min-width: 0; }
.al-title { font-weight: 750; font-size: .92rem; overflow-wrap: anywhere; }
.al-when { font-size: .74rem; color: var(--text-muted); }
.al-amt { font-weight: 800; font-size: 1rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.al-card .al-split { margin: 12px 0 8px; height: 8px; }
.al-parts { display: grid; gap: 8px; }
.al-part { display: flex; align-items: center; gap: 10px; }
.al-pic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--fc); color: #fff; }
.al-pic svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.al-pmid { flex: 1; min-width: 0; }
.al-pname { font-weight: 700; font-size: .86rem; }
.al-pmonths { font-size: .72rem; color: var(--text-muted); }
.al-pamt { font-weight: 800; font-size: .88rem; font-variant-numeric: tabular-nums; }

/* ================= 3. INTEREST & ANNUAL PROFIT ================= */
.pf-hero { position: relative; overflow: hidden; padding: 20px 18px; border-radius: 20px; color: #fff;
  background: radial-gradient(110% 130% at 100% 0%, #f0cd7c33 0%, transparent 55%), linear-gradient(150deg, #1f6b4a 0%, #0f3626 100%); box-shadow: var(--shadow-md); }
.pf-hero::after { content: ""; position: absolute; right: -30px; bottom: -40px; width: 150px; height: 150px; border-radius: 50%; border: 22px solid rgba(224,176,74,.18); }
.pf-hero-lbl { font-size: .8rem; font-weight: 700; color: #bfe3cf; letter-spacing: .03em; }
.pf-hero-val { margin-top: 4px; font-size: 2rem; font-weight: 800; line-height: 1.1; color: #f6d98f; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pf-hero-val.pf-small { font-size: 1.35rem; color: #fff; }
.pf-hero-sub { margin-top: 6px; font-size: .82rem; color: #d3eddf; }
.pf-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 10px 0 14px; }
.pf-tile { padding: 13px 14px; border-radius: 16px; border: 1px solid var(--border-color); background: var(--surface); border-top: 4px solid var(--primary-500); box-shadow: var(--shadow-sm); min-width: 0; }
.pf-tile.t-gold { border-top-color: var(--accent); } .pf-tile.t-blue { border-top-color: #3b82c4; }
.pf-tl { font-size: .74rem; font-weight: 700; color: var(--text-muted); }
.pf-tv { margin-top: 3px; font-size: 1.12rem; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pf-tn { margin-top: 2px; font-size: .72rem; color: var(--text-muted); }
.pf-wrap { margin-bottom: 4px; }
.pf-sub { margin: 16px 2px 8px; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.pf-year { padding: 12px 14px; border: 1px solid var(--border-color); border-radius: 14px; background: var(--surface); margin-bottom: 8px; }
.pf-yhead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pf-yname { font-weight: 800; }
.pf-yamt { font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; }
.pf-ybar { display: block; width: 100%; height: 8px; margin: 8px 0 6px; border-radius: 99px; overflow: hidden; }
.pf-ybar .bg { fill: #e2eae6; } .pf-ybar .fg { fill: var(--accent); }
.pf-ymeta { font-size: .74rem; color: var(--text-muted); }
#profitYearForm { margin-top: 16px; padding: 14px; border-radius: 16px; background: var(--bg-subtle); border: 1px dashed var(--border-dark); }
.pf-detail { margin-top: 12px; padding: 14px; border-radius: 16px; background: linear-gradient(160deg, #fffaf0, #fdf0cf); border: 1px solid #ecd49a; }
.pf-detail-h { margin-bottom: 8px; font-weight: 800; color: #6b4a06; }
.pf-kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid #f0dfae; font-size: .85rem; }
.pf-kv:first-of-type { border-top: 0; }
.pf-kv span { color: #7a6532; } .pf-kv b { text-align: right; overflow-wrap: anywhere; }

/* ================= 4. RECENT ACTIVITY (auditor look) ================= */
.ma-list { border: 1px solid var(--border-color); border-radius: 14px; overflow: hidden; background: var(--surface); }
.ma-day { padding: 6px 14px; background: #eef3f0; color: #3d5247; font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; border-bottom: 1px solid var(--border-color); }
.ma-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border-color); border-left: 4px solid transparent; }
.ma-row:last-child { border-bottom: 0; }
.ma-row.ok { border-left-color: #1c7c54; } .ma-row.bad { border-left-color: #b42318; } .ma-row.wait { border-left-color: #e0a43a; }
.ma-ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #9ca3af; color: #fff; }
.ma-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ma-ic.ch-mtn { background: #ffcc00; color: #111; } .ma-ic.ch-airtel { background: #ff6a00; } .ma-ic.ch-bank { background: #6b7280; }
.ma-mid { flex: 1; min-width: 0; }
.ma-title { font-weight: 750; font-size: .9rem; line-height: 1.25; }
.ma-sub { font-size: .8rem; color: var(--text-main); overflow-wrap: anywhere; line-height: 1.3; }
.ma-meta { margin-top: 1px; font-size: .7rem; color: var(--text-muted); }
.ma-right { flex: none; text-align: right; max-width: 46%; }
.ma-amt { font-weight: 800; font-size: .95rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ma-row.ok .ma-amt { color: #1c7c54; } .ma-row.bad .ma-amt { color: #b42318; }
.ma-pill { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 99px; font-size: .64rem; font-weight: 800; vertical-align: middle; background: #e6ede9; color: #3d4f46; }
.ma-pill.ok { background: var(--success-light); color: #0f5d3c; } .ma-pill.bad { background: var(--danger-light); color: #9a1a10; } .ma-pill.wait { background: var(--warning-light); color: #7a4504; }

/* ================= PAUSE MY ACCOUNT (freeze) ================= */
#freezeRequestCard { position: relative; overflow: hidden; border-color: #bcd8ec;
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(120,180,225,.35) 0%, transparent 60%),
    radial-gradient(70% 60% at 0% 100%, rgba(170,210,235,.4) 0%, transparent 65%),
    linear-gradient(165deg, #f4faff 0%, #e2f0fa 55%, #d3e7f5 100%); }
#freezeRequestCard::after { content: ""; position: absolute; right: -26px; bottom: -26px; width: 170px; height: 170px; opacity: .13; pointer-events: none;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f5fa8' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M12 2v20M3.3 7l17.4 10M3.3 17 20.7 7M9 4l3 2 3-2M9 20l3-2 3 2'/%3E%3C/svg%3E"); }
#freezeRequestCard > * { position: relative; z-index: 1; }
#route-account #freezeRequestCard.card > .card-header { background: linear-gradient(135deg, #17497a, #2a7fa8); }
.fz-intro { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.fz-badge { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #1f5fa8; color: #fff; box-shadow: 0 8px 18px -8px rgba(31,95,168,.7); }
.fz-badge svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fz-intro p { margin: 0; font-size: .88rem; color: #1d3f63; line-height: 1.45; }
.fz-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 560px) { .fz-grid { grid-template-columns: 1fr 1fr; } }
.fz-tile { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.72); border: 1px solid #cfe2f1; backdrop-filter: blur(4px); font-size: .82rem; color: #1d3f63; line-height: 1.4; }
.fz-ti { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; background: #dcebf8; color: #1f5fa8; }
.fz-ti svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fz-panel { display: flex; gap: 12px; padding: 14px; border-radius: 16px; border: 1px solid #cfe2f1; background: rgba(255,255,255,.8); color: #1d3f63; font-size: .88rem; line-height: 1.45; }
.fz-panel strong { display: block; margin-bottom: 2px; }
.fz-panel.wait { border-color: #ecd49a; background: rgba(255,246,222,.9); color: #6b4a06; }
.fz-panel.bad { border-color: #f1bdb8; background: rgba(253,233,231,.92); color: #8a1a10; }
.fz-panel.ok { border-color: #a9dcc0; background: rgba(228,246,236,.92); color: #0e5a3a; }
.fz-panel .fz-badge { width: 38px; height: 38px; }
.fz-panel.wait .fz-badge { background: #c98a12; } .fz-panel.bad .fz-badge { background: #b42318; } .fz-panel.ok .fz-badge { background: #1c7c54; }
.fz-note { margin-top: 10px; }

/* ================= FDF PROFIT ================= */
#fdfProfitCard { position: relative; overflow: hidden; border-color: #ecd49a;
  background: radial-gradient(90% 70% at 100% 0%, rgba(240,205,124,.35) 0%, transparent 60%), linear-gradient(165deg, #fffdf6 0%, #fdf3d9 100%); }
#fdfProfitCard::after { content: ""; position: absolute; left: -40px; bottom: -50px; width: 170px; height: 170px; border-radius: 50%; border: 24px solid rgba(224,176,74,.14); pointer-events: none; }
#fdfProfitCard > * { position: relative; z-index: 1; }
.fp-note { margin: 0 0 12px; font-size: .84rem; color: #6b5a2a; line-height: 1.45; }
.fp-card { margin-bottom: 12px; border-radius: 18px; overflow: hidden; background: var(--surface); border: 1px solid #ecd49a; box-shadow: var(--shadow-sm); }
.fp-top { padding: 16px; color: #fff; background: linear-gradient(150deg, #1f6b4a, #0f3626); }
.fp-top-lbl { font-size: .76rem; font-weight: 700; color: #bfe3cf; }
.fp-top-val { margin-top: 2px; font-size: 1.8rem; font-weight: 800; color: #f6d98f; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fp-top-sub { margin-top: 2px; font-size: .76rem; color: #d3eddf; }
.fp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0; border-bottom: 1px solid #f0e2b8; }
.fp-stat { padding: 11px 14px; border-right: 1px solid #f0e2b8; min-width: 0; }
.fp-stat:last-child { border-right: 0; }
.fp-stat span { display: block; font-size: .7rem; font-weight: 700; color: var(--text-muted); }
.fp-stat b { display: block; margin-top: 2px; font-size: .94rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fp-body { padding: 12px 14px 14px; }
.fp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.fp-actions .btn { flex: 1 1 130px; }

/* ================= PROFILE PHOTO ================= */
.acct-avatar { position: relative; overflow: visible; }
.acct-avatar .av-img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.acct-avatar.has-photo { color: transparent; }
.av-edit { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: #e0b04a; color: #3b2a02; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,.35); }
.av-edit svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.av-note { margin-top: 8px; font-size: .74rem; color: rgba(255,255,255,.75); }
.av-modal-preview { display: block; width: 180px; height: 180px; margin: 0 auto 14px; border-radius: 50%; object-fit: cover; border: 4px solid var(--primary-light); background: var(--bg-subtle); }
.sidebar-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; margin-bottom: 8px; border: 2px solid rgba(255,255,255,.4); }

@media (prefers-reduced-motion: no-preference) {
  .ob-month, .al-card, .fp-card { transition: box-shadow .2s ease; }
  .ob-month:hover, .al-card:hover { box-shadow: var(--shadow-md); }
}

.fp-actions > div { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.fp-actions > div > .btn { flex: 1 1 130px; margin: 0; }
.fp-actions > .form-help { width: 100%; }