.app-navbar {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 10px 20px;
     /* Adjust padding as needed */
     color: var(--theme-primary);
     text-shadow: 0 0 5px var(--theme-glow-1);
     border-bottom: 1px solid rgba(var(--theme-primary), 0.3);
     /* Optional separator */
     margin-bottom: 15px;
     /* Space below navbar */
     font-size: 24px;
     /* Adjust font size */
     position: relative;
     /* For absolute positioning of elements if needed */
     width: 100%;
     box-sizing: border-box;
}

.navbar-left,
.navbar-center,
.navbar-right {
     display: flex;
     align-items: center;
}

.navbar-left {
     justify-content: flex-start;
     flex: 1;
     /* Takes up available space */
}

.navbar-center {
     justify-content: center;
     flex: 2;
     /* Takes up more space, adjust as needed */
     text-align: center;
     white-space: nowrap;
     /* Prevent wrapping */
     overflow: hidden;
     text-overflow: ellipsis;
     /* Add ellipsis if text overflows */
}

.navbar-right {
     justify-content: flex-end;
     flex: 1;
     /* Takes up available space */
     gap: 15px;
     /* Space between items */
}

/* Theme Indicator Styling (reuse existing if possible) */
.navbar-left .theme-indicator {
     font-size: 16px;
     background-color: rgba(0, 0, 0, 0.4);
     border: 1px solid var(--theme-primary);
     padding: 2px 8px;
     border-radius: 4px;
}

/* Cursor Styling (reuse existing) */
#navbar-cursor {
     animation: blink 1s step-end infinite;
     background-color: var(--theme-primary);
     display: inline-block;
     width: 12px;
     /* Adjust size */
     height: 24px;
     /* Match font size */
     margin-left: 5px;
     box-shadow: 0 0 5px var(--theme-glow-1);
     vertical-align: middle;
}

@keyframes blink {

     0%,
     100% {
          opacity: 1;
     }

     50% {
          opacity: 0;
     }
}

/* Icon Link Styling */
.navbar-icon-link {
     color: var(--theme-primary);
     font-size: 28px;
     /* Adjust icon size */
     text-decoration: none;
     transition: color 0.3s ease, text-shadow 0.3s ease;
}

.navbar-icon-link:hover {
     color: var(--theme-glow-2);
     text-shadow: 0 0 8px var(--theme-glow-2);
}

/* Logout Button Styling */
.navbar-logout-btn {
     background: none;
     border: none;
     color: var(--theme-primary);
     font-size: 24px;
     /* Adjust icon size */
     cursor: pointer;
     padding: 0;
     transition: color 0.3s ease, text-shadow 0.3s ease;
}

.navbar-logout-btn:hover {
     color: var(--theme-error);
     /* Use error color for logout hover */
     text-shadow: 0 0 8px var(--theme-error);
}

/* Avatar Container */
#navbar-avatar-container .user-avatar {
     /* Ensure avatar.js styles apply, override if necessary */
     width: 40px !important;
     /* Smaller avatar for navbar */
     height: 40px !important;
     min-width: 40px !important;
     min-height: 40px !important;
     max-width: 40px !important;
     max-height: 40px !important;
     border-width: 1px !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
     .app-navbar {
          font-size: 18px;
          padding: 8px 15px;
     }

     #navbar-cursor {
          height: 18px;
          width: 10px;
     }

     .navbar-icon-link {
          font-size: 24px;
     }

     .navbar-logout-btn {
          font-size: 20px;
     }

     #navbar-avatar-container .user-avatar {
          width: 32px !important;
          height: 32px !important;
          min-width: 32px !important;
          min-height: 32px !important;
          max-width: 32px !important;
          max-height: 32px !important;
     }

     .navbar-right {
          gap: 10px;
     }
}

@media (max-width: 480px) {
     .app-navbar {
          flex-direction: column;
          /* Stack elements vertically */
          align-items: stretch;
          /* Stretch items */
          padding: 10px;
          gap: 5px;
     }

     .navbar-left,
     .navbar-center,
     .navbar-right {
          justify-content: center;
          /* Center items in stacked layout */
          flex: none;
          /* Reset flex property */
          width: 100%;
     }

     .navbar-left {
          order: 2;
     }

     /* Move theme below center */
     .navbar-center {
          order: 1;
          font-size: 16px;
     }

     /* Center text first */
     .navbar-right {
          order: 3;
     }

     /* Icons/logout last */

     #navbar-avatar-container {
          display: none;
          /* Optionally hide avatar on very small screens */
     }
}