/* --- SCREEN MANAGEMENT & SCROLLING FIX --- */
.screen { 
    display: none; 
    flex-direction: column; 
    height: 100%; 
    width: 100%; 
    overflow-y: auto; 
    padding-bottom: 90px; /* Increased so the last item clears the bottom nav */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iPhones */
}
.screen.active { 
    display: flex; 
}

/* --- DARK GREEN BACKGROUND FOR ALL MAIN TABS --- */
#screen-home, 
#screen-miradi, 
#screen-tuzo, 
#screen-share, 
#screen-profile {
    background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
    background-attachment: fixed;
}

/* --- MAELEZO SCREEN BACKGROUND (LIGHT GREEN) --- */
#screen-maelezo {
    background: linear-gradient(180deg, #e8f5e9 0%, #c8e6c9 100%);
    padding-bottom: 0;
}

/* Fix text colors for dark backgrounds */
#screen-home h3, 
#screen-share h2,
#screen-profile .profile-header h2 {
    color: #ffffff;
    font-weight: 600;
}

#miradi-empty-state h3 {
    color: #fff !important;
    font-weight: 600;
}
#miradi-empty-state p {
    color: #ccc !important;
}

/* --- BOTTOM NAVIGATION --- */
.bottom-nav { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 70px; 
    background: rgba(255, 255, 255, 0.95); 
    backdrop-filter: blur(10px);
    display: flex; 
    justify-content: space-around; 
    align-items: center; 
    border-top: 1px solid rgba(0,0,0,0.05); 
    z-index: 10; 
}
.nav-item { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    color: #999; 
    font-size: 11px; 
    font-weight: 500;
    cursor: pointer; 
    width: 20%; 
    transition: color 0.3s;
}
.nav-item i { 
    font-size: 22px; 
    margin-bottom: 4px; 
}
.nav-item.active { 
    color: #002366; /* Navy Blue */
}

/* --- HOME TOP ACTIONS --- */
.home-top-actions { 
    display: flex; 
    justify-content: space-around; 
    padding: 20px 10px; 
    background: rgba(255, 255, 255, 0.1); 
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    margin: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); 
    flex-shrink: 0; /* Prevents it from squishing */
}
.home-top-item { 
    text-align: center; 
    font-size: 12px; 
    font-weight: 500;
    color: #fff; 
    cursor: pointer; 
}
.icon-wrapper {
    width: 55px;
    height: 55px;
    background: linear-gradient(135deg, #002366, #001a4d);
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 8px auto;
    box-shadow: 0 4px 10px rgba(0, 35, 102, 0.4);
}
.icon-wrapper i {
    color: #fff;
    font-size: 24px;
}

/* --- HOME GRID & ALTERNATING CARD COLORS --- */
.home-grid { 
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 15px; 
    padding: 0 15px; 
}
.grid-card { 
    border-radius: 16px; 
    padding: 12px; 
    box-shadow: 0 8px 20px rgba(0,0,0,0.3); 
    position: relative;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.2);
    transition: transform 0.2s;
}
.grid-card:hover {
    transform: translateY(-3px);
}

