/*--sidebar--*/
/* Base Sidebar */
.sidebar {
  width: 240px;
  background: #fff;
  box-shadow: 2px 0 10px rgba(0,0,0,0.05);
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  justify-content: start;
  position: relative;
  top: 0;
  left: 0;
  bottom: 0;
  transition: all 0.3s ease;
  z-index: 1200;
}

.sidebar .brand {
  text-align: center;
  margin-bottom: 30px;
}

.sidebar .logo {
  height: 60px;
  margin-bottom: 20px;
}

.nav a {
  display: block;
  padding: 12px 16px;
  color: #444;
  text-decoration: none;
  font-weight: 600;
  border-radius: 8px;
  margin-bottom: 6px;
  transition: background 0.3s;
}

.nav a:hover,
.nav a.active {
  background: #f0f3fa;
  color: #4CA5CF;
}

.btn-logout {
  background: linear-gradient(90deg, #4CA5CF, #8967D2, #F18A57);
  border: none;
  color: #fff;
  padding: 12px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  margin-top: auto;
}

/* Mobile Header */
.mobile-header {
  display: none;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 10px 15px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1300;
}

.mobile-logo {
  height: 40px;
}

.sidebar-toggle {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
}

/* Overlay for mobile */
#overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1100;
  transition: opacity 0.3s;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
  }

  .sidebar.active {
    transform: translateX(0);
  }

  .mobile-header {
    display: flex;
  }

  /* Show overlay when sidebar active */
  #overlay.active {
    display: block;
    opacity: 1;
  }
}



/*--sidebar--*/




.dashboard{display:flex;min-height:100vh;}
.main-content{flex:1;padding:40px;}
.header h1{font-size:28px;margin-bottom:6px;color:#21314a;}
.header p{color:#666;margin-bottom:20px;}
.p-card{background:#fff;border-radius:14px;box-shadow:0 4px 12px rgba(0,0,0,0.05);padding:20px 30px;margin-bottom:20px;}
.profile-card{text-align:center;}
.avatar{width:100px;height:100px;border-radius:50%;margin-bottom:10px;}
.p-card h2{margin-bottom:10px;color:#21314a;}
.balance{font-size:18px;margin-bottom:10px;}
.transaction{font-size:14px;color:#555;margin-top:10px;}
.comm-grid{display:flex;justify-content:space-between;margin:10px 0;}
.comm-grid div{text-align:center;flex:1;}
.comm-grid h3{color:#4CA5CF;}
.btn-primary{background:linear-gradient(90deg,#4CA5CF,#8967D2,#F18A57);border:none;color:#fff;padding:10px 16px;border-radius:8px;cursor:pointer;font-weight:700;}
.btn-secondary{background:#eef2f6;border:none;color:#333;padding:10px 14px;border-radius:8px;cursor:pointer;margin-right:8px;font-weight:600;}
.btn-secondary:hover{background:#e0e5eb;}
.footer{text-align:center;margin-top:30px;font-size:14px;color:#666;}
@media (max-width:900px){.dashboard{flex-direction:column;}.sidebar{width:100%;flex-direction:row;align-items:center;justify-content:space-around;box-shadow:0 2px 8px rgba(0,0,0,0.05);}.nav{display:flex;gap:10px;}.nav a{margin-bottom:0;padding:8px 12px;}.btn-logout{padding:8px 14px;}.main-content{padding:20px;}.comm-grid{flex-direction:column;gap:10px;}}