/* NAVBAR */
.navbar {
  @apply bg-white border-gray-200 dark:bg-gray-900;
}
.navbar-container {
  @apply max-w-screen-xl flex items-center justify-between mx-auto p-4;
}

/* LOGO */
.navbar-logo {
  @apply flex items-center space-x-3 rtl:space-x-reverse;
}
.logo-img {
  @apply h-8;
}
.logo-text {
  @apply self-center text-2xl font-semibold whitespace-nowrap dark:text-white;
}

/* TOGGLE */
.navbar-toggle {
  @apply inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg hover:bg-gray-100 
         focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600;
}
.icon-menu {
  @apply w-5 h-5;
}

/* NAVIGATION LINKS */
.navbar-menu {
  @apply hidden grow md:flex md:justify-end pr-10;
}
.navbar-links {
  @apply flex space-x-6 font-medium;
}
.navbar-link {
  @apply text-gray-700 hover:underline dark:text-white;
}
.navbar-link.active {
  @apply font-semibold underline;
}

/* USER DROPDOWN (desktop) */
.user-btn {
  @apply flex text-sm bg-gray-800 rounded-full focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600;
}
.user-avatar {
  @apply w-8 h-8 rounded-md;
}
.user-dropdown-menu {
  @apply z-50 bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600;
}
.user-info {
  @apply text-sm text-gray-900 dark:text-white;
}
.user-name {
  @apply block font-medium;
}
.user-email {
  @apply block text-sm text-gray-500 truncate dark:text-gray-400;
}
.user-menu {
  @apply py-2 text-sm text-gray-700 dark:text-gray-200;
}
.user-link {
  @apply block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white;
}

/* MOBILE DRAWER */
.menu-drawer {
  @apply fixed top-0 right-0 w-full h-full z-50 bg-white dark:bg-gray-800 transform translate-x-full transition-transform duration-300 ease-in-out;
}
.menu-drawer.show {
  @apply translate-x-0;
}
.menu-drawer-header {
  @apply flex justify-between items-center p-4 border-b dark:border-gray-700;
}
.menu-drawer-title {
  @apply text-lg font-semibold dark:text-white;
}
.menu-drawer-close {
  @apply text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-white text-xl;
}

/* MOBILE NAV SECTION */
.mobile-nav {
  @apply space-y-4;
}