/* Reset & Body */
* {margin:0; padding:0; box-sizing:border-box; font-family:'Poppins', sans-serif;}
body {background:#0f172a; color:#e2e8f0; overflow-x:hidden; line-height:1.6; transition: all 0.3s ease;}
a {text-decoration:none; color:inherit;}

/* Overlay */
#overlay {
  position: fixed; top:0; left:0; width:100%; height:100%;
  background: rgba(0,0,0,0.5); opacity:0; visibility:hidden;
  transition: all 0.3s ease; z-index:1500;
}
#overlay.active {opacity:1; visibility:visible;}

/* Sidebar */
.sidebar {
  position: fixed; top:0; left:-320px; width:300px; height:100vh;
  background: rgba(15,23,42,0.7); backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5); padding:3rem 2rem;
  border-top-right-radius: 20px; border-bottom-right-radius:20px;
  z-index:2000; transition: left 0.5s cubic-bezier(0.4,0,0.2,1), transform 0.4s ease, opacity 0.4s ease;
  transform: translateX(-20px); opacity:0;
}
.sidebar.active {left:0; transform: translateX(0); opacity:1;}
.sidebar-header {display:flex; align-items:center; gap:1rem; margin-bottom:3rem;}
.sidebar-header i {
  font-size:2.8rem;
  background: linear-gradient(135deg,#38bdf8,#818cf8,#a855f7);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  transition: transform 0.3s ease;
}
.sidebar-header h3 {
  font-weight:900; font-size:1.9rem; color:#fff;
  background: linear-gradient(90deg,#38bdf8,#818cf8,#a855f7);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 4px 14px rgba(0,0,0,0.3);
}
.sidebar a {
  display:flex; align-items:center; gap:1rem; padding:1rem 1.4rem;
  margin-bottom:1rem; border-radius:1.4rem; font-weight:600; color:#fff;
  background: rgba(255,255,255,0.05); position:relative;
  transition: all 0.35s ease, box-shadow 0.4s ease;
}
.sidebar a i {
  font-size:1.5rem; background: linear-gradient(135deg,#38bdf8,#818cf8,#a855f7);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  transition: transform 0.3s ease;
}
.sidebar a span {transition: transform 0.3s ease, color 0.3s ease;}
.sidebar a:hover {
  background: rgba(255,255,255,0.15);
  transform: translateX(12px);
  box-shadow:0 20px 60px rgba(56,189,248,0.35);
}
.sidebar a:hover i {transform: scale(1.3) rotate(8deg);}
.sidebar a:hover span {transform: translateX(5px); color:#fff;}
.sidebar a.active::before {
  content:''; position:absolute; left:0; top:0; width:6px; height:100%;
  border-radius:0 4px 4px 0; background: linear-gradient(180deg,#38bdf8,#a855f7);
}

/* Topbar */
.topbar {
  position: sticky; top:0; display:flex; justify-content:space-between; align-items:center;
  padding:1rem 2rem; background: rgba(15,23,42,0.7); backdrop-filter: blur(12px);
  box-shadow:0 4px 20px rgba(0,0,0,0.3); z-index:1000;
}
.topbar-logo {font-weight:800; font-size:2rem;
  background: linear-gradient(90deg,#38bdf8,#818cf8,#a855f7);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.menu-btn {font-size:2rem; cursor:pointer; color:#fff;}

/* Cards */
.card {background: rgba(255,255,255,0.05); border-radius:20px; padding:2rem;
  box-shadow:0 10px 30px rgba(0,0,0,0.2); transition: all 0.4s ease;}
.card:hover {transform: translateY(-10px); box-shadow:0 20px 50px rgba(56,189,248,0.3);}

.dropdown-menu {
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}
.dropdown-menu.show {
  opacity: 1;
  transform: translateY(0);
}

/* Notification */
.notification-dropdown {position: relative;}
.notification-bell {position: relative; cursor: pointer; padding:0.7rem 0.9rem; border-radius:50px; transition:0.3s;}
.notification-bell:hover {background: rgba(56,189,248,0.1);}
.notification-badge {
  position:absolute; top:0; right:0; width:20px; height:20px; border-radius:50%;
  background:#ef4444; color:#fff; font-size:0.75rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(239,68,68,0.4);
}
.notification-dropdown .dropdown-menu {
  position:absolute; right:0; left:auto; top:calc(100% + 0.5rem);
  width:360px; max-height:500px; overflow-y:auto; border-radius:20px;
  box-shadow:0 30px 60px rgba(0,0,0,0.2); padding:1rem; border:none;
  background: rgba(15,23,42,0.9); backdrop-filter: blur(12px); color:#e2e8f0;
  z-index:1050;
}
.notification-header {font-size:1.2rem; font-weight:700; margin-bottom:1rem; border-bottom:1px solid rgba(255,255,255,0.1); padding-bottom:0.5rem;}
.notification-item {display:flex; align-items:flex-start; padding:0.9rem; border-radius:15px; margin-bottom:0.8rem; background: rgba(255,255,255,0.05); transition: all 0.3s;}
.notification-item:hover {background: rgba(56,189,248,0.1); transform: translateY(-2px);}
.notification-icon {width:44px;height:44px;border-radius:50%; display:flex; align-items:center; justify-content:center; margin-right:0.8rem; background: rgba(56,189,248,0.15);}
.notification-content {flex:1;}
.notification-title {font-weight:600; font-size:1rem; color:#fff; margin-bottom:0.2rem;}
.notification-desc {font-size:0.9rem; color:#94a3b8; line-height:1.4;}
.notification-time {font-size:0.8rem; color:#64748b;}

/* Dashboard Header */
.dashboard-header {padding:5rem 2rem 2rem; text-align:center;}
.dashboard-header h1 {
  font-size:3rem; font-weight:800;
  background: linear-gradient(90deg,#38bdf8,#818cf8,#a855f7);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  margin-bottom:1rem;
}
.dashboard-header p {font-size:1.2rem; color:#94a3b8;}

/* Footer */
footer {background:#020617; border-top:1px solid rgba(255,255,255,0.1); padding:5rem 2rem 3rem; text-align:center;}
.logo-text {font-size:2.5rem; font-weight:800; background:linear-gradient(90deg,#38bdf8,#818cf8,#a855f7); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:1rem;}
.social-links a {display:inline-flex; align-items:center; justify-content:center; width:60px;height:60px; border-radius:50%; background: rgba(255,255,255,0.05); color:#94a3b8; margin:0 .5rem; font-size:1.8rem; transition: all 0.3s ease;}
.social-links a:hover {background: linear-gradient(135deg,#38bdf8,#818cf8,#a855f7); color:#fff; transform: translateY(-8px) scale(1.1);}

/* Livechat */
.livechat-btn {
  position: fixed; bottom:40px; right:40px; width:80px;height:80px;
  border-radius:50%; background: linear-gradient(135deg,#38bdf8,#818cf8,#a855f7);
  color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 20px 50px rgba(56,189,248,0.5); cursor:pointer; transition:0.3s;
}
.livechat-btn:hover {transform: scale(1.25) rotate(15deg); box-shadow:0 30px 70px rgba(56,189,248,0.6);}
.livechat-btn i {font-size:2.2rem;}

/* Responsive */
@media(max-width:992px){.dashboard-header h1{font-size:2.5rem;}}