/* --- BRANDING VARIABLES --- */
:root {
    --primary-color: #0d47a1; /* Deep Blue */
    --accent-color: #0073aa;  /* WP Blue */
    --success-color: #2e7d32; /* Green */
    --danger-color: #c62828;  /* Red */
    --bg-color: #f4f6f8;
    --card-bg: #ffffff;
    --text-main: #333333;
    --text-muted: #666666;
    --radius: 12px;
}

body {
    background-color: var(--bg-color);
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    margin: 0; padding: 0;
    padding-bottom: 80px; /* Space for bottom nav */
}

/* --- LAYOUT & CARDS --- */
.msc-app-content { padding: 15px; max-width: 600px; margin: 0 auto; }

.msc-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.03);
}

.msc-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}
.msc-card-title { font-size: 16px; font-weight: 600; color: var(--text-main); margin: 0; }
.view-all-link { font-size: 12px; color: var(--accent-color); text-decoration: none; font-weight: 500; }

/* --- WELCOME SECTION --- */
.welcome-header { margin-bottom: 20px; }
.welcome-sub { font-size: 13px; color: var(--text-muted); }
.user-name { font-size: 22px; font-weight: 700; color: var(--primary-color); display: block; }

/* --- BALANCE CARD --- */
.balance-card {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: white;
    text-align: center;
    padding: 25px;
}
.balance-label { font-size: 14px; opacity: 0.9; display: block; margin-bottom: 5px; }
.balance-amount { font-size: 32px; font-weight: 700; }

/* --- STATS GRID --- */
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat-item {
    background: white;
    padding: 15px;
    border-radius: var(--radius);
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    position: relative;
    overflow: hidden;
    text-decoration: none; /* Link er jonno */
    display: block;
}
.stat-item::before {
    content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%;
}
.stat-item.members::before { background: var(--primary-color); }
.stat-item.clients::before { background: #f39c12; }
.stat-item.dps::before { background: var(--success-color); }
.stat-item.loans::before { background: var(--danger-color); }

.stat-value { font-size: 20px; font-weight: 700; color: var(--text-main); display: block; }
.stat-label { font-size: 12px; color: var(--text-muted); display: block; margin-top: 5px; }

/* --- BOTTOM NAV --- */
.msc-bottom-nav {
    position: fixed; bottom: 0; left: 0; width: 100%;
    background: white;
    display: flex; justify-content: space-around;
    padding: 10px 0;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    z-index: 9999;
}
.msc-bottom-nav a {
    text-decoration: none;
    display: flex; flex-direction: column; align-items: center;
    color: #999; font-size: 10px; width: 20%;
}
.msc-bottom-nav a .icon { font-size: 20px; margin-bottom: 4px; }
.msc-bottom-nav a.active { color: var(--primary-color); font-weight: 600; }
.msc-bottom-nav a.active .icon { transform: translateY(-3px); transition: 0.2s; }
.msc-bottom-nav a.logout-btn { color: var(--danger-color); }
/* --- FLOATING ADD BUTTON (Global) --- */
.floating-add-btn {
    position: fixed;
    bottom: 85px; /* মেনুর একটু উপরে */
    right: 20px;  /* ডান পাশে */
    width: 55px;
    height: 55px;
    background-color: var(--primary-color); /* থিমের নীল কালার */
    color: white;
    border-radius: 50%; /* গোল করার জন্য */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* ছায়া */
    z-index: 999; /* সবার উপরে থাকবে */
    transition: transform 0.2s ease;
    border: 2px solid white; /* সাদা বর্ডার সুন্দর লাগবে */
}

/* ক্লিক করলে একটু ছোট হবে (এনিমেশন) */
.floating-add-btn:active {
    transform: scale(0.90);
    background-color: var(--accent-color);
}