.grid-card:nth-child(odd) {
    background: linear-gradient(135deg, #ffca28, #ffb300); 
    border-color: #ffca28;
}
.grid-card:nth-child(even) {
    background: linear-gradient(135deg, #ff9800, #f57c00); 
    border-color: #ff9800;
}

.grid-card h4 { 
    font-size: 16px; 
    margin-bottom: 5px; 
    color: #111; 
    font-weight: 700; 
}
.grid-card .timestamp { 
    font-size: 12px; 
    color: rgba(0,0,0,0.6); 
    margin-bottom: 12px; 
    font-weight: 500;
}
.grid-card .footer-row { 
    display: flex; 
    justify-content: space-between; 
    font-size: 14px; 
    font-weight: 600;
    color: #222; 
    border-top: 1px dashed rgba(0,0,0,0.2); 
    padding-top: 12px; 
}
.grid-card .footer-row span:first-child {
    color: #000; 
    text-decoration: underline;
}
.grid-card .footer-row span:last-child {
    color: #000; 
    font-weight: 700;
}
.grid-card img {
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    height: 180px; 
    width: 100%;
    object-fit: cover;
    margin-bottom: 10px;
}

/* --- PROFILE --- */
.profile-header { 
    background: transparent; 
    padding: 25px 20px; 
    position: relative; 
    text-align: center; 
    flex-shrink: 0;
}
.profile-header h2 { 
    font-size: 20px; 
    margin-bottom: 25px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}
.nuru-bg-logo { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    font-size: 80px; 
    font-weight: 900; 
    color: rgba(255, 255, 255, 0.05); 
    z-index: 0; 
    pointer-events: none; 
}
.phone-badge { 
    background: linear-gradient(135deg, #002366, #001a4d); 
    color: white; 
    padding: 8px 18px; 
    border-radius: 30px; 
    font-weight: 600; 
    position: relative; 
    z-index: 1; 
    display: inline-block; 
    font-size: 14px;
    box-shadow: 0 4px 10px rgba(0, 35, 102, 0.3);
}
.card { 
    background: #fff; 
    border-radius: 16px; 
    padding: 20px; 
    margin: 15px; 
    box-shadow: 0 8px 20px rgba(0,0,0,0.2); 
    position: relative; 
    z-index: 1; 
    flex-shrink: 0; /* Prevents the card from getting squished */
}
.action-row { 
    display: flex; 
    justify-content: space-around; 
    padding-bottom: 20px; 
    border-bottom: 1px solid #f0f0f0; 
}
.action-item { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    color: #333; 
    font-size: 14px; 
    font-weight: 600;
    cursor: pointer; 
}
.action-item i { 
    color: #002366; 
    font-size: 22px; 
}
.balance-row { 
    display: flex; 
    justify-content: space-between; 
    margin-top: 15px; 
    font-size: 15px; 
    font-weight: 500;
    color: #555; 
}
.balance-row .amount { 
    font-weight: 700; 
    color: #222; 
}

/* --- LIST MENU --- */
.list-menu { 
    background: #fff; 
    border-radius: 16px; 
    margin: 15px; 
    overflow: hidden; 
    box-shadow: 0 8px 20px rgba(0,0,0,0.2); 
    flex-shrink: 0;
}
.list-item { 
    display: flex; 
    align-items: center; 
    padding: 18px 20px; 
    border-bottom: 1px solid #f0f0f0; 
    cursor: pointer; 
}
.list-item:last-child { 
    border-bottom: none; 
}
.list-item i { 
    color: #002366; 
    font-size: 22px; 
    margin-right: 15px; 
    width: 24px; 
    text-align: center; 
}
.list-item span { 
    flex: 1; 
    font-size: 15px; 
    font-weight: 500;
    color: #333; 
}
.list-item .chevron { 
    color: #ccc; 
    font-size: 16px; 
}

/* --- SHARE --- */
.share-stats { 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
    margin: 15px; 
}
.share-stat-card { 
    background: #fff; 
    border-radius: 16px; 
    padding: 20px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    box-shadow: 0 8px 20px rgba(0,0,0,0.2); 
}
.share-stat-card .stats-left { 
    display: flex; 
    gap: 40px; 
    font-size: 13px; 
    text-align: center; 
}
.share-stat-card .stats-left b { 
    display: block; 
    font-size: 18px; 
    color: #222; 
    font-weight: 700;
    margin-bottom: 4px;
}
.share-stat-card .stats-left span { 
    font-size: 11px; 
    color: #888; 
    font-weight: 500;
}
.referral-box { 
    background: #fff; 
    border-radius: 16px; 
    margin: 15px; 
    padding: 25px; 
    text-align: center; 
    box-shadow: 0 8px 20px rgba(0,0,0,0.2); 
}
.referral-image-placeholder { 
    width: 150px; 
    height: 150px; 
    margin: 0 auto 20px auto; 
}
.referral-row { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 15px 0; 
    border-bottom: 1px solid #f0f0f0; 
    font-size: 14px; 
    font-weight: 500;
}
.referral-row:last-child { 
    border-bottom: none; 
}
.referral-row .copy-btn { 
    color: #002366; 
    cursor: pointer; 
    font-size: 20px; 
}

/* --- MIRADI --- */
.miradi-header-stats { 
    display: flex; 
    background: rgba(255, 255, 255, 0.1); 
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px; 
    justify-content: space-around; 
    text-align: center; 
    margin: 15px;
    border-radius: 16px;
}
.miradi-header-stats div { 
    font-size: 13px; 
    color: #fff; 
    font-weight: 500;
}
.miradi-header-stats b { 
    display: block; 
    font-size: 18px; 
    margin-bottom: 5px; 
    color: #fff;
    font-weight: 700;
}
.project-card { 
    background: #fff; 
    margin: 15px; 
    padding: 20px; 
    border-radius: 16px; 
    display: flex; 
    justify-content: space-between; 
    box-shadow: 0 8px 20px rgba(0,0,0,0.2); 
}
.project-details { 
    flex: 1; 
    font-size: 13px; 
    color: #555; 
    line-height: 1.8; 
    font-weight: 500;
}
.project-details h4 { 
    font-size: 16px; 
    color: #222; 
    margin-bottom: 12px; 
    font-weight: 600;
}
.project-details .price { 
    font-weight: 700; 
    color: #002366; 
    margin-top: 8px; 
    font-size: 15px;
}
.project-image { 
    width: 100px; 
    height: 100px; 
    margin-left: 15px; 
    border-radius: 12px;
    object-fit: cover;
}

/* --- TUZO ZA TIMU --- */
.rewards-header { 
    background: rgba(255, 255, 255, 0.1); 
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 30px 20px; 
    color: white; 
    border-radius: 16px; 
    text-align: center; 
    margin: 15px; 
}
.rewards-header h2 { 
    font-size: 16px; 
    margin-bottom: 12px; 
    font-weight: 500; 
    opacity: 0.9;
}
.rewards-header .total-amount { 
    font-size: 36px; 
    font-weight: 700; 
    margin-bottom: 8px; 
}
.rewards-header .sub-text { 
    font-size: 13px; 
    opacity: 0.8; 
    font-weight: 400;
}
.reward-tier-card { 
    background: #fff; 
    border-radius: 16px; 
    padding: 20px; 
    margin: 0 15px 15px 15px; 
    box-shadow: 0 8px 20px rgba(0,0,0,0.2); 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}
.reward-tier-info h4 { 
    font-size: 16px; 
    color: #222; 
    margin-bottom: 6px; 
    font-weight: 600;
}
.reward-tier-info p { 
    font-size: 12px; 
    color: #888; 
    font-weight: 500;
}
.reward-tier-amount { 
    text-align: right; 
}
.reward-tier-amount .amount { 
    font-size: 18px; 
    font-weight: 700; 
    color: #002366; 
    display: block; 
    margin-bottom: 8px; 
}
.reward-tier-amount .status { 
    font-size: 11px; 
    background: #e3f2fd; 
    color: #002366; 
    padding: 4px 10px; 
    border-radius: 12px; 
    font-weight: 600; 
}
.activity-section-title { 
    font-size: 18px; 
    color: #fff; 
    margin: 25px 15px 12px 15px; 
    font-weight: 600; 
}
.activity-list { 
    background: #fff; 
    border-radius: 16px; 
    margin: 0 15px 20px 15px; 
    overflow: hidden; 
    box-shadow: 0 8px 20px rgba(0,0,0,0.2); 
}
.activity-item { 
    display: flex; 
    align-items: center; 
    padding: 18px; 
    border-bottom: 1px solid #f0f0f0; 
}
.activity-item:last-child { 
    border-bottom: none; 
}
.activity-icon { 
    width: 45px; 
    height: 45px; 
    border-radius: 50%; 
    background: #e3f2fd; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    color: #002366; 
    margin-right: 15px; 
    font-size: 20px; 
}
.activity-details { 
    flex: 1; 
}
.activity-details h5 { 
    font-size: 15px; 
    color: #222; 
    margin-bottom: 4px; 
    font-weight: 600;
}
.activity-details p { 
    font-size: 12px; 
    color: #999; 
    font-weight: 500;
}
.activity-amount { 
    font-size: 15px; 
    font-weight: 700; 
    color: #28a745; 
}

/* --- MAELEZO --- */
.details-header { 
    background: transparent; 
    padding: 18px 20px; 
    display: flex; 
    align-items: center; 
    border-bottom: none; 
    position: sticky; 
    top: 0; 
    z-index: 10; 
}
.details-header i { 
    font-size: 22px; 
    color: #1b5e20; 
    cursor: pointer; 
    margin-right: 15px; 
}
.details-header h2 { 
    font-size: 20px; 
    color: #1b5e20; 
    font-weight: 700;
}
.details-image-container { 
    width: 100%; 
    height: 280px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    margin-bottom: 10px; 
    position: relative;
}
.details-image-container::before {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    background: rgba(76, 175, 80, 0.3);
    border-radius: 50%;
    filter: blur(40px);
    z-index: 0;
}
.details-image-container img {
    width: 80%; 
    height: 80%; 
    object-fit: contain;
    z-index: 1;
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.15));
}
.details-info-card { 
    background: #fff; 
    border-radius: 24px 24px 0 0; 
    margin: 0 15px 20px 15px; 
    padding: 30px 25px; 
    box-shadow: 0 -10px 30px rgba(0,0,0,0.1); 
    position: relative;
    z-index: 2;
}
.details-info-card h3 { 
    font-size: 24px; 
    color: #111; 
    margin-bottom: 8px; 
    font-weight: 700;
}
.details-info-card .price-large { 
    font-size: 28px; 
    font-weight: 800; 
    color: #002366; 
    margin-bottom: 30px; 
    display: block; 
    letter-spacing: -0.5px;
}
.details-row { 
    display: flex; 
    justify-content: space-between; 
    padding: 16px 0; 
    border-bottom: 1px dashed #e0e0e0; 
    font-size: 15px; 
    font-weight: 500;
}
.details-row:last-child { 
    border-bottom: none; 
}
.details-row .label { 
    color: #777; 
}
.details-row .value { 
    font-weight: 700; 
    color: #222; 
}
.details-action-btn { 
    width: calc(100% - 30px); 
    margin: 0 15px 25px 15px; 
    padding: 18px; 
    background: linear-gradient(135deg, #002366, #001a4d); 
    color: white; 
    border: none; 
    border-radius: 16px; 
    font-size: 18px; 
    font-weight: 700; 
    cursor: pointer; 
    box-shadow: 0 10px 25px rgba(0, 35, 102, 0.4);
    transition: transform 0.2s;
}
.details-action-btn:hover {
    transform: translateY(-2px);
}

/* --- BIND ACCOUNT --- */
.form-screen { 
    background: #fff; 
    padding: 25px 20px; 
    height: 100%; 
}
.form-screen h2 { 
    font-size: 20px; 
    margin-bottom: 25px; 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    font-weight: 600;
}
.form-row { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 18px 0; 
    border-bottom: 1px solid #f0f0f0; 
    font-size: 15px; 
    font-weight: 500;
}
.form-row input, .form-row select { 
    border: none; 
    outline: none; 
    text-align: right; 
    font-size: 15px; 
    color: #222; 
    width: 60%; 
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
}

/* --- SETTINGS / CUSTOMER SERVICE / LOGS --- */
.simple-screen { 
    background: #fff; 
    padding: 25px 20px; 
    height: 100%; 
}
.simple-header { 
    display: flex; 
    align-items: center; 
    margin-bottom: 25px; 
    font-size: 20px; 
    font-weight: 600;
    gap: 15px; 
}
.simple-header i { 
    cursor: pointer; 
}
.log-item { 
    border-bottom: 1px solid #f0f0f0; 
    padding: 18px 0; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}
.log-item:last-child { 
    border-bottom: none; 
}
.log-details h5 { 
    font-size: 15px; 
    color: #222; 
    margin-bottom: 6px; 
    font-weight: 600;
}
.log-details p { 
    font-size: 13px; 
    color: #888; 
    font-weight: 500;
}
.log-amount { 
    font-weight: 700; 
    font-size: 15px; 
}
.log-amount.positive { 
    color: #28a745; 
}
.log-amount.negative { 
    color: #dc3545; 
}
.service-btn { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 12px; 
    width: 100%; 
    padding: 16px; 
    margin-bottom: 15px; 
    border-radius: 12px; 
    text-decoration: none; 
    font-weight: 600; 
    font-size: 15px;
    color: white; 
    transition: transform 0.2s;
}
.service-btn:hover {
    transform: translateY(-2px);
}
.service-btn.whatsapp { 
    background-color: #25D366; 
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}
.service-btn.call { 
    background: linear-gradient(135deg, #002366, #001a4d); 
    box-shadow: 0 4px 15px rgba(0, 35, 102, 0.3);
}

/* --- TOAST --- */
.toast { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    background: #fff; 
    padding: 15px 25px; 
    border-radius: 12px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); 
    display: none; 
    align-items: center; 
    gap: 12px; 
    font-size: 15px; 
    font-weight: 600;
    z-index: 100; 
}
.toast i { 
    color: green; 
    font-size: 24px; 
}

/* --- RECHARGE & WITHDRAW MODALS --- */
.modal-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.6); 
    display: none; 
    z-index: 50; 
    justify-content: center; 
    align-items: flex-end; 
}
.modal-overlay.active { 
    display: flex; 
}
.modal-content { 
    background: #fff; 
    width: 100%; 
    border-radius: 24px 24px 0 0; 
    padding: 25px; 
    max-height: 90%; 
    overflow-y: auto; 
    animation: slideUp 0.3s ease-out; 
}
@keyframes slideUp { 
    from { transform: translateY(100%); } 
    to { transform: translateY(0); } 
}
.modal-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 25px; 
    font-size: 18px; 
    font-weight: 600; 
}
.modal-header i { 
    cursor: pointer; 
    font-size: 22px; 
    color: #333; 
}
.amount-input-box { 
    background: #f5f6f8; 
    border-radius: 12px; 
    padding: 18px; 
    margin-bottom: 20px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}
