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

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

html{
scroll-behavior:smooth;
}

body{


font-family:
    Arial,
    Helvetica,
    sans-serif;

background:#e5e7eb;

color:#111827;

line-height:1.6;

min-height:100vh;


}

/* ==========================================
CONTAINER
========================================== */

.container{


max-width:1200px;

margin:auto;

padding:20px;


}

.main-content{


min-height:70vh;


}

/* ==========================================
NAVBAR
========================================== */

.navbar{


background:#0d6efd;

position:sticky;

top:0;

z-index:9999;

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


}

.navbar-container{


max-width:1200px;

margin:auto;

display:flex;

justify-content:
    space-between;

align-items:center;

padding:15px 20px;


}

.navbar-logo{


color:#000;

text-decoration:none;

font-size:24px;

font-weight:700;


}

.navbar-menu{


display:flex;

gap:15px;

align-items:center;


}

.navbar-menu a{


color:#000;

text-decoration:none;

padding:8px 12px;

border-radius:6px;


}

.navbar-menu a:hover{


background:
    rgba(255,255,255,.35);


}

/* ==========================================
CARD
========================================== */

.card{


background:#ffffff;

border-radius:12px;

padding:20px;

box-shadow:
    0 2px 10px
    rgba(0,0,0,.08);


}

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

.btn{


display:inline-block;

border:none;

cursor:pointer;

text-decoration:none;

padding:10px 18px;

border-radius:8px;

font-size:14px;


}

.btn-primary{


background:#0d6efd;

color:#fff;


}

.btn-success{


background:#198754;

color:#fff;


}

.btn-danger{


background:#dc3545;

color:#fff;


}

.btn-warning{


background:#ffc107;

color:#000;


}

.btn-secondary{


background:#6c757d;

color:#fff;


}

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

.form-group{


margin-bottom:15px;


}

.form-group label{


display:block;

margin-bottom:6px;

font-weight:600;


}

.form-control{


width:100%;

padding:12px;

border:1px solid #d1d5db;

border-radius:8px;


}

.form-control:focus{


outline:none;

border-color:#0d6efd;


}

/* ==========================================
ALERT
========================================== */

.alert{


padding:12px;

margin-bottom:15px;

border-radius:8px;


}

.alert-success{


background:#d1fae5;

color:#065f46;


}

.alert-danger{


background:#fee2e2;

color:#991b1b;


}

.alert-warning{


background:#fef3c7;

color:#92400e;


}

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

.table-container{


overflow-x:auto;


}

.table{


width:100%;

border-collapse:collapse;

background:#fff;


}

.table th{


background:#f3f4f6;

padding:12px;

text-align:left;


}

.table td{


padding:12px;

border-top:1px solid #e5e7eb;


}

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

.stats-grid{


display:grid;

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

gap:20px;


}

.stats-card{


background:#ffffff;

padding:20px;

border-radius:12px;

text-align:center;

box-shadow:
    0 2px 10px
    rgba(0,0,0,.08);


}

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

.login-wrapper{


min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

padding:20px;


}

.login-card{


width:100%;

max-width:420px;

background:#ffffff;

padding:30px;

border-radius:12px;

box-shadow:
    0 5px 20px
    rgba(0,0,0,.1);


}

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

.footer{


background:#111827;

color:#fff;

margin-top:50px;


}

.footer-container{


max-width:1200px;

margin:auto;

padding:40px 20px;


}

.footer-grid{


display:grid;

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

gap:25px;


}

.footer-col h3,
.footer-col h4{


margin-bottom:15px;


}

.footer-col ul{


list-style:none;


}

.footer-col li{


margin-bottom:8px;


}

.footer-col a{


color:#d1d5db;

text-decoration:none;


}

.footer-col a:hover{


color:#fff;


}

.footer-bottom{


margin-top:20px;

padding-top:20px;

border-top:
    1px solid #374151;

display:flex;

justify-content:
    space-between;


}

/* ==========================================
MODAL
========================================== */

.modal-overlay{


position:fixed;

inset:0;

background:
    rgba(0,0,0,.6);

display:none;

justify-content:center;

align-items:center;

z-index:99999;


}

.modal-overlay.show{


display:flex;


}

.modal-container{


width:100%;

max-width:600px;

background:#fff;

border-radius:12px;

overflow:hidden;


}

/* ==========================================
BACK TO TOP
========================================== */

.back-to-top{


position:fixed;

right:20px;

bottom:20px;

width:50px;

height:50px;

border:none;

border-radius:50%;

cursor:pointer;

display:none;


}

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

@media(max-width:768px){


.navbar-menu{

    flex-direction:column;
}

.stats-grid{

    grid-template-columns:1fr;
}

.footer-grid{

    grid-template-columns:1fr;
}

.footer-bottom{

    flex-direction:column;

    gap:10px;

    text-align:center;
}

.login-card{

    padding:20px;
}


}