@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --primary-color: #28388f;
    --secondary-color: #bc1e2c;
    --primary-hover: #1e2a6b;
    --secondary-hover: #a01824;
    --text-color: #333333;
    --light-gray: #f8f9fa;
    --border-color: #e9ecef;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text-color);
    line-height: 1.6;
  }

  h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.3;
  }
}

@layer components {
  /* Button Components */
  .btn-primary {
    @apply bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
  }

  .btn-secondary {
    @apply bg-red-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-red-700 transition duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2;
  }

  .btn-secondary {
    @apply bg-red-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-red-700 transition duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2;
  }

  .btn-outline {
    @apply border-2 border-blue-600 text-blue-600 px-6 py-3 rounded-lg font-medium hover:bg-blue-600 hover:text-white transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
  }

  /* Card Components */
  .card {
    @apply bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition duration-200;
  }

  .card-header {
    @apply px-6 py-4 border-b border-gray-200;
  }

  .card-body {
    @apply px-6 py-4;
  }

  .card-footer {
    @apply px-6 py-4 border-t border-gray-200 bg-gray-50;
  }

  /* Form Components */
  .form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200;
  }

  .form-label {
    @apply block text-sm font-medium text-gray-700 mb-2;
  }

  .form-error {
    @apply text-red-600 text-sm mt-1;
  }

  /* Navigation Components */
  .nav-link {
    @apply text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition duration-200;
  }

  .nav-link-active {
    @apply text-blue-600 bg-blue-50 px-3 py-2 rounded-md text-sm font-medium;
  }

  /* Hero Section */
  .hero-section {
    @apply relative bg-gradient-to-r from-blue-600 to-blue-800 text-white py-20;
  }

  .hero-content {
    @apply max-w-4xl mx-auto text-center px-4;
  }

  /* Section Components */
  .section {
    @apply py-16 px-4;
  }

  .section-title {
    @apply text-3xl font-bold text-center mb-8 text-gray-800;
  }

  .section-subtitle {
    @apply text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto;
  }

  /* Grid Components */
  .grid-cards {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
  }

  .grid-features {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8;
  }

  /* Feature Components */
  .feature-card {
    @apply text-center p-6;
  }

  .feature-icon {
    @apply w-16 h-16 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center mx-auto mb-4;
  }

  .feature-title {
    @apply text-xl font-semibold text-gray-800 mb-2;
  }

  .feature-description {
    @apply text-gray-600;
  }

  /* Testimonial Components */
  .testimonial-card {
    @apply bg-white p-6 rounded-lg shadow-md;
  }

  .testimonial-content {
    @apply text-gray-600 mb-4 italic;
  }

  .testimonial-author {
    @apply font-semibold text-gray-800;
  }

  /* Footer Components */
  .footer-section {
    @apply bg-gray-800 text-white py-12;
  }

  .footer-title {
    @apply text-lg font-semibold mb-4;
  }

  .footer-link {
    @apply text-gray-300 hover:text-white transition duration-200;
  }

  /* Student Dashboard Components */
  .dashboard-card {
    @apply bg-white rounded-lg shadow-md p-6 mb-6;
  }

  .dashboard-title {
    @apply text-xl font-semibold text-gray-800 mb-4;
  }

  .status-badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium;
  }

  .status-pending {
    @apply bg-yellow-100 text-yellow-800;
  }

  .status-approved {
    @apply bg-green-100 text-green-800;
  }

  .status-rejected {
    @apply bg-red-100 text-red-800;
  }

  .status-in-progress {
    @apply bg-blue-100 text-blue-800;
  }

  /* Application Form */
  .application-form {
    @apply max-w-2xl mx-auto bg-white p-8 rounded-lg shadow-md border border-gray-200;
  }

  .form-group {
    @apply mb-6;
  }

  /* Modal Components */
  .modal {
    @apply fixed inset-0 z-50;
  }

  .modal.hidden {
    display: none;
  }

  .modal.flex {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .modal-overlay {
    @apply absolute inset-0 bg-black bg-opacity-50;
  }

  .modal-container {
    @apply relative w-full h-full flex items-center justify-center p-4;
  }

  .modal-content {
    @apply bg-white rounded-2xl shadow-2xl w-full max-w-4xl max-h-[90vh] overflow-y-auto;
  }

  .modal-header {
    @apply bg-gradient-to-r from-blue-600 to-purple-600 text-white p-6 rounded-t-2xl;
  }

  .modal-body {
    @apply p-6;
  }

  .modal-close {
    @apply text-white hover:text-gray-200 transition-colors;
  }

  /* Loading States */
  .loading {
    @apply animate-pulse bg-gray-200 rounded;
  }

  .loading-text {
    @apply h-4 bg-gray-200 rounded w-3/4;
  }

  /* Alert Components */
  .alert {
    @apply p-4 rounded-lg mb-4;
  }

  .alert-success {
    @apply bg-green-100 text-green-800 border border-green-200;
  }

  .alert-error {
    @apply bg-red-100 text-red-800 border border-red-200;
  }

  .alert-warning {
    @apply bg-yellow-100 text-yellow-800 border border-yellow-200;
  }

  .alert-info {
    @apply bg-blue-100 text-blue-800 border border-blue-200;
  }

  /* Breadcrumb */
  .breadcrumb {
    @apply flex items-center space-x-2 text-sm text-gray-600 mb-6;
  }

  .breadcrumb-item {
    @apply hover:text-blue-600 transition duration-200;
  }

  .breadcrumb-separator {
    @apply text-gray-400;
  }

  /* Pagination */
  .pagination {
    @apply flex items-center justify-center space-x-2 mt-8;
  }

  .pagination-item {
    @apply px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:bg-gray-50 hover:text-gray-700 transition duration-200;
  }

  .pagination-active {
    @apply bg-blue-600 text-white border-blue-600 hover:bg-blue-700;
  }

  /* Search Components */
  .search-form {
    @apply relative max-w-md mx-auto;
  }

  .search-input {
    @apply w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
  }

  .search-icon {
    @apply absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400;
  }

  /* Social Media Icons */
  .social-icons {
    @apply flex space-x-4;
  }

  .social-icon {
    @apply w-8 h-8 bg-gray-200 text-gray-600 rounded-full flex items-center justify-center hover:bg-blue-600 hover:text-white transition duration-200;
  }

  /* Back to Top Button */
  .back-to-top {
    @apply fixed bottom-6 right-6 w-12 h-12 bg-blue-600 text-white rounded-full flex items-center justify-center shadow-lg hover:bg-blue-700 transition duration-200 z-40;
  }

  /* Custom Scrollbar */
  .custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 #f7fafc;
  }

  .custom-scrollbar::-webkit-scrollbar {
    width: 6px;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    background: #f7fafc;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 3px;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
  }
}