.amount-input-box input { 
    border: none; 
    background: transparent; 
    font-size: 26px; 
    font-weight: 700; 
    color: #222; 
    outline: none; 
    width: 60%; 
    font-family: 'Poppins', sans-serif;
}
.amount-input-box .currency { 
    color: #777; 
    font-size: 15px; 
    font-weight: 600;
}
.channel-selector { 
    display: flex; 
    justify-content: space-between; 
    margin-bottom: 25px; 
}
.channel-box { 
    width: 23%; 
    height: 65px; 
    border: 2px solid #eee; 
    border-radius: 12px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-size: 12px; 
    font-weight: 600;
    color: #555; 
    cursor: pointer; 
    background: #fff; 
    transition: all 0.3s;
}
.channel-box.selected { 
    border-color: #002366; 
    background-color: #f0faff; 
    color: #002366;
}
.ngwepay-container { 
    background: #fff; 
    border-radius: 16px; 
    border: 1px solid #eee; 
    padding: 20px; 
    margin-top: 15px; 
}
.ngwepay-header { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    font-weight: 700; 
    font-size: 16px; 
    margin-bottom: 8px; 
}
.ngwepay-header i { 
    color: #002366; 
    font-size: 22px; 
}
.ngwepay-sub { 
    font-size: 13px; 
    color: #777; 
    margin-bottom: 20px; 
    font-weight: 500;
}
.payment-details { 
    background: #f8f9fa; 
    border-radius: 12px; 
    padding: 18px; 
    margin-bottom: 20px; 
}
.payment-row { 
    margin-bottom: 18px; 
}
.payment-row:last-child { 
    margin-bottom: 0; 
}
.payment-row label { 
    font-size: 12px; 
    color: #777; 
    display: block; 
    margin-bottom: 6px; 
    font-weight: 600;
}
.payment-row .value-row { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}
.payment-row .value { 
    font-size: 20px; 
    font-weight: 700; 
    color: #d97706; 
}
.payment-row .copy-btn { 
    color: #777; 
    cursor: pointer; 
    font-size: 20px; 
    transition: color 0.2s;
}
.payment-row .copy-btn:hover {
    color: #002366;
}
.status-box { 
    background: #f8f9fa; 
    border-radius: 12px; 
    padding: 20px; 
    text-align: center; 
    border-left: 4px solid #002366; 
}
.status-box .timer { 
    font-size: 28px; 
    font-weight: 700; 
    letter-spacing: 3px; 
    margin-bottom: 15px; 
    color: #222;
}
.status-box .refresh-btn { 
    background: linear-gradient(135deg, #d97706, #b45309); 
    color: white; 
    border: none; 
    padding: 10px 25px; 
    border-radius: 25px; 
    font-weight: 600; 
    font-size: 14px;
    cursor: pointer; 
    box-shadow: 0 4px 10px rgba(217, 119, 6, 0.3);
    transition: transform 0.2s;
}
.status-box .refresh-btn:hover {
    transform: scale(1.05);
}
.hidden { 
    display: none !important; 
}