/* Theme selector styles */
#theme-selector {display: flex;gap: 10px; }

.color-box { width: 20px; height: 20px; cursor: pointer; border-radius: 3px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);}

/* Prevent transition flickering during navigation */
body { transition: all 0.1s ease-in-out; }
/* Ensure theme classes have higher specificity */
body.theme-red, body.theme-blue { transition: none; /* Remove transition during theme changes to prevent flicker */ }
/* Apply transitions only to specific properties if needed */
.theme-red .nav-link, .theme-blue .nav-link { transition: background-color 0.3s ease, border-left 0.3s ease;}
/* Top bar base styles */
.top-bar { height: 40px; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 15px;}
/* Red top bar */
.theme-red .top-bar { background-color: #D6202A;}
/* Logo container height equals top-bar height */
.theme-red .logo-section { background-color: #D6202A; padding: 10px; text-align: center; border-bottom: 1px solid white; }
.theme-red .student-photo { width: 130px; height: 160px; border-radius: 8px; background-color: #d1d9eb; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.theme-red .user-card .profile-pic { width: 140px; height: 160px; border-radius: 70%; border: 3px solid #c78181; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); object-fit: cover; margin-bottom: 0.5rem;}
.theme-red .btn-logout { width: 100%; padding: 12px; background-color: #D6202A; color: white; border: none; border-radius: 8px; cursor: pointer; }
.theme-red .btn-logout:hover { background-color: #cc646a; }
.theme-red .nav-link { display: flex; align-items: center; padding: 12px 20px; color: #fff; text-decoration: none; transition: background 0.3s; }
.theme-red .nav-link i.material-icons { margin-right: 10px; }
.theme-red .nav-link:hover, .theme-red .nav-link.active { background-color: #D6202A; border-left: 4px solid #fff; color: #fff; }





/* Theme Blue top bar */
.theme-blue .top-bar { background-color: #024CAA; }
.theme-blue .logo-section { background-color: #024CAA; padding: 10px; text-align: center; border-bottom: 1px solid white; }
.theme-blue .student-photo { width: 130px; height: 160px; border-radius: 8px; background-color: #9faae0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.theme-blue .user-card .profile-pic { width: 140px; height: 160px; border-radius: 70%; border: 3px solid #4a90e2; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); object-fit: cover; margin-bottom: 0.5rem;}
.theme-blue .btn-logout { background-color: transparent; border: 1px solid #ccc; color: #fff; width: 100%; padding: 10px; cursor: pointer; transition: background 0.3s; }
.theme-blue .btn-logout:hover { background-color: #024CAA; border-color: #fff; }
.theme-blue .nav-link { display: flex; align-items: center; padding: 12px 20px; color: #fff; text-decoration: none; transition: background 0.3s; }
.theme-blue .nav-link i.material-icons { margin-right: 10px; }
.theme-blue .nav-link:hover, .theme-blue .nav-link.active { background-color: #024CAA; border-left: 4px solid #fff; color: #fff; }