/* =========================================
   IMPORT FONT
========================================= */

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

/* =========================================
   ROOT VARIABLES
========================================= */

:root{

--bg:#050816;
--bg2:#0b1120;

--sidebar:#0f172a;

--card:#111827;
--card2:#1e293b;

--primary:#2563eb;
--primary2:#3b82f6;

--success:#16a34a;
--danger:#dc2626;
--warning:#d97706;
--purple:#7c3aed;

--text:#ffffff;
--muted:#94a3b8;

--border:rgba(255,255,255,.05);

--radius:24px;

--shadow:
0 15px 35px rgba(0,0,0,.3);

}

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

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

html{
scroll-behavior:smooth;
}

body{

background:
linear-gradient(
135deg,
var(--bg),
var(--bg2)
);

color:var(--text);

overflow-x:hidden;

min-height:100vh;

}

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

a{
text-decoration:none;
color:var(--text);
}

/* =========================================
   IMAGES
========================================= */

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

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

.sidebar{

position:fixed;

left:0;
top:0;

width:270px;

height:100vh;

background:
rgba(15,23,42,.96);

backdrop-filter:blur(14px);

padding:24px 18px;

overflow-y:auto;

border-right:
1px solid var(--border);

z-index:999;

}

/* =========================================
   LOGO
========================================= */

