/* ==========================================
   CLUB PORTAL V2
   ADMIN.CSS - PART 1
========================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Outfit',sans-serif;
}

body{
    background:#faf5ff;
    color:#333;
}

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

#loginPage{
    width:100%;
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background:linear-gradient(135deg,#7c3aed,#c026d3);
}

.login-box{
    width:380px;
    background:white;
    padding:40px;
    border-radius:20px;
    text-align:center;
    box-shadow:0 15px 35px rgba(0,0,0,.2);
}

.login-box h2{
    margin-bottom:25px;
    color:#7c3aed;
}

.login-box input{
    width:100%;
    padding:12px;
    margin:12px 0;
    border:1px solid #ddd;
    border-radius:10px;
}

.login-box .btn{
    width:100%;
    margin-top:15px;
}

#loginError{
    color:red;
    margin-top:15px;
    font-size:14px;
}

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

.admin-container{
    display:flex;
    min-height:100vh;
}

/*==========================
 SIDEBAR
==========================*/

.sidebar{
    width:260px;
    background:#1e1b3a;
    color:white;
    padding:30px 20px;
}

.sidebar h3{
    text-align:center;
    margin-bottom:30px;
}

.sidebar ul{
    list-style:none;
}

.sidebar ul li{
    padding:15px;
    margin-bottom:10px;
    border-radius:10px;
    cursor:pointer;
    transition:.3s;
}

.sidebar ul li:hover{
    background:#7c3aed;
}

.sidebar i{
    margin-right:10px;
}

/*==========================
 MAIN CONTENT
==========================*/

.main-content{
    flex:1;
    padding:30px;
    background:#f9f5ff;
}

.admin-section{
    margin-bottom:40px;
}
/*=========================================
 DASHBOARD CARDS
=========================================*/

.stats{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
    margin-bottom:30px;
}

.stats .card{
    background:white;
    border-radius:15px;
    padding:25px;
    text-align:center;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    transition:.3s;
}

.stats .card:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 35px rgba(0,0,0,.15);
}

.stats .card h2{
    color:#7c3aed;
    font-size:36px;
    margin-bottom:10px;
}

.stats .card p{
    color:#666;
}

/*=========================================
 ADMIN FORM
=========================================*/

.admin-section .card{
    background:white;
    padding:25px;
    border-radius:15px;
    margin-bottom:30px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.admin-section input,
.admin-section textarea,
.admin-section select{

    width:100%;
    padding:12px;
    margin:10px 0;
    border:1px solid #ddd;
    border-radius:10px;
    outline:none;
    transition:.3s;

}

.admin-section input:focus,
.admin-section textarea:focus,
.admin-section select:focus{

    border-color:#7c3aed;
    box-shadow:0 0 10px rgba(37,99,235,.25);

}

.admin-section button{

    margin-top:10px;

}

/*=========================================
 TABLE
=========================================*/

table{

    width:100%;
    border-collapse:collapse;
    background:white;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

th{

    background:#7c3aed;
    color:white;
    padding:15px;

}

td{

    padding:15px;
    border-bottom:1px solid #eee;
    text-align:center;

}

tr:hover{

    background:#f1f5f9;

}

/*=========================================
 GALLERY
=========================================*/

#galleryAdmin{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:20px;

}

#galleryAdmin img{

    width:100%;
    border-radius:12px;
    box-shadow:0 8px 20px rgba(0,0,0,.12);
    transition:.3s;

}

#galleryAdmin img:hover{

    transform:scale(1.05);

}

/*=========================================
 NOTICE LIST
=========================================*/

#noticeList{

    display:flex;
    flex-direction:column;
    gap:20px;

}

.notice-card{

    background:white;
    padding:20px;
    border-left:6px solid #7c3aed;
    border-radius:12px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.notice-card h3{

    color:#7c3aed;
    margin-bottom:10px;

}

.notice-card p{

    color:#555;
}

/*=========================================
 EVENT TEAM CARDS
=========================================*/

.member-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:20px;

}

.member-grid .card{

    text-align:center;

}

.member-grid h3{

    margin-bottom:15px;
    color:#7c3aed;

}
/*=========================================
 RESPONSIVE DESIGN
=========================================*/

@media (max-width:992px){

.admin-container{

flex-direction:column;

}

.sidebar{

width:100%;
padding:20px;

}

.sidebar ul{

display:flex;
flex-wrap:wrap;
justify-content:center;
gap:10px;

}

.sidebar ul li{

margin:0;

}

.main-content{

padding:20px;

}

.stats{

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

}

}

@media (max-width:768px){

.stats{

grid-template-columns:1fr;

}

.member-grid{

grid-template-columns:1fr;

}

table{

display:block;
overflow-x:auto;

}

.login-box{

width:90%;

padding:30px;

}

.sidebar h3{

font-size:22px;

}

}

@media (max-width:480px){

.main-content{

padding:15px;

}

.admin-section .card{

padding:18px;

}

th,
td{

padding:10px;
font-size:14px;

}

.login-box h2{

font-size:24px;

}

}

/*=========================================
 BUTTON EFFECTS
=========================================*/

.btn{

transition:.3s ease;

}

.btn:hover{

transform:translateY(-3px);

box-shadow:0 10px 25px rgba(37,99,235,.3);

}

/*=========================================
 SCROLLBAR
=========================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#e5e7eb;

}

::-webkit-scrollbar-thumb{

background:#7c3aed;

border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

background:#6d28d9;

}

/*=========================================
 DARK ADMIN THEME
=========================================*/

body.dark{

background:#1e1b3a;
color:white;

}

body.dark .main-content{

background:#111827;

}

body.dark .admin-section .card,
body.dark table,
body.dark .stats .card,
body.dark .notice-card{

background:#2d1f4a;
color:white;

}

body.dark th{

background:#6d28d9;

}

body.dark td{

border-color:#4c3d66;

}

body.dark input,
body.dark textarea,
body.dark select{

background:#4c3d66;
color:white;
border:1px solid #475569;

}

body.dark .sidebar{

background:#130f26;

}

/*=========================================
 FADE ANIMATION
=========================================*/

.admin-section{

animation:fadeIn .5s ease;

}

@keyframes fadeIn{

from{

opacity:0;
transform:translateY(20px);

}

to{

opacity:1;
transform:translateY(0);

}

}

/*=========================================
 END OF ADMIN.CSS
=========================================*/