.gkhr-dashboard{

    max-width:480px;
    margin:auto;
    padding:20px;
    min-height:100vh;
    background:#f5f7fb;
    font-family:Arial,sans-serif;

}


/* Header */

.gkhr-header-card{

    background:linear-gradient(
        135deg,
        #0066ff,
        #7b2cff
    );

    padding:22px;

    border-radius:28px;

    color:white;

    display:flex;

    align-items:center;

    gap:15px;

    box-shadow:
    0 15px 35px rgba(0,0,0,.15);

}



.gkhr-avatar{

    width:70px;

    height:70px;

    background:white;

    color:#0066ff;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:30px;

    font-weight:bold;

}



.gkhr-user-info h2{

    margin:0;

    font-size:22px;

}


.gkhr-user-info span{

    display:block;

    margin-top:5px;

    font-size:14px;

    opacity:.9;

}


.gkhr-user-info small{

    display:block;

    margin-top:8px;

}



/* Cards */


.gkhr-grid{

    display:grid;

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

    gap:18px;

    margin-top:25px;

}



.gkhr-box{

    background:white;

    border-radius:25px;

    padding:25px 15px;

    text-align:center;

    box-shadow:

    0 10px 30px rgba(0,0,0,.08);

    transition:.3s;

    cursor:pointer;

}



.gkhr-box:hover{

    transform:translateY(-5px);

}



.gkhr-box .icon{

    font-size:40px;

    margin-bottom:12px;

}



.gkhr-box h3{

    margin:5px 0;

    color:#111;

}



.gkhr-box p{

    margin:0;

    color:#777;

    font-size:14px;

}



/* Bottom Navigation */


.gkhr-bottom-nav{

    position:fixed;

    bottom:15px;

    left:50%;

    transform:translateX(-50%);

    width:90%;

    max-width:430px;

    background:white;

    border-radius:25px;

    padding:12px;

    display:flex;

    justify-content:space-around;

    box-shadow:

    0 10px 35px rgba(0,0,0,.15);

}



.gkhr-bottom-nav a{

    text-decoration:none;

    color:#777;

    text-align:center;

    font-size:13px;

}



.gkhr-bottom-nav span{

    display:block;

    margin-top:5px;

}



.gkhr-bottom-nav .active{

    color:#0066ff;

}



/* Mobile */

@media(max-width:400px){


    .gkhr-grid{

        gap:12px;

    }


    .gkhr-box{

        padding:20px 10px;

    }

.gkhr-history-page{

padding:20px;
max-width:450px;
margin:auto;

}



.gkhr-history-card{

background:#fff;
border-radius:22px;
padding:20px;
margin-bottom:18px;
box-shadow:0 8px 25px rgba(0,0,0,.08);

}



.history-top{

display:flex;
justify-content:space-between;
align-items:center;

}



.history-top h3{

margin:0;
font-size:20px;

}



.history-top p{

color:#666;

}



.attendance-photo{

width:100%;
height:220px;
object-fit:cover;
border-radius:18px;
margin:15px 0;

}



.location-btn{

display:block;
background:#0066ff;
color:#fff;
padding:12px;
border-radius:12px;
text-align:center;
text-decoration:none;
margin-top:10px;

}



.approval-box{

margin-top:15px;
font-weight:bold;

}



.approved{

background:#d1fae5;
color:#047857;
padding:7px 14px;
border-radius:20px;

}



.pending{

background:#fef3c7;
color:#92400e;
padding:7px 14px;
border-radius:20px;

}



.rejected{

background:#fee2e2;
color:#b91c1c;
padding:7px 14px;
border-radius:20px;

}



.on-time{

background:#dcfce7;
color:#166534;
padding:7px 12px;
border-radius:20px;

}



.late-warning{

background:#fef3c7;
color:#b45309;
padding:7px 12px;
border-radius:20px;

}



.strict-late{

background:#fee2e2;
color:#991b1b;
padding:7px 12px;
border-radius:20px;

}



.reject-box{

margin-top:15px;
background:#fff1f2;
padding:12px;
border-radius:12px;
color:#be123c;

}


.empty-box{

background:white;
padding:30px;
border-radius:20px;
text-align:center;

}

}