.logo{

font-size:34px;

font-weight:800;

margin-bottom:32px;

background:
linear-gradient(
135deg,
#60a5fa,
#2563eb
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

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

.sidebar a{

display:flex;

align-items:center;

height:58px;

padding:0 18px;

background:var(--card);

border-radius:18px;

margin-bottom:14px;

font-size:15px;

font-weight:600;

transition:.25s ease;

}

.sidebar a:hover{

background:var(--primary);

transform:translateX(4px);

}

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

.main{

margin-left:270px;

padding:30px;

min-height:100vh;

}

/* =========================================
   TOPBAR
========================================= */

.topbar{

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

flex-wrap:wrap;

margin-bottom:30px;

}

/* =========================================
   PAGE TITLE
========================================= */

.page-title{

font-size:42px;

font-weight:800;

}

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

.btn{

height:54px;

padding:0 24px;

border:none;

border-radius:18px;

background:
linear-gradient(
135deg,
var(--primary2),
var(--primary)
);

color:white;

font-size:15px;

font-weight:700;

cursor:pointer;

display:flex;

align-items:center;

justify-content:center;

gap:10px;

transition:.25s ease;

}

.btn:hover{

transform:translateY(-2px);

}

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

.glass-btn{

height:54px;

padding:0 24px;

border:none;

border-radius:18px;

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

backdrop-filter:blur(10px);

color:white;

font-size:14px;

font-weight:600;

cursor:pointer;

transition:.25s ease;

display:flex;

align-items:center;

justify-content:center;

gap:10px;

}

.glass-btn:hover{

background:var(--primary);

}

/* =========================================
   CARDS
========================================= */

.card{

background:
rgba(17,24,39,.95);

border:
1px solid var(--border);

border-radius:32px;

padding:28px;

backdrop-filter:blur(14px);

box-shadow:var(--shadow);

}

/* =========================================
   GRID
========================================= */

.grid{

display:grid;

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

gap:20px;

}

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

.stats-card{

background:
rgba(17,24,39,.95);

padding:24px;

border-radius:28px;

border:
1px solid var(--border);

position:relative;

overflow:hidden;

}

.stats-card::before{

content:'';

position:absolute;

top:0;
left:0;

width:100%;
height:4px;

background:
linear-gradient(
90deg,
var(--primary2),
var(--primary)
);

}

.stats-card h2{

font-size:34px;

font-weight:800;

margin-bottom:8px;

}

.stats-card p{

font-size:14px;

color:var(--muted);

}

/* =========================================
   COLORS
========================================= */

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

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

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

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

/* =========================================
   INPUTS
========================================= */

.input,
select,
textarea{

width:100%;

height:56px;

padding:0 18px;

background:#0f172a;

border:
1px solid rgba(255,255,255,.06);

border-radius:16px;

color:white;

font-size:14px;

outline:none;

transition:.25s ease;

}

textarea{

padding-top:16px;

min-height:140px;

resize:none;

}

.input:focus,
select:focus,
textarea:focus{

border-color:var(--primary);

}

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

.table-wrapper{

overflow-x:auto;

border-radius:24px;

}

table{

width:100%;

border-collapse:collapse;

}

th{

background:#1e293b;

padding:18px;

text-align:left;

font-size:14px;

}

td{

padding:18px;

border-bottom:
1px solid rgba(255,255,255,.05);

font-size:14px;

}

/* =========================================
   BADGES
========================================= */

.badge{

padding:8px 14px;

border-radius:999px;

font-size:12px;

font-weight:700;

display:inline-flex;

align-items:center;

justify-content:center;

}

.badge-success{
background:rgba(22,163,74,.2);
color:#22c55e;
}

.badge-danger{
background:rgba(220,38,38,.2);
color:#ef4444;
}

.badge-warning{
background:rgba(217,119,6,.2);
color:#f59e0b;
}

/* =========================================
   MODALS
========================================= */

.modal{

position:fixed;

inset:0;

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

display:none;

align-items:center;

justify-content:center;

padding:20px;

z-index:9999;

}

.modal-content{

width:100%;

max-width:520px;

background:#111827;

border-radius:32px;

padding:28px;

border:
1px solid rgba(255,255,255,.06);

}

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

.floating-btn{

position:fixed;

right:30px;

bottom:30px;

width:70px;

height:70px;

border:none;

border-radius:50%;

background:
linear-gradient(
135deg,
#3b82f6,
#2563eb
);

color:white;

font-size:34px;

cursor:pointer;

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

z-index:999;

transition:.25s ease;

}

.floating-btn:hover{

transform:scale(1.08);

}

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

.chart-card{

background:#111827;

padding:24px;

border-radius:28px;

border:
1px solid rgba(255,255,255,.05);

}

/* =========================================
   SEARCH BAR
========================================= */

.search-bar{

display:flex;

align-items:center;

gap:12px;

background:#0f172a;

padding:0 18px;

height:56px;

border-radius:18px;

}

/* =========================================
   PROFILE BOX
========================================= */

.profile-box{

display:flex;

align-items:center;

gap:14px;

}

.profile-avatar{

width:50px;
height:50px;

border-radius:50%;

object-fit:cover;

}

/* =========================================
   TOAST
========================================= */

.toast{

position:fixed;

top:30px;

right:30px;

background:#111827;

padding:18px 24px;

border-radius:18px;

border:
1px solid rgba(255,255,255,.05);

z-index:99999;

}

/* =========================================
   LOADER
========================================= */

.loader{

width:50px;
height:50px;

border:
4px solid rgba(255,255,255,.1);

border-top:
4px solid var(--primary);

border-radius:50%;

animation:spin 1s linear infinite;

margin:auto;

}

@keyframes spin{

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

}

/* =========================================
   ANIMATIONS
========================================= */

.fade-in{

animation:fade .4s ease;

}

@keyframes fade{

from{
opacity:0;
transform:translateY(10px);
}

to{
opacity:1;
transform:translateY(0);
}

}

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

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

::-webkit-scrollbar-track{
background:#0f172a;
}

::-webkit-scrollbar-thumb{
background:#2563eb;
border-radius:999px;
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:992px){

.sidebar{

position:relative;

width:100%;

height:auto;

}

.main{

margin-left:0;

padding:20px;

}

.grid{

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

}

}

@media(max-width:768px){

.page-title{
font-size:30px;
}

.card{
padding:20px;
border-radius:24px;
}

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

.topbar{
flex-direction:column;
align-items:flex-start;
}

.btn,
.glass-btn{
width:100%;
}

}

@media(max-width:500px){

.stats-card h2{
font-size:28px;
}

}