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

:root{
--primary:#2563eb;
--secondary:#1e293b;
--success:#16a34a;
--danger:#dc2626;
--warning:#f59e0b;
--bg:#f5f7fb;
--card:#ffffff;
--text:#1e293b;
--border:#e5e7eb;
--shadow:0 10px 25px rgba(0,0,0,.08);
}

body{
background:var(--bg);
color:var(--text);
min-height:100vh;
}

.hidden{
display:none!important;
}

/* LOADER */

#loadingScreen{
position:fixed;
inset:0;
background:#fff;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
z-index:9999;
gap:20px;
}

.loader{
width:60px;
height:60px;
border:5px solid #ddd;
border-top:5px solid var(--primary);
border-radius:50%;
animation:spin 1s linear infinite;
}

@keyframes spin{
100%{
transform:rotate(360deg);
}
}

/* HEADER */

header{
background:var(--card);
box-shadow:var(--shadow);
padding:15px 25px;
display:flex;
justify-content:space-between;
align-items:center;
position:sticky;
top:0;
z-index:100;
}

.logo{
font-size:1.2rem;
font-weight:700;
}

.userSection{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
}

.userSection button{
padding:10px 16px;
border:none;
border-radius:10px;
cursor:pointer;
font-weight:600;
background:var(--primary);
color:#fff;
transition:.3s;
}

.userSection button:hover{
opacity:.9;
}

/* AUTH */

#authSection{
display:flex;
justify-content:center;
align-items:center;
padding:50px 15px;
}

.authContainer{
background:var(--card);
width:100%;
max-width:500px;
padding:30px;
border-radius:20px;
box-shadow:var(--shadow);
}

.authTabs{
display:flex;
gap:10px;
margin-bottom:20px;
}

.tabBtn{
flex:1;
padding:12px;
border:none;
cursor:pointer;
border-radius:12px;
background:#eef2ff;
font-weight:600;
}

.tabBtn.active{
background:var(--primary);
color:#fff;
}

.authForm{
display:flex;
flex-direction:column;
gap:12px;
}

.authForm h2{
margin-bottom:10px;
}

.authForm input{
padding:14px;
border:1px solid var(--border);
border-radius:12px;
outline:none;
}

.authForm button{
padding:14px;
border:none;
border-radius:12px;
cursor:pointer;
background:var(--primary);
color:#fff;
font-weight:600;
}

/* MAIN APP */

#appSection{
padding:20px;
}

/* DASHBOARD CARDS */

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

.card{
background:var(--card);
padding:20px;
border-radius:20px;
box-shadow:var(--shadow);
}

.card h3{
font-size:.9rem;
color:#64748b;
margin-bottom:10px;
}

.card h2{
font-size:1.8rem;
}

/* PAGE GRID */

.pageGrid{
display:grid;
grid-template-columns:1fr 1.3fr;
gap:20px;
}

.leftPanel,
.rightPanel{
display:flex;
flex-direction:column;
gap:20px;
}

/* PANELS */

.panel{
background:var(--card);
padding:20px;
border-radius:20px;
box-shadow:var(--shadow);
}

.panel h2{
margin-bottom:18px;
font-size:1.1rem;
}

/* PROFILE */

.profileArea{
display:flex;
flex-direction:column;
gap:12px;
}

.profileArea img{
width:120px;
height:120px;
border-radius:50%;
object-fit:cover;
border:4px solid #e2e8f0;
}

.profileArea input{
padding:12px;
border:1px solid var(--border);
border-radius:12px;
}

.profileArea button{
padding:12px;
border:none;
border-radius:12px;
background:var(--success);
color:#fff;
cursor:pointer;
font-weight:600;
}

/* FORMS */

form{
display:flex;
flex-direction:column;
gap:12px;
}

form input,
form select{
padding:12px;
border:1px solid var(--border);
border-radius:12px;
outline:none;
}

form button{
padding:12px;
border:none;
border-radius:12px;
background:var(--primary);
color:white;
font-weight:600;
cursor:pointer;
}

/* CHARTS */

canvas{
width:100%!important;
max-height:380px!important;
}

/* REPORTS */

.reportControls{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-bottom:20px;
}

.reportControls input{
padding:10px;
border-radius:10px;
border:1px solid var(--border);
}

.reportControls button{
padding:10px 18px;
background:var(--success);
border:none;
border-radius:10px;
color:white;
font-weight:600;
cursor:pointer;
}

#reportSummary{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:15px;
}

.summaryCard{
background:#f8fafc;
border:1px solid var(--border);
padding:15px;
border-radius:15px;
}

.summaryCard h4{
margin-bottom:8px;
}

/* SUGGESTIONS */

#suggestions{
display:flex;
flex-direction:column;
gap:12px;
}

.suggestion{
padding:15px;
border-radius:12px;
background:#fef3c7;
border-left:5px solid var(--warning);
}

/* TABLES */

.tablesSection{
margin-top:25px;
display:flex;
flex-direction:column;
gap:20px;
}

.tableWrapper{
overflow-x:auto;
}

table{
width:100%;
border-collapse:collapse;
min-width:700px;
}

thead{
background:#eff6ff;
}

th{
padding:14px;
text-align:left;
font-size:.9rem;
}

td{
padding:14px;
border-top:1px solid var(--border);
}

tbody tr:hover{
background:#f8fafc;
}

/* ACTION BUTTONS */

.editBtn{
background:var(--warning);
color:white;
border:none;
padding:8px 12px;
border-radius:8px;
cursor:pointer;
margin-right:5px;
}

.deleteBtn{
background:var(--danger);
color:white;
border:none;
padding:8px 12px;
border-radius:8px;
cursor:pointer;
}

/* TOAST */

#toast{
position:fixed;
bottom:20px;
right:20px;
background:#111827;
color:white;
padding:15px 20px;
border-radius:12px;
opacity:0;
pointer-events:none;
transition:.3s;
z-index:99999;
}

#toast.show{
opacity:1;
}

/* STATUS COLORS */

.success{
color:var(--success);
}

.danger{
color:var(--danger);
}

.warning{
color:var(--warning);
}

/* SCROLLBAR */

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

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

/* RESPONSIVE */

@media(max-width:1200px){

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

}

@media(max-width:768px){

header{
padding:15px;
flex-direction:column;
gap:12px;
}

.logo{
text-align:center;
}

.userSection{
justify-content:center;
}

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

.card h2{
font-size:1.3rem;
}

.panel{
padding:15px;
}

.profileArea img{
width:100px;
height:100px;
}

.reportControls{
flex-direction:column;
}

.reportControls button{
width:100%;
}

}

@media(max-width:500px){

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

.authContainer{
padding:20px;
}

.authForm input,
.authForm button{
padding:12px;
}

.profileArea img{
width:90px;
height:90px;
}

.card{
padding:15px;
}

.card h2{
font-size:1.2rem;
}

.panel h2{
font-size:1rem;
}

table{
min-width:600px;
}

}