@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/*====================================================
RESET
====================================================*/

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

html{
    scroll-behavior:smooth;
    height:100%;

}

body{
    font-family:'Poppins',Calibri,sans-serif;
    background:#eceded;
    color:#333;
    font-size:16px;
    line-height:1.6;
    
    min-height:100vh;
    display:flex;
    flex-direction:column;
    margin:0;
}
main{
flex:1;
}
/*====================================================
COMMON
====================================================*/

a{
    text-decoration:none;
    transition:.3s;
}

img{
    max-width:100%;
    display:block;
}

.container{
    width:100%;
    max-width:1300px;
    margin:30px auto;
    padding:0 20px;
}
/*====================================================
HEADER
====================================================*/

.header{
    background:#ffffff;
    box-shadow:0 3px 15px rgba(0,0,0,.08);
    position:sticky;
    top:0;
    z-index:1000;
}

.header-top{
    max-width:1300px;
    margin:auto;
    padding:18px 25px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
}

.header-logo img{
    width:85px;
}

.header-title{
    flex:1;
}

.header-title h1{
    font-size:30px;
    color:#19365e;
    margin-bottom:4px;
    font-weight:700;
}

.header-title h3{
    font-size:18px;
    color:#555;
    font-weight:500;
    margin-bottom:4px;
}

.header-title p{
    font-size:14px;
    color:#888;
}

.header-user{
    display:flex;
    align-items:center;
    gap:12px;
    color:#19365e;
    font-weight:500;
}

.header-user i{
    font-size:26px;
}

.logout-link{
    background:#a80707;
    color:#ffffff;
    padding:10px 18px;
    border-radius:8px;
    font-size:15px;
    font-weight:500;
}

.logout-link:hover{
    background:#870606;
}
/*====================================================
NAVIGATION
====================================================*/

.nav{
    background:#19365e;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    border-top:1px solid rgba(255,255,255,.08);
}

.nav a{
    color:#ffffff;
    padding:18px 22px;
    font-size:15px;
    font-weight:500;
    letter-spacing:.3px;
    position:relative;
}

.nav a:hover{
    background:rgba(255,255,255,.08);
}

.nav a::after{
    content:"";
    position:absolute;
    left:18%;
    bottom:10px;
    width:0;
    height:2px;
    background:#ffffff;
    transition:.3s;
}

.nav a:hover::after{
    width:64%;
}
/*====================================================
PAGE CONTENT
====================================================*/

.page-card{
background:#fff;
border-radius:15px;
box-shadow:0 8px 25px rgba(0,0,0,.08);
padding:35px;
margin-bottom:30px;
overflow:hidden;
}

.page-header{
display:flex;
justify-content:space-between;
align-items:left;

border-bottom:1px solid #e5e5e5;
padding-bottom:20px;
margin-bottom:30px;
}

.page-header-text{
flex:1;
}

.page-header h2{
color:#19365e;
font-size:30px;
margin-bottom:8px;
}

.page-header p{
color:#666;
font-size:17px;
margin:0;
}

.page-header strong{
color:#a80707;
}

.section-title{
margin-bottom:30px;
}

.section-title h2{
color:#19365e;
margin-bottom:8px;
}

.section-title p{
color:#666;
}

/*====================================================
Tables
====================================================*/

.view-table{
width:100%;
border-collapse:collapse;
background:#fff;
}

.view-table th{
width:280px;
padding:10px;
background:#f8f9fb;
border:1px solid #e5e5e5;
text-align:left;
font-weight:600;
color:#19365e;
}

.view-table td{
padding:10px;
border:1px solid #e5e5e5;
}

.view-table tr:nth-child(even){
background:#fafafa;
}

.view-table a{
color:#19365e;
font-weight:600;
}

.view-table a:hover{
color:#a80707;
}

.list-table{
width:100%;
border-collapse:collapse;
margin-top:16px;
}

.list-table th{
background:#19365e;
color:#fff;
padding:10px;
border:1px solid #d9d9d9;
text-align:center;
}

.list-table td{
padding:10px;
border:1px solid #d9d9d9;
text-align:center;
vertical-align:middle;
}

.list-table tr:nth-child(even){
background:#f8f9fb;
}
.table-btn{
display:inline-block;
padding:4px 10px;
border:1px solid #d4d4d4;
border-radius:8px;
background:#f7f7f7;
color:#555;
text-decoration:none;
font-size:12px;
font-weight:600;
margin:2px;
transition:.2s;
}

.table-btn:hover{
background:#eceded;
color:#19365e;
}

.table-btn.delete:hover{
color:#a80707;
}
/*====================================================
PART BOXES
====================================================*/

.part-boxes{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
margin-top:25px;
}

.part-boxes a{
background:#ffffff;
border-top:5px solid #19365e;
border-radius:12px;
padding:22px;
box-shadow:0 6px 18px rgba(0,0,0,.08);
transition:.3s;
display:flex;
flex-direction:column;
justify-content:space-between;
min-height:170px;
}

