@import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css');
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    direction: rtl;
    font-family: 'Vazirmatn', Tahoma, Arial, sans-serif;
  }

  body {
    @apply transition-colors duration-300;
    position: relative;
    overflow-x: hidden;
  }

  html {
    overflow-x: hidden;
  }
}

@layer components {
  .btn-primary {
    @apply bg-primary-600 hover:bg-primary-700 dark:bg-primary-500 dark:hover:bg-primary-400 text-white px-6 py-3 rounded-lg transition-all duration-200 font-medium shadow-lg dark:shadow-glow hover:shadow-xl;
  }

  .btn-secondary {
    @apply bg-gray-200 hover:bg-gray-300 dark:bg-dark-700 dark:hover:bg-dark-600 text-gray-800 dark:text-gray-100 px-6 py-3 rounded-lg transition-all duration-200 font-medium shadow-md dark:shadow-dark;
  }

  .card {
    @apply bg-white dark:bg-dark-850 rounded-lg shadow-lg dark:shadow-dark-lg p-6 transition-all duration-300 border border-gray-100 dark:border-dark-700;
  }

  .input-field {
    @apply w-full px-4 py-3 border border-gray-300 dark:border-dark-600 rounded-lg focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400 focus:border-transparent bg-white dark:bg-dark-800 text-gray-900 dark:text-gray-50 transition-all duration-200 shadow-sm dark:shadow-dark;
  }

  .nav-link {
    @apply text-gray-700 dark:text-gray-200 hover:text-primary-600 dark:hover:text-primary-400 px-4 py-2 rounded-md transition-all duration-200 font-medium hover:shadow-md dark:hover:shadow-glow;
  }

  .nav-link.active {
    @apply text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-900/30 border-r-4 border-primary-600 dark:border-primary-400 shadow-md dark:shadow-glow;
  }

  .nav-link.active:hover {
    @apply text-primary-700 dark:text-primary-300 bg-primary-100 dark:bg-primary-900/50 shadow-lg dark:shadow-glow transform hover:scale-105;
  }

  /* Mobile Navigation Fix */
  .mobile-nav-container {
    position: fixed !important;
    bottom: 0.5rem !important;
    left: 0.5rem !important;
    right: 0.5rem !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
  }

  /* Enhanced dark mode body background */
  .dark body {
    @apply bg-black;
  }

  /* Enhanced dark mode header and footer */
  .dark header {
    @apply bg-black shadow-dark-lg border-b border-gray-800;
  }

  .dark footer {
    @apply bg-black border-t border-gray-800;
  }

  /* Icon visibility improvements for dark mode */
  .dark i {
    @apply drop-shadow-sm;
  }

  .dark .text-primary-600 {
    @apply text-primary-400;
  }

  .dark .text-primary-500 {
    @apply text-primary-300;
  }

  .dark .bg-primary-100 {
    @apply bg-primary-900/30;
  }

  .dark .bg-primary-500 {
    @apply bg-primary-600;
  }

  /* Enhanced card hover effects */
  .card:hover {
    @apply transform hover:-translate-y-1 transition-all duration-300;
  }

  .dark .card:hover {
    @apply shadow-dark-xl;
  }

  /* Glowing effects for important elements */
  .dark .bg-green-500 {
    @apply shadow-glow-green;
  }

  .dark .bg-yellow-500 {
    @apply shadow-glow-yellow;
  }

  .dark .bg-primary-500 {
    @apply shadow-glow;
  }

  /* Better contrast for text in dark mode */
  .dark .text-gray-600 {
    @apply text-gray-300;
  }

  .dark .text-gray-500 {
    @apply text-gray-400;
  }

  .dark .text-gray-800 {
    @apply text-gray-100;
  }

  .dark .text-gray-700 {
    @apply text-gray-200;
  }

  /* Admin Panel Styles */
  .admin-nav-link {
    @apply flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white transition-all duration-200;
  }

  .admin-nav-link i {
    @apply ml-3 h-5 w-5 text-gray-400 dark:text-gray-500 transition-colors duration-200;
  }

  .admin-nav-link:hover i {
    @apply text-gray-500 dark:text-gray-400;
  }

  .admin-nav-link.active {
    @apply bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 border-l-4 border-primary-600 dark:border-primary-400;
  }

  .admin-nav-link.active i {
    @apply text-primary-500 dark:text-primary-400;
  }

  .admin-nav-link.active:hover {
    @apply bg-primary-100 dark:bg-primary-900/50 text-primary-800 dark:text-primary-200;
  }
}