/* --- 1. Global & Layout --- */
.dashboard-container { 
    max-width: 900px; 
    margin: 40px auto; 
    padding: 20px; 
    font-family: sans-serif; 
    box-sizing: border-box; 
}

.wallet-header { color: #42b746; text-align: center; margin-bottom: 30px; }

.back-link {
    display: inline-block;
    margin-bottom: 20px;
    color: #888;
    text-decoration: none;
}

/* --- 2. Top Header Row --- */
.top-header-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch; /* Ensures all 3 boxes stay the same height */
    gap: 20px;
    margin-bottom: 30px;
    height: 160px;
    width: 100%;
}

/* --- 3. Shared Box Styles (Used by Profile and Balance) --- */
.profile-card, .balance-box {
    flex: 1;
    min-width: 0; /* Prevents text from pushing the box wider */
    background: #f9fff9;
    border: 2px solid #42b746;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15px;
    box-sizing: border-box; /* CRITICAL: Includes padding in width */
}

/* --- 4. Profile Card Specifics --- */
.card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    color: #333;
}
#tappy-id-display { font-size: 1.1rem; }
.badge-img { width: 80px; }

/* --- 5. Balance Box Specifics --- */
.balance-box { cursor: pointer; transition: 0.2s; }
.balance-box:hover { background: #eafde9; }
.balance-box p { margin: 0 0 10px 0; font-weight: 600; color: #333; }
.balance-row { display: flex; align-items: center; gap: 10px; }
.balance-icon { width: 30px; height: 30px; object-fit: contain; }
.balance-box h2 { margin: 0; font-size: 1.5rem; }
.cash-text { color: #42b746; font-weight: bold; margin-top: 5px; font-size: 0.85rem; }

/* --- 6. Actions Grid --- */
.actions-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 15px; 
}
.action-card { 
    padding: 20px; 
    border: 1px solid #ddd; 
    border-radius: 12px; 
    text-align: center; 
    cursor: pointer; 
}

#withdraw-btn {
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
}

#withdraw-btn:hover {
    background-color: #f0fff0; /* Light green hover effect */
    transform: scale(1.02); /* Slight pop-out effect */
    border: 1px solid #42b746;
}
.action-card:hover { border-color: #42b746; background: #f9fff9; }

/* --- 7. Responsive --- */
@media (max-width: 768px) {
    .top-header-row { flex-direction: column; height: auto; gap: 15px; }
    .profile-card, .balance-box { height: 160px; }
    .actions-grid { grid-template-columns: 1fr; }
}
.buy-coins-btn { display: block; margin-top: 5px; color: #42b746; font-weight: bold; text-decoration: none; font-size: 0.8rem; }
.calendar-box { background: #f9fff9; border: 2px solid #42b746; border-radius: 20px; padding: 20px; margin-bottom: 20px; text-align: center; }
.streak-grid { 
    display: grid; 
    grid-template-columns: repeat(7, 1fr); /* 7 columns for the week */
    gap: 5px; 
    margin-top: 10px; 
}
.day-box { 
    width: 30px; 
    height: 30px; 
    font-size: 0.8rem;
    /* ... keep your other existing styles ... */
}
.active-day { background-color: #42b746; color: white; }

/* Ensure the links behave like your cards */
.actions-grid a.action-card {
    text-decoration: none; /* Removes the underline */
    color: inherit;        /* Keeps the original text color */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.actions-grid a.action-card:hover {
    background-color: #f9f9f9;
    transform: translateY(-2px);
    transition: 0.2s;
}
.requirements-box { background: #fff; padding: 20px; border-radius: 12px; border: 1px solid #ddd; margin-top: 20px; }
.progress-wrapper { margin-bottom: 15px; }
.progress-bar { height: 10px; background: #eee; border-radius: 5px; overflow: hidden; margin-top: 5px; }
.progress-fill { height: 100%; background: #42b746; width: 0%; transition: width 0.5s; }