/* GLOBAL BACKGROUND */

body.bg-gradient {
margin:0;
overflow-x:hidden;
background: radial-gradient(circle at top left, #ffffff 0%, #eef3f9 40%, #e4ecf7 100%);
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
animation: fadePage 0.6s ease;
}

/* SIDEBAR */

.sidebar {
position: fixed;
top:0;
left:0;
width:270px;
height:100vh;
padding:45px 30px;
background: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(35px);
-webkit-backdrop-filter: blur(35px);
border-right: 1px solid rgba(255,255,255,0.7);
box-shadow: 8px 0 50px rgba(0,0,0,0.04);
z-index:1000;
}

/* MAIN CONTENT AREA */

.main-content {
margin-left:270px;
width:calc(100% - 270px);
padding:40px;
min-height:100vh;
}

/* GLASS CARDS */

.glass-card {
background: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
border-radius: 24px;
border: 1px solid rgba(255,255,255,0.7);
box-shadow: 0 25px 60px rgba(0,0,0,0.05);
transition: all 0.3s ease;
animation: fadeInUp 0.6s ease forwards;
}

.glass-card:hover {
transform: translateY(-6px);
box-shadow: 0 35px 80px rgba(0,0,0,0.08);
}

/* NAV LINKS */

.nav-link {
color: #1f2937;
font-weight: 500;
padding: 12px 16px;
border-radius: 14px;
transition: all 0.2s ease;
margin-bottom: 6px;
display:block;
text-decoration:none;
}

.nav-link:hover {
background: rgba(37, 99, 235, 0.08);
transform: translateX(3px);
}

.active-link {
background: rgba(37, 99, 235, 0.08);
border-left: 3px solid #2563EB;
}

/* TYPOGRAPHY */

h3 {
font-weight: 700;
font-size: 30px;
letter-spacing: -0.5px;
}

h4 {
font-weight: 600;
}

h6 {
font-size: 13px;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 1px;
}

/* AVATAR */

.avatar-circle {
width: 40px;
height: 40px;
background: linear-gradient(135deg, #2563EB, #4F46E5);
color: #fff;
font-weight: 600;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
}

/* KPI ICON */

.kpi-icon {
position: absolute;
top: 18px;
right: 18px;
opacity: 0.15;
width: 24px;
height: 24px;
}

/* CHART CARD */

.chart-glass {
background: linear-gradient(
135deg,
rgba(255,255,255,0.75),
rgba(37,99,235,0.08)
);
backdrop-filter: blur(35px);
-webkit-backdrop-filter: blur(35px);
}

/* ANIMATIONS */

@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(15px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes fadePage {
from { opacity: 0; }
to { opacity: 1; }
}

/* RESPONSIVE */

@media (max-width:1000px){

.sidebar{
width:220px;
}

.main-content{
margin-left:220px;
width:calc(100% - 220px);
}

}

@media (max-width:700px){

.sidebar{
position:relative;
width:100%;
height:auto;
border-right:none;
}

.main-content{
margin-left:0;
width:100%;
padding:25px;
}

}
/* AUTH PAGE PREMIUM DESIGN */

.auth-body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    height: 100vh;
    background: linear-gradient(135deg, #0f172a, #1e293b, #020617);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* GLASS CARD */
.glass-card {
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

/* TITLE */
.auth-title {
    color: #fff;
    font-weight: 600;
}

.auth-sub {
    color: #aaa;
    font-size: 14px;
    margin-bottom: 20px;
}

/* INPUT */
.glass-card input {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
}

.glass-card input::placeholder {
    color: #aaa;
}

.glass-card input:focus {
    border-color: #6366f1;
    box-shadow: none;
    background: rgba(255,255,255,0.08);
}

/* BUTTON */
.auth-btn {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border: none;
    padding: 12px;
    color: #fff;
    font-weight: 500;
    border-radius: 10px;
    transition: 0.3s;
}

.auth-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(99,102,241,0.3);
}