.has-mega-menu:hover .mega-menu {
  display: block;
}

@layer utilities {
  /* Custom utilities */
  .text-gradient {
    @apply bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent;
  }

  .bg-gradient-primary {
    @apply bg-gradient-to-r from-blue-600 to-blue-800;
  }

  .bg-gradient-secondary {
    @apply bg-gradient-to-r from-red-600 to-red-800;
  }

  .shadow-soft {
    box-shadow: 0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04);
  }

  .shadow-medium {
    box-shadow: 0 4px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }

  .shadow-strong {
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.15), 0 2px 10px -2px rgba(0, 0, 0, 0.05);
  }

  /* Animation utilities */
  .animate-fade-in {
    animation: fadeIn 0.5s ease-in-out;
  }

  .animate-slide-up {
    animation: slideUp 0.5s ease-out;
  }

  .animate-bounce-in {
    animation: bounceIn 0.6s ease-out;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes slideUp {
    from {
      transform: translateY(20px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes bounceIn {
    0% {
      transform: scale(0.3);
      opacity: 0;
    }
    50% {
      transform: scale(1.05);
    }
    70% {
      transform: scale(0.9);
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  /* Responsive utilities */
  .container-responsive {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  /* Print utilities */
  @media print {
    .no-print {
      display: none !important;
    }
    
    .print-break {
      page-break-before: always;
    }
  }
}

/* Universal Sidebar Menu - Works on all screen sizes */
.sidebar-menu {
  @apply fixed inset-0 bg-black bg-opacity-50 z-50;
}

.sidebar-menu-content {
  @apply fixed right-0 top-0 h-full w-80 max-w-full bg-white shadow-lg transform transition-transform duration-300 translate-x-full flex flex-col;
}

.sidebar-menu-open .sidebar-menu-content {
  @apply translate-x-0;
}

.sidebar-navigation {
  @apply flex-1 overflow-y-auto p-6;
}

.sidebar-menu-footer {
  @apply p-4 border-t border-gray-200 bg-white sticky bottom-0 z-10;
}

/* Responsive adjustments for different screen sizes */
@media (min-width: 1024px) {
  .sidebar-menu-content {
    @apply w-96;
  }
}

@media (max-width: 640px) {
  .sidebar-menu-content {
    @apply w-full;
  }
}

/* Top Bar - Desktop Only */
.top-bar {
  @apply relative overflow-hidden;
}

.top-bar::before {
  content: '';
  @apply absolute inset-0 bg-gradient-to-r from-blue-900 via-blue-800 to-indigo-900;
  background-size: 200% 200%;
  animation: gradientShift 8s ease infinite;
}

.top-bar > .container {
  @apply relative z-10;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Top bar logo styling */
.top-bar .site-branding img {
  @apply filter brightness-0 invert;
}

/* Top bar contact info hover effects */
.top-bar .contact-info-item {
  @apply transition-all duration-200 hover:scale-105;
}

/* Responsive adjustments for top bar */
@media (max-width: 768px) {
  .top-bar {
    @apply py-2;
  }
  
  .top-bar .contact-info {
    @apply hidden;
  }
}

@media (max-width: 640px) {
  .top-bar .site-title {
    @apply text-base;
  }
  
  .top-bar .site-description {
    @apply text-xs;
  }
}