/* --- E-COMPLIMENT: REACT MATCHING THEME --- */

:root {
    /* The "React" Brand Color found in App.css */
    --primary-color: #4ba6b3; 
    --primary-hover: #3a8c99;
    
    /* Standard Colors */
    --dark-text: #2c3e50;
    --light-bg: #f3f4f6; /* Tailwind gray-100 */
    --white: #ffffff;
}

/* 1. BASE LAYOUT & SCROLLBARS (Stolen from App.css) */
body { 
    background-color: var(--light-bg); 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
    margin: 0; 
    padding-top: 60px; 
    display: flex; 
    justify-content: center; 
    min-height: 100vh; 
}

/* Custom Scrollbar (From his code) */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: 4px; }
::-webkit-scrollbar-track { background: #f0f0f0; border-radius: 4px; }

/* 2. NAVBAR */
.navbar {
    position: fixed; top: 0; left: 0; width: 100%; height: 60px;
    background: var(--primary-color); /* Updated to Teal */
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px; box-sizing: border-box; 
    box-shadow: 0 2px 10px rgba(75, 166, 179, 0.2); /* Colored shadow */
    z-index: 2000;
}
.nav-logo { color: white; font-weight: 800; font-size: 1.3rem; text-decoration: none; letter-spacing: 0.5px; }
.nav-hamburger { color: white; font-size: 1.5rem; cursor: pointer; padding: 5px; }

/* 3. SIDE MENU */
#side-menu {
    position: fixed; top: 60px; right: 0; width: 250px; height: calc(100vh - 60px);
    background: white; box-shadow: -2px 0 10px rgba(0,0,0,0.05);
    transform: translateX(100%); transition: transform 0.3s ease-in-out; z-index: 1999;
    display: flex; flex-direction: column;
}
#side-menu.open { transform: translateX(0); }
.menu-link { padding: 15px 20px; border-bottom: 1px solid #f0f0f0; color: #444; text-decoration: none; font-weight: 500; display: block; }
.menu-link:hover { background: #f9f9f9; color: var(--primary-color); }

/* 4. CARD CONTAINER */
.card { 
    background: white; width: 100%; max-width: 450px; 
    min-height: calc(100vh - 60px); padding: 20px; box-sizing: border-box; 
    display: flex; flex-direction: column; position: relative; 
    box-shadow: 0 0 20px rgba(0,0,0,0.03);
}

/* 5. UTILS & BUTTONS */
h1, h2, h3 { color: var(--dark-text); margin: 10px 0; }
.hidden { display: none !important; }
.center-text { text-align: center; }

/* The "Pill" Button Style (Matched to App.css .btn-warning) */
.btn { 
    background-color: var(--primary-color); 
    color: white; border: none; 
    padding: 12px 20px; 
    width: 100%; 
    border-radius: 30px; /* PILL SHAPE */
    font-size: 1rem; font-weight: bold; cursor: pointer; margin-top: 10px; 
    transition: background 0.2s;
}
.btn:hover { background-color: var(--primary-hover); }
.btn:active { transform: scale(0.98); }

.btn-outline { 
    background: white; 
    border: 2px solid var(--primary-color); 
    color: var(--primary-color); 
    border-radius: 30px; /* PILL SHAPE */
}

input, textarea { 
    width: 100%; padding: 12px 15px; margin-bottom: 15px; 
    border: 1px solid #ddd; border-radius: 15px; /* Softer inputs */
    box-sizing: border-box; font-size: 1rem; font-family: inherit; background: #fcfcfc;
}
input:focus { border-color: var(--primary-color); outline: none; background: white; }

/* DASHBOARD & PROFILE */
#user-info { background: #f8f9fa; padding: 15px; border-radius: 20px; margin-bottom: 20px; display: flex; align-items: center; border: 1px solid #eee; }
#user-pic { width: 50px; height: 50px; border-radius: 50%; margin-right: 15px; border: 2px solid var(--primary-color); }

/* DASHBOARD BUTTONS */
.dash-btn {
    display: flex; align-items: center; justify-content: space-between;
    background: white; padding: 20px; border-radius: 20px; /* More rounded */
    margin-bottom: 15px; text-decoration: none; color: #333;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); border: 1px solid #f0f0f0;
    transition: transform 0.2s;
}
.dash-btn:active { transform: scale(0.98); }
.dash-icon { 
    width: 50px; height: 50px; border-radius: 50%; /* Circle icons */
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; color: white; margin-right: 15px;
}

/* WALLET & LOGS */
.ad-item, .log-card { background: white; border: 1px solid #eee; padding: 15px; border-radius: 15px; margin-bottom: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.02); }
.log-header { display: flex; justify-content: space-between; font-weight: bold; font-size: 0.9rem; color: var(--dark-text); margin-bottom: 5px; }

.coupon-card { 
    border: 2px dashed #27ae60; 
    background: #f0fff4; 
    padding: 15px; 
    border-radius: 20px; 
    margin-top: 10px; 
    text-align: center; 
    position: relative;
}
.coupon-footer { display: flex; align-items: center; justify-content: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid #d1e7dd; }
.coupon-face { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #27ae60; margin-right: 10px; object-fit: cover; }

/* CHAT */
#chat-overlay { position: fixed; top: 60px; left: 0; width: 100%; height: calc(100vh - 60px); background: #f0f2f5; z-index: 3000; display: flex; flex-direction: column; }
#chat-header { background: var(--dark-text); color: white; padding: 15px; display: flex; justify-content: space-between; align-items: center; }
#chat-messages { flex: 1; padding: 15px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
#chat-input-area { padding: 10px; background: white; display: flex; gap: 10px; border-top: 1px solid #ddd; }
.msg-me { align-self: flex-end; background: var(--primary-color); color: white; padding: 10px 15px; border-radius: 20px 20px 0 20px; }
.msg-them { align-self: flex-start; background: white; padding: 10px 15px; border: 1px solid #ddd; border-radius: 20px 20px 20px 0; }

/* --- MOBILE NATIVE FEEL --- */
@media (max-width: 600px) {
    body {
        background-color: white; /* No gray bg on mobile */
        align-items: flex-start; /* Align top, not center */
    }

    .card {
        box-shadow: none; /* No shadow */
        border-radius: 0; /* Square edges */
        min-height: 100vh; /* Fill full height */
        padding-top: 80px; /* Push content down from navbar */
    }

    /* Make the input massive for thumbs */
    #codeInput {
        font-size: 1.5rem;
        padding: 15px;
        border-radius: 20px;
        background: #f8f9fa;
        border: 2px solid #e9ecef;
    }
    #codeInput:focus {
        border-color: var(--primary-color);
        background: white;

        /* Inside @media (max-width: 600px) */
    #user-info {
        background: transparent;
        border: none;
        box-shadow: none;
        color: white; /* Make text white to stand out on Teal */
        margin-bottom: 0;
    }
    #user-name { color: white; }
    #security-code-display { color: rgba(255,255,255,0.8); }
    }
}