/*
 Sprint 3.1.2 style.css
 CTracer Dashboard UI update
*/


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



body {

    font-family: -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, Arial, sans-serif;

    background:#f5f7fb;

    min-height:100vh;

    padding:20px;

}



/* Main container */

#app {

    width:100%;

    max-width:1000px;

    margin:auto;

}





/* =========================
   LOGIN PAGE
========================= */


#login-page {

    background:white;

    padding:40px 30px;

    border-radius:20px;

    box-shadow:
    0 20px 60px rgba(0,0,0,0.15);

    max-width:400px;

    margin:100px auto;

    text-align:center;

}




h1 {

    color:#1646c0;

    font-size:32px;

    margin-bottom:10px;

}



p {

    color:#666;

    font-size:16px;

}




#google-signin-container {

    margin:20px 0;

}




/* Success message */

#success-message {


    margin:15px auto;

    padding:10px 15px;

    border-radius:8px;

    width:90%;

    font-size:15px;

    text-align:center;

    background:#c6f6d5;

    color:#276749;


}





/* Error message */


#error-message {


    margin:15px auto;

    padding:10px 15px;

    border-radius:8px;

    width:90%;

    font-size:15px;

    text-align:center;

    background:#fed7d7;

    color:#c53030;


}





/* =========================
   DASHBOARD
========================= */


#dashboard-page {

    width:100%;

    max-width:900px;

    margin:auto;

    display:flex;

    flex-direction:column;

    gap:20px;

}





/* Header */


.dashboard-header {


    background:#12358b;

    color:white;

    padding:20px;

    border-radius:18px;

    display:flex;

    justify-content:space-between;

    align-items:center;


}



.dashboard-header h1 {


    color:white;

    margin:0;

    font-size:28px;


}




/* Old header logout button
   kept temporarily */


.dashboard-header button {


    width:auto;

    background:white;

    color:#c53030;

}





/* Profile Card */


.profile-card {


    background:white;

    border-radius:18px;

    padding:25px;

    display:flex;

    align-items:center;

    gap:25px;

    box-shadow:
    0 8px 25px rgba(0,0,0,.08);


}




#user-photo {


    width:100px;

    height:100px;

    max-width:100px;

    max-height:100px;

    border-radius:50%;

    object-fit:cover;


}




.profile-info h2 {


    color:#222;

    margin-bottom:8px;


}




#user-status-badge {


    display:inline-block;

    background:#48bb78;

    color:white;

    padding:5px 15px;

    border-radius:20px;

    font-size:14px;


}





/* Dashboard Cards */


.dashboard-card {


    background:white;

    border-radius:18px;

    padding:25px;

    box-shadow:
    0 8px 25px rgba(0,0,0,.08);


}




.dashboard-card h3 {


    margin-bottom:20px;

    color:#1a202c;


}





/* User Information */


.info-grid {


    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;


}



.info-grid label {


    color:#718096;


}




.info-grid p {


    color:#111;

    font-weight:600;


}





/* =========================
   MENU
========================= */


.menu-grid {


    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:15px;


}




.menu-item {


    background:#eef4ff;

    padding:20px;

    border-radius:15px;

    text-align:center;

    font-weight:600;

    color:#12358b;

    cursor:pointer;

    transition:.2s;


}




.menu-item:hover {


    background:#dbe8ff;


}





/* Sign Out menu item */


.logout-menu {


    background:#fff0f0;

    color:#c53030;

    border:1px solid #fc8181;


}



.logout-menu:hover {


    background:#fed7d7;


}





/* Old verification message */


#verification-message {


    color:#12358b;


}





/* =========================
   MOBILE
========================= */


@media(max-width:600px){



    body {

        padding:10px;

    }




    #login-page {

        margin:40px auto;

        padding:30px 20px;

    }





    .profile-card {


        flex-direction:column;

        text-align:center;


    }





    .info-grid {


        grid-template-columns:1fr;


    }





    .menu-grid {


        grid-template-columns:repeat(2,1fr);


    }



}

/* Android Menu.bas card layout */
body { padding: 0; background: #f5f8fc; color: #18273d; }
#app, #dashboard-page { max-width: none; width: 100%; margin: 0; }
.android-header { position: relative; min-height: 112px; padding: 18px 60px 42px 66px; background: #073d84; color: #fff; }
#header-logo { position:absolute; left:16px; top:18px; width:42px !important; height:42px !important; max-width:42px; max-height:42px; object-fit:contain; display:block; }
.header-title h1 { color:#fff; font-size:21px; margin:0; }
#header-role { color:#c1dcff; font-size:11px; font-weight:700; margin-top:2px; }
#user-photo { position:absolute; right:18px; top:18px; width:40px !important; height:40px !important; max-width:40px; max-height:40px; border-radius:0; object-fit:cover; display:block; }
#user-photo { cursor:pointer; }
#gps-status { position:absolute; left:16px; bottom:15px; min-width:112px; padding:6px 15px; border-radius:20px; background:#17a565; color:white; font-size:11px; font-weight:700; text-align:center; }
.android-content { max-width:720px; margin:0 auto; padding:16px; }
.greeting h2 { font-size:22px; margin:0; color:#18273d; }
.greeting p { margin:4px 0 14px; color:#5e6c7f; }
#menu-container section { margin-top:18px; }
#menu-container section h3 { font-size:15px; margin:0 0 12px; color:#2d3f57; }
.android-menu-card { display:flex; align-items:center; width:100%; min-height:68px; margin:0 0 10px; padding:12px; border:0; border-radius:12px; background:#fff; color:#1c2b3f; text-align:left; box-shadow:0 1px 2px rgba(20,45,80,.02); cursor:pointer; }
.android-menu-card img { width:44px; height:44px; padding:8px; margin-right:12px; border-radius:10px; background:#e6f0fd; object-fit:contain; }
.android-menu-card span { flex:1; font-size:16px; font-weight:700; }
.android-menu-card b { color:#506988; font-size:25px; font-weight:400; }
.android-menu-card.signout-card { background:#fff4f4; border:1px solid #f8caca; color:#b42318; }
.android-menu-card.signout-card b { color:#b42318; }
.android-menu-card.signout-card .signout-icon { flex:0 0 44px; width:44px; height:44px; padding:10px; margin-right:12px; border-radius:10px; background:#ffe1e1; color:#b42318; }
.android-menu-card.signout-card .signout-icon svg { display:block; width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; }
.hero-card { min-height:104px; padding:18px; border-radius:16px; background:#0f60be; color:#fff; }
.hero-card img { width:52px; height:52px; padding:0; margin-right:16px; border-radius:0; background:transparent; }
.hero-card span { display:flex; flex-direction:column; }
.hero-card strong { font-size:20px; }
.hero-card small { margin-top:3px; color:#daeaFF; font-size:14px; }
.hero-card b { color:#fff; font-size:30px; }
#verification-message { margin-top:15px; padding:12px; border-radius:10px; background:#fff3cd; color:#674d03; }
@media (max-width:600px) { .android-content { padding:16px; } .greeting h2 { font-size:22px; } }