.part-boxes a:hover{
transform:translateY(-4px);
border-top-color:#a80707;
box-shadow:0 10px 25px rgba(0,0,0,.15);
}

.part-boxes h3{
font-size:21px;
color:#19365e;
margin-bottom:10px;
line-height:1.3;
}

.part-boxes p{
font-size:14px;
color:#666;
line-height:1.5;
margin-bottom:18px;
}

.part-boxes span{
font-size:14px;
font-weight:600;
color:#a80707;
}
/*====================================================
BUTTONS
====================================================*/

.btn{
    display:block;
    width:220px;
    margin:20px auto 0;
    padding:10px;
    border:none;
    border-radius:10px;
    background:#a80707;
    color:#ffffff;
    font-size:12px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.btn:hover{
    background:#870606;
    transform:translateY(-2px);
}
/*====================================================
ALERTS
====================================================*/

.error{
    background:#ffe6e6;
    color:#a80707;
    border-left:5px solid #a80707;
    padding:15px;
    border-radius:10px;
    margin-bottom:25px;
}

.success{
    background:#e8fff0;
    color:#0b7d24;
    border-left:5px solid #198754;
    padding:15px;
    border-radius:10px;
    margin-bottom:25px;
}
/*====================================================
FORMS
====================================================*/

.form-group{
margin-bottom:25px;
}

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

.form-group input,
.form-group select,
.form-group textarea{
width:100%;
padding:8px 10px;
border:1px solid #d8d8d8;
border-radius:10px;
font-size:12px;
font-family:'Poppins',sans-serif;
background:#ffffff;
transition:.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
border-color:#19365e;
box-shadow:0 0 0 3px rgba(25,54,94,.10);
outline:none;
}
/*select*/

.custom-select{
width:100%;
height:50px;
background:#ffffff;
border:1px solid #d8d8d8;
border-radius:10px;
padding:0 15px;
font-size:16px;
font-family:'Poppins',sans-serif;
}

/* file upload*/

input[type=file]{
width:100%;
padding:12px;
border:1px dashed #19365e;
border-radius:10px;
background:#f8f9fb;
margin-top:10px;
}
/*====================================================
FORM ACTIONS
====================================================*/

.form-actions{
display:flex;
justify-content:flex-end;
gap:10px;
margin-top:18px;
}

.action-btn{
display:inline-flex;
align-items:center;
padding:6px 8px;
background:#f3f4f6;
border:1px solid #d8d8d8;
border-radius:8px;
color:#555;
font-size:14px;
font-weight:600;
transition:.3s;
}

.action-btn:hover{
background:#19365e;
border-color:#19365e;
color:#fff;
}

.action-btn.active{
background:#19365e;
border-color:#19365e;
color:#fff;
}

.action-btn.delete:hover,
.action-btn.delete.active{
background:#a80707;
border-color:#a80707;
color:#fff;
}

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

.login-wrapper{
min-height:calc(100vh - 180px);
display:flex;
justify-content:center;
align-items:center;
padding:40px 20px;
}

.login-box{
width:100%;
max-width:460px;
background:#ffffff;
padding:40px;
border-radius:18px;
box-shadow:0 15px 40px rgba(0,0,0,.12);
}

.login-box img{
width:120px;
margin:0 auto 20px;
display:block;
}

.login-box h2{
text-align:center;
font-size:34px;
font-weight:700;
color:#19365e;
margin-bottom:8px;
}

.login-box p{
text-align:center;
color:#666;
margin-bottom:30px;
font-size:16px;
}


/*====================================================
FOOTER
====================================================*/

footer{
margin-top:40px;
background:#19365e;
color:#ffffff;
}

.footer-content{
max-width:1300px;
margin:auto;
padding:25px 20px;
text-align:center;
}

.footer-content p:first-child{
font-size:16px;
font-weight:600;
margin-bottom:8px;
}

.footer-content p:last-child{
font-size:14px;
color:#d7dce5;
}
/*====================================================
RESPONSIVE
====================================================*/
@media (max-width:768px){
.header-logo img{
width:70px;
}
.header-title h1{
font-size:28px;
}
.header-title h3{
font-size:17px;
}
.header-title p{
font-size:14px;
}
.page-header h2{
font-size:32px;
}
.page-header p{
font-size:18px;
}
}

@media (max-width:480px){
.header-title h1{
font-size:24px;
}
.header-title h3{
font-size:15px;
}
.header-user{
flex-direction:column;
gap:8px;
}
.nav a{
padding:14px 18px;
font-size:14px;
}
.page-card{
padding:18px;
border-radius:10px;
}
.page-header h2{
font-size:28px;
}
.page-header p{
font-size:16px;
}
.form-group input,
.form-group select,
.form-group textarea{
font-size:15px;
}
.custom-select{
height:46px;
}
.part-boxes a{
min-height:140px;
}
footer{
padding:18px;
}
}