.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 240px;
  height: 100%;
  background: #f3e9dc;
  padding-top: 0;
  padding-bottom: 20px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow-y: auto;
  transform: translateX(0);
  transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
  box-shadow: 2px 0 8px rgba(0,0,0,0.1);
}

.sidebar .logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 18px; 
  margin: 0;
  cursor: pointer;
}
.sidebar .logo img { width: 40px; height: 40px; }T
.sidebar .brand { font-weight: bold; font-size: 1.3em; color: #4b3621; }

.sidebar nav ul {
  list-style: none;
  padding: 0;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
}
.sidebar nav ul li {
  padding: 12px 18px;
  margin: 4px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  color: #4b3621;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.3s, color 0.3s, transform 0.2s;
}
.sidebar nav ul li:hover,
.sidebar nav ul li.active {
  background: #6f4e37;
  color: #fff;
  transform: scale(1.02);
}

.profile-card {
  margin-top: auto;
  padding: 15px 18px;
  display: none;
  align-items: center;
  gap: 12px;
  border-top: 1px solid #ddd;
  transition: background 0.25s;
  cursor: pointer;
}
.profile-card:hover { 
  background: #552915; 
}

.profile-avatar i { 
  font-size: 2em; 
  color: #552915; 
  transition: color 0.25s;
}
.profile-info .profile-name { 
  font-weight: bold; 
  color: #4b3621; 
  transition: color 0.25s;
}
.profile-info .edit-text { 
  font-size: 0.85em; 
  color: #777; 
  transition: color 0.25s;
}
.profile-info .edit-text:hover { color: #552915; }

.profile-card:hover .profile-avatar i,
.profile-card:hover .profile-info .profile-name,
.profile-card:hover .profile-info .edit-text {
  color: #fff;
}

.profile-card.active {
  background: #552915;
}
.profile-card.active .profile-avatar i,
.profile-card.active .profile-info .profile-name,
.profile-card.active .profile-info .edit-text {
  color: #fff;
}

.logout {
  padding: 14px 18px;
  display: none;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  border-top: 1px solid #ddd;
  cursor: pointer;
  color: #552915;
  transition: background 0.25s, color 0.25s;
}
.logout:hover { background: #6f4e37; color: #fff; }

.login-link {
  margin-top: auto;
  padding: 14px 18px;
  display: none;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  border-top: 1px solid #ddd;
  cursor: pointer;
  color: #552915;
  transition: background 0.25s, color 0.25s;
}
.login-link:hover { background: #6f4e37; color: #fff; }

.hamburger {
  position: fixed;
  top: 20px;
  left: 15px;
  font-size: 2em;
  color: #552915;
  cursor: pointer;
  z-index: 2003;
  display: none;
}

.sidebar .close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 1.5em;
  cursor: pointer;
  color: #552915;
  transition: color 0.25s, opacity 0.25s;
  opacity: 0;
  z-index: 2010;
}
.sidebar .close-btn:hover { color: #fff; }

.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: #c8b7a1; border-radius: 3px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: #b39c82; }

.top-bar {
  display: none;
  width: 100%;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2002;
  border-bottom: 2px solid #704225;
  background-color: #fff8f0;
  box-sizing: border-box;
}


.top-bar .hamburger {
  position: absolute; 
  left: 15px;
  font-size: 1.8em;
  color: #552915;
  cursor: pointer;
}

.top-bar .mobile-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.top-bar .mobile-logo img {
  width: 40px;
  height: 40px;
}

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 200;
  display: none;
  transition: opacity 0.25s ease-in-out;
}
#overlay.active {
  display: block;
}

@media (max-width: 1024px) {
  .hamburger { display: block; }
  .sidebar { transform: translateX(-240px); padding-top: 20px; }
  .sidebar.active { transform: translateX(0); }
  .sidebar .close-btn { opacity: 1; }
  .top-bar { display: flex; }
  main.menu-container { margin-left: 0; padding-top: 60px; }
}