navbuddy

/* NavBuddy Native DaisyUI Integration */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* ==========================================================================

   NavBuddy Native DaisyUI Components

   ========================================================================== */

@layer components {
  /* Base Navigation using DaisyUI navbar */
  .navbuddy-nav {
    @apply navbar bg-base-100 border-b border-base-300 shadow-sm min-h-16 px-4;
  }

  /* Navigation Brand */
  .navbuddy-nav-brand {
    @apply navbar-start;
  }

  .navbuddy-nav-brand .navbuddy-brand-link {
    @apply btn btn-ghost text-xl font-bold hover:bg-base-200;
  }

  /* Navigation Menu */
  .navbuddy-nav-menu {
    @apply navbar-center hidden lg:flex;
  }

  .navbuddy-nav-menu .navbuddy-menu {
    @apply menu menu-horizontal px-1 gap-2;
  }

  /* Navigation Actions */
  .navbuddy-nav-actions {
    @apply navbar-end gap-2;
  }

  /* Menu Items */
  .navbuddy-menu-item {
    @apply relative;
  }

  .navbuddy-menu-item > .navbuddy-menu-link {
    @apply btn btn-ghost btn-sm normal-case font-medium
           hover:bg-primary hover:text-primary-content
           focus:bg-primary focus:text-primary-content
           transition-all duration-200;
  }

  .navbuddy-menu-item.active > .navbuddy-menu-link {
    @apply bg-primary text-primary-content;
  }

  /* Dropdown Menus */
  .navbuddy-dropdown {
    @apply dropdown dropdown-hover;
  }

  .navbuddy-dropdown-menu {
    @apply dropdown-content menu p-2 shadow-lg bg-base-100 rounded-box w-52 mt-1
           border border-base-300 animate-slide-down z-[1000];
  }

  .navbuddy-dropdown-item {
    @apply block;
  }

  .navbuddy-dropdown-link {
    @apply btn btn-ghost btn-sm justify-start normal-case font-normal
           hover:bg-primary hover:text-primary-content
           focus:bg-primary focus:text-primary-content;
  }

  /* Mega Menus */
  .navbuddy-mega-menu {
    @apply absolute top-full left-0 w-screen max-w-6xl
           bg-base-100 border border-base-300 shadow-xl rounded-b-lg
           animate-slide-down z-[1010] mt-1;
  }

  .navbuddy-mega-menu-container {
    @apply p-6;
  }

  .navbuddy-mega-menu-header {
    @apply mb-6;
  }

  .navbuddy-mega-menu-title {
    @apply text-2xl font-bold text-base-content mb-2;
  }

  .navbuddy-mega-menu-description {
    @apply text-base-content/70 text-sm;
  }

  .navbuddy-mega-menu-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6;
  }

  .navbuddy-mega-menu-section {
    @apply space-y-3;
  }

  .navbuddy-mega-menu-section-title {
    @apply font-semibold text-base-content border-b border-base-300 pb-2 mb-3;
  }

  .navbuddy-mega-menu-items {
    @apply space-y-2;
  }

  .navbuddy-mega-menu-item {
    @apply block p-2 rounded-lg hover:bg-base-200 transition-colors duration-150;
  }

  .navbuddy-mega-menu-item-title {
    @apply font-medium text-base-content;
  }

  .navbuddy-mega-menu-item-description {
    @apply text-sm text-base-content/70 mt-1;
  }

  /* Mobile Navigation */
  .navbuddy-mobile-toggle {
    @apply btn btn-square btn-ghost lg:hidden;
  }

  .navbuddy-mobile-menu {
    @apply fixed inset-0 bg-base-100 z-[1030] lg:hidden
           transform transition-transform duration-300 ease-in-out;
  }

  .navbuddy-mobile-menu.closed {
    @apply translate-x-full;
  }

  .navbuddy-mobile-menu.open {
    @apply translate-x-0;
  }

  .navbuddy-mobile-menu-header {
    @apply flex items-center justify-between p-4 border-b border-base-300;
  }

  .navbuddy-mobile-menu-content {
    @apply p-4;
  }

  .navbuddy-mobile-menu .navbuddy-menu {
    @apply menu menu-vertical w-full gap-2;
  }

  .navbuddy-mobile-menu .navbuddy-menu-item > .navbuddy-menu-link {
    @apply btn btn-ghost justify-start normal-case font-medium w-full
           hover:bg-primary hover:text-primary-content;
  }

  /* Icons */
  .navbuddy-icon {
    @apply w-4 h-4 mr-2 shrink-0;
  }

  .navbuddy-icon-only {
    @apply w-4 h-4;
  }

  /* Badges */
  .navbuddy-badge {
    @apply badge badge-primary badge-sm ml-2;
  }

  /* Dividers */
  .navbuddy-divider {
    @apply divider my-2;
  }

  /* Loading States */
  .navbuddy-loading {
    @apply loading loading-spinner loading-sm;
  }

  /* Theme Toggle */
  .navbuddy-theme-toggle {
    @apply btn btn-ghost btn-circle;
  }

  /* Search */
  .navbuddy-search {
    @apply input input-bordered input-sm w-full max-w-xs;
  }

  /* Responsive Utilities */
  @screen lg {
    .navbuddy-mobile-menu {
      @apply hidden;
    }
    
    .navbuddy-mobile-toggle {
      @apply hidden;
    }
  }
}

/* ==========================================================================

   Enhanced Animations

   ========================================================================== */

@layer utilities {
  .animate-slide-down {
    animation: slideDown 0.3s ease-out;
  }
  
  .animate-slide-up {
    animation: slideUp 0.3s ease-out;
  }
  
  .animate-fade-in {
    animation: fadeIn 0.2s ease-out;
  }
  
  .animate-scale-in {
    animation: scaleIn 0.2s ease-out;
  }
}

/* ==========================================================================

   Custom Properties for Advanced Theming

   ========================================================================== */

:root {
  --navbuddy-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --navbuddy-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --navbuddy-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --navbuddy-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --navbuddy-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  
  --navbuddy-transition-fast: 150ms;
  --navbuddy-transition-normal: 250ms;
  --navbuddy-transition-slow: 350ms;
}