/* ==================================================
JOELSTORE - STYLE.CSS
White Background + Black Text
Mobile & Desktop Responsive
================================================== */

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

html{
scroll-behavior;
}

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

background:#ffffff;
color:#000000;

line-height:1.6;
min-height:100vh;

}

/* ==================================================
LINKS
================================================== */

a{
text-decoration;
color:#2563eb;
}

a{
opacity:.9;
}

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

.container{
width:100%;
max-width:1200px;
margin;
padding:20px;
}

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

.main-content{
margin-left:260px;
padding:20px;
}

@media(max-width:768px){

.main-content{
    margin-left:0;
    padding:15px;
}

}

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

.card{

background:#ffffff;

border:1px solid #e5e7eb;

border-radius:12px;

padding:20px;

margin-bottom:20px;

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

}

.card h1,
.card h2,
.card h3{
color:#000;
}

/* ==================================================
BUTTONS
================================================== */

.btn{

display:inline-block;

padding:10px 18px;

border:none;

border-radius:8px;

cursor:pointer;

font-size:14px;

transition:.3s;

text-align:center;

}

.btn{
opacity:.9;
}

.btn-primary{
background:#2563eb;
color:#fff;
}

.btn-success{
background:#16a34a;
color:#fff;
}

.btn-danger{
background:#dc2626;
color:#fff;
}

.btn-warning{
background:#f59e0b;
color:#fff;
}

.btn-secondary{
background:#6b7280;
color:#fff;
}

/* ==================================================
FORMS
================================================== */

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

label{
display;
margin-bottom:6px;
font-weight:600;
}

.form-control{

width:100%;

padding:12px;

border:1px solid #d1d5db;

border-radius:8px;

background:#fff;

color:#000;

outline:none;

}

.form-control{

border-color:#2563eb;

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

}

/* ==================================================
ALERTS
================================================== */

.alert{

padding:15px;

border-radius:8px;

margin-bottom:15px;

}

.alert-success{

background:#dcfce7;

color:#166534;

}

.alert-danger{

background:#fee2e2;

color:#991b1b;

}

.alert-warning{

background:#fef3c7;

color:#92400e;

}

.alert-info{

background:#dbeafe;

color:#1e40af;

}

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

.table-container{
overflow-x;
}

.table{

width:100%;

border-collapse:collapse;

}

.table th{

background:#f3f4f6;

color:#000;

padding:12px;

text-align:left;

}

.table td{

padding:12px;

border-bottom:1px solid #e5e7eb;

}

.table tr{

background:#fafafa;

}

/* ==================================================
BADGE
================================================== */

.badge{

display:inline-block;

padding:6px 10px;

border-radius:20px;

font-size:12px;

font-weight:bold;

}

.badge-success{
background:#16a34a;
color:#fff;
}

.badge-danger{
background:#dc2626;
color:#fff;
}

.badge-warning{
background:#f59e0b;
color:#fff;
}

.badge-primary{
background:#2563eb;
color:#fff;
}

/* ==================================================
STATS
================================================== */

.stats-grid{

display:grid;

grid-template-columns:
repeat(
    auto-fit,
    minmax(220px,1fr)
);

gap:20px;

}

.stats-card{

background:#fff;

border:1px solid #e5e7eb;

border-radius:12px;

padding:20px;

text-align:center;

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

}

.stats-card h2{

margin-top:10px;

color:#2563eb;

}

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

.navbar{

background:#ffffff;

border-bottom:
1px solid #e5e7eb;

padding:15px 20px;

display:flex;

justify-content:space-between;

align-items:center;

position:sticky;

top:0;

z-index:1000;

}

.navbar-brand{

font-size:22px;

font-weight:bold;

color:#000;

}

.navbar-menu{

display:flex;

gap:15px;

}

.navbar-menu a{
color:#000;
}

.mobile-menu-btn{

display:none;

border:none;

background:none;

font-size:22px;

cursor:pointer;

}

@media(max-width:768px){

.mobile-menu-btn{
    display:block;
}

.navbar-menu{
    display:none;
}

}

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

.footer{

margin-top:40px;

background:#ffffff;

border-top:
1px solid #e5e7eb;

padding:25px;

text-align:center;

color:#555;

}

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

.auth-container{

max-width:450px;

margin:50px auto;

}

.auth-card{

background:#fff;

border:1px solid #e5e7eb;

border-radius:15px;

padding:30px;

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

}

.auth-card h1{

text-align:center;

margin-bottom:20px;

}

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

.modal{

display:none;

position:fixed;

inset:0;

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

z-index:9999;

}

.modal-content{

background:#fff;

width:90%;

max-width:600px;

margin:8% auto;

padding:20px;

border-radius:12px;

}

.close{

float:right;

font-size:28px;

cursor:pointer;

}

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

::-webkit-scrollbar{
width:8px;
}

::-webkit-scrollbar-track{
background:#f3f4f6;
}

::-webkit-scrollbar-thumb{
background:#cbd5e1;
border-radius:10px;
}

::-webkit-scrollbar-thumb

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

@media(max-width:768px){

.container{
    padding:15px;
}

.card{
    padding:15px;
}

.btn{
    width:100%;
    margin-bottom:10px;
}

.table th,
.table td{

    padding:10px;

    font-size:13px;
}

.stats-grid{
    grid-template-columns:1fr;
}

}