/* Frenzon SACCO — theme.css: polish layer. Load AFTER style.css. Presentation only. */

:root {
    --primary: #14532d;
    --primary-hover: #0b3a1f;
    --accent: #2f9e6b;
    --accent-hover: #237a52;
    --bg-main: #f3f6f4;
    --radius-md: 14px;
    --radius-lg: 20px;
    --ring: 0 0 0 3px rgba(47, 158, 107, .28);
    --shadow-card: 0 1px 2px rgba(16, 40, 28, .06), 0 6px 18px -8px rgba(16, 40, 28, .12);
}

body { background: var(--bg-main); letter-spacing: -.005em; }

/* ---- Sidebar: deep green ---- */
.sidebar { background: linear-gradient(180deg, #0f3d24 0%, #0a2a19 100%); border-right: 0; }
.sidebar-header { border-bottom-color: rgba(255, 255, 255, .08); }
.sidebar-brand { color: #fff; }
.sidebar-subtitle, .nav-section-title { color: rgba(255, 255, 255, .55); }
.nav-item { color: rgba(255, 255, 255, .78); }
.nav-item:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav-item.active { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 3px 0 0 var(--accent); }
.sidebar-footer { border-top-color: rgba(255, 255, 255, .08); }
.sidebar-user { background: rgba(255, 255, 255, .08); }
.sidebar-user-name { color: #fff; }
.sidebar-user-number { color: rgba(255, 255, 255, .6); }
.sidebar-footer .btn-outline { color: #fff; border-color: rgba(255, 255, 255, .3); }
.sidebar-footer .btn-outline:hover { background: rgba(255, 255, 255, .1); }

/* ---- Top bar ---- */
.topbar { background: rgba(255, 255, 255, .86); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); }
.topbar-actions { position: relative; }
.notification-badge { position: absolute; top: -6px; right: -6px; border: 2px solid #fff; pointer-events: none; }

/* ---- Cards & stats ---- */
.card, .stat-card { border-color: transparent; box-shadow: var(--shadow-card); }
.stat-card { border-top: 3px solid var(--accent); transition: transform .2s, box-shadow .2s; }
.stat-card:hover { transform: translateY(-2px); }
.stat-value { letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat-icon { background: linear-gradient(135deg, #d8f3dc, #b7e4c7); font-weight: 700; }
.card-title { letter-spacing: -.01em; }
.page-title { letter-spacing: -.02em; }

/* ---- Buttons & fields ---- */
.btn-primary { background: linear-gradient(180deg, #1b6b3b, var(--primary)); box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
.btn-primary:hover { background: var(--primary-hover); }
.btn:active { transform: scale(.98); }
.form-control:focus, button:focus-visible { box-shadow: var(--ring); }
.form-control { border-radius: 10px; }

/* ---- Tabs as pills ---- */
.tabs { border-bottom: 0; gap: .4rem; padding-bottom: .25rem; scrollbar-width: none; scroll-snap-type: x proximity; }
.tabs::-webkit-scrollbar { display: none; }
.tab-button { border: 1px solid var(--border-color); border-radius: 999px; background: #fff; scroll-snap-align: start; }
.tab-button.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ---- Tables & lists ---- */
.table tbody tr:nth-child(even) { background: #fafcfb; }
.table td { font-variant-numeric: tabular-nums; }
.loan-card, .guarantor-item { transition: box-shadow .2s; }
.loan-card:hover { box-shadow: var(--shadow-lg); }
.empty-state { background: var(--bg-subtle); border-radius: var(--radius-md); }

/* Fix: activity icon showed a Ghana cedi sign; show a neutral currency mark instead */
.activity-icon { font-size: 0; }
.activity-icon::before { content: "\00A4"; font-size: 1rem; font-weight: 700; }

/* ---- Auth screen ---- */
.auth-wrapper { background: radial-gradient(1200px 600px at 10% -10%, #d8f3dc 0%, transparent 60%), linear-gradient(135deg, #f3f6f4, #e3f1e9); }
.auth-card { border: 0; }

/* ---- Modals ---- */
.modal { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.modal.open .modal-dialog { animation: frenzon-rise .22s ease-out; }
@keyframes frenzon-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---- Mobile ---- */
@media (max-width: 768px) {
    /* 16px stops iOS from zooming into fields */
    .form-control { font-size: 16px; min-height: 46px; }
    .btn { min-height: 44px; }
    .bottom-nav { grid-template-columns: repeat(5, 1fr); height: calc(64px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); }
    .bottom-nav-item { position: relative; font-weight: 600; }
    .bottom-nav-item.active::before { content: ""; position: absolute; top: 0; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); }
    .main-content { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
    .modal-dialog { animation: frenzon-sheet .25s ease-out; }
}
@keyframes frenzon-sheet { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }