/* body{
font-family:Segoe UI;
background:#f4f6f9;
}

.vg-login-box,
.vg-register-box{
width:350px;
margin:60px auto;
background:#fff;
padding:30px;
border-radius:10px;
box-shadow:0 10px 25px rgba(0,0,0,0.1);
text-align:center;
}

.vg-login-box input,
.vg-register-box input{
width:100%;
padding:10px;
margin-bottom:15px;
border:1px solid #ddd;
border-radius:6px;
}

.vg-btn{
width:100%;
padding:12px;
background:#1e73be;
border:none;
color:#fff;
border-radius:6px;
cursor:pointer;
}

.vg-btn:hover{
background:#155a94;
}

.vg-link{
margin-top:10px;
font-size:14px;
}

.vg-wrapper{
display:flex;
max-width:1100px;
margin:40px auto;
}

.vg-sidebar{
width:250px;
background:#1e73be;
color:#fff;
padding:20px;
border-radius:10px;
}

.vg-content{
flex:1;
margin-left:20px;
}

.vg-card{
background:#fff;
padding:20px;
border-radius:10px;
margin-bottom:20px;
box-shadow:0 5px 15px rgba(0,0,0,0.08);
}

.vg-doc-row{
display:flex;
justify-content:space-between;
padding:10px;
border-bottom:1px solid #eee;
}

.vg-delete{
background:red;
color:#fff;
border:none;
padding:5px 10px;
border-radius:5px;
cursor:pointer;
}

.vg-success{
background:#e8f5e9;
padding:10px;
color:green;
border-radius:5px;
margin-bottom:10px;
}

.vg-error{
background:#ffebee;
padding:10px;
color:red;
border-radius:5px;
margin-bottom:10px;
} */



.vg-register-wrapper{
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
background:linear-gradient(135deg,#673ab7,#1e73be);
font-family:'Segoe UI';
}

.vg-register-box{
background:#fff;
padding:40px;
width:380px;
border-radius:15px;
box-shadow:0 15px 30px rgba(0,0,0,0.2);
text-align:center;
}

.vg-register-box h2{
color:#673ab7;
margin-bottom:20px;
}

.vg-input{
width:100%;
padding:10px;
margin-bottom:15px;
border:1px solid #ddd;
border-radius:8px;
}

.vg-btn{
width:100%;
padding:12px;
background:#673ab7;
border:none;
color:#fff;
border-radius:8px;
cursor:pointer;
font-size:15px;
}

.vg-btn:hover{
background:#512da8;
}

.vg-error{
background:#ffebee;
color:red;
padding:10px;
margin-bottom:15px;
border-radius:6px;
}

.vg-success{
background:#e8f5e9;
color:green;
padding:10px;
margin-bottom:15px;
border-radius:6px;
}

.vg-link{
margin-top:15px;
font-size:13px;
}

.vg-link a{
color:#1e73be;
text-decoration:none;
}



    .vg-admin-box{
        display:grid;
        grid-template-columns: repeat(2, 1fr);
        gap:15px;
        margin-top:10px;
    }

    .vg-admin-card{
        padding:15px;
        border-radius:10px;
        color:#fff;
        font-weight:bold;
        font-size:14px;
        text-align:center;
    }

    .vg-blue{background:#1e73be;}
    .vg-green{background:green;}
    .vg-orange{background:#ff9800;}
    .vg-red{background:red;}
    .vg-purple{background:#673ab7;}



    .vg-doc-btn{
        padding:8px 14px;
        background:#1e73be !important;
        color:#fff;
        border-radius:6px;
        text-decoration:none;
        margin-right:10px;
        font-size:13px;
    }

    .vg-doc-btn:hover{
        background:#155a94 !important;
        color:#fff;
    }

    .vg-doc-download{
        background:#28a745 !important;
    }

    .vg-doc-download:hover{
        background:#1e7e34 !important;
    }

.vg-wrapper{display:flex;max-width:1100px;margin:40px auto;font-family:Segoe UI;}
.vg-sidebar{background:#1e73be;color:#fff;padding:20px;border-radius:12px;}
.vg-sidebar h3{margin-top:0;}
.vg-content{flex:1;margin-left:25px;}
.vg-card{background:#fff;padding:20px;border-radius:12px;box-shadow:0 5px 15px rgba(0,0,0,0.08);margin-bottom:20px;}
.vg-btn{background:#1e73be;color:#fff;padding:6px 12px;border:none;border-radius:6px;cursor:pointer;}
.vg-delete{background:red;}
.vg-status{padding:4px 10px;border-radius:20px;font-size:12px;color:#fff;}
.green{background:green;}
.orange{background:#ff9800;}
.red{background:red;}

.vg-login-wrapper{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    margin: 0;
    background:linear-gradient(135deg,#1e73be,#673ab7);
    font-family:'Segoe UI',sans-serif;
}

.vg-login-box{
    background:#fff;
    padding:40px;
    width:360px;
    border-radius:15px;
    box-shadow:0 15px 30px rgba(0,0,0,0.2);
    text-align:center;
    animation:fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn{
    from{opacity:0;transform:translateY(20px);}
    to{opacity:1;transform:translateY(0);}
}

.vg-login-box h2{
    margin-bottom:20px;
    color:#1e73be;
}

.vg-input{
    width:100%;
    padding:10px;
    margin-bottom:15px;
    border:1px solid #ddd;
    border-radius:8px;
    font-size:14px;
}

.vg-btn{
    width:100%;
    padding:12px;
    background:#1e73be;
    border:none;
    color:#fff;
    border-radius:8px;
    font-size:15px;
    cursor:pointer;
    transition:0.3s;
}

.vg-btn:hover{
    background:#155a94;
    transform:scale(1.05);
}

.vg-remember{
    text-align:left;
    font-size:13px;
    margin-bottom:15px;
}

.vg-links{
    margin-top:15px;
    font-size:13px;
}

.vg-links a{
    display:block;
    color:#673ab7;
    text-decoration:none;
    margin:5px 0;
}

.vg-links a:hover{
    text-decoration:underline;
}

.vg-error{
    background:#ffebee;
    color:red;
    padding:10px;
    border-radius:6px;
    margin-bottom:15px;
    font-size:13px;
}

.vg-link-btn{
    display:inline-block;
    padding:8px 15px;
    background:#1e73be;
    color:#fff;
    border-radius:6px;
    text-decoration:none;
}

.vg-doc-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-bottom:1px solid #eee;
    padding:10px 0;
}

.vg-doc-left a{
    color:#1e73be;
    text-decoration:none;
    font-weight:500;
}

.vg-doc-right{
    display:flex;
    align-items:center;
    gap:10px;
}

.vg-status{
    padding:4px 10px;
    border-radius:20px;
    font-size:12px;
    color:#fff;
}

.vg-delete{
    background:red;
    color:#fff;
    border:none;
    padding:6px 10px;
    border-radius:5px;
    cursor:pointer;
}

.vg-form-group{
    margin-bottom:18px;
    text-align:left;
}

.vg-form-group label{
    display:block;
    font-size:14px;
    font-weight:600;
    margin-bottom:6px;
    color:#333;
}

.vg-form-group .vg-input{
    width:100%;
    padding:10px;
    border:1px solid #ddd;
    border-radius:8px;
    font-size:14px;
    transition:0.3s;
}

.vg-form-group .vg-input:focus{
    border-color:#1e73be;
    outline:none;
    box-shadow:0 0 5px rgba(30,115,190,0.3);
}




/* Mobile styles */
@media only screen and (max-width: 768px) {
    .vg-wrapper{
        display: block; /* stack elements vertically */
        padding: 10px;
    }

    .vg-sidebar,
    .vg-content {
        width: 100%;
        margin-bottom: 20px;
    }
    .vg-card {
  margin-left: -32px;
}
}