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

/* Import Inter font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Base styles */
@layer base {
  html {
    font-family: 'Inter', system-ui, sans-serif;
  }
  
  body {
    @apply bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-300;
  }
}

/* Component styles */
@layer components {
  /* Sidebar styles */
  .sidebar {
    @apply min-h-screen bg-gray-800 dark:bg-gray-900 text-white shadow-xl;
  }
  
  .sidebar-link {
    @apply flex items-center px-3 py-2.5 text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700 dark:hover:bg-gray-800 rounded-lg transition-all duration-200 group mx-2 my-1;
  }
  
  .sidebar-link.active {
    @apply bg-blue-600 text-white shadow-lg;
  }
  
  .sidebar-link:hover {
    @apply transform translate-x-1;
  }
  
  .sidebar-link i {
    @apply text-gray-400 group-hover:text-gray-300 transition-colors duration-200 mr-3;
  }
  
  .sidebar-link.active i {
    @apply text-white;
  }

  /* Enterprise Navigation Styles */
  .nav-item {
    @apply relative flex items-center px-4 py-3 text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700 dark:hover:bg-gray-800 rounded-xl transition-all duration-200 group mx-2 my-1;
  }

  .nav-item-active {
    @apply bg-gradient-to-r from-blue-600 to-blue-700 text-white shadow-lg;
  }

  .nav-icon-wrapper {
    @apply flex items-center justify-center w-10 h-10 rounded-lg bg-gray-600 group-hover:bg-gray-500 transition-colors duration-200 mr-4;
  }

  .nav-item-active .nav-icon-wrapper {
    @apply bg-white/20;
  }

  .nav-text {
    @apply flex-1 font-medium;
  }

  .nav-indicator {
    @apply absolute right-2 w-2 h-2 bg-white rounded-full;
  }

  .nav-section-header {
    @apply flex items-center my-6 px-4;
  }

  .nav-section-line {
    @apply flex-1 h-px bg-gray-600;
  }

  .nav-section-title {
    @apply px-3 text-xs font-semibold text-gray-400 uppercase tracking-wider;
  }

  /* Dark mode toggle switch */
  .dark-mode-toggle {
    @apply relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800;
  }

  .dark-mode-toggle.enabled {
    @apply bg-blue-600;
  }

  .dark-mode-toggle.disabled {
    @apply bg-gray-200 dark:bg-gray-700;
  }

  .dark-mode-toggle span {
    @apply inline-block h-4 w-4 transform rounded-full bg-white transition-transform;
  }

  .dark-mode-toggle.disabled span {
    @apply translate-x-1;
  }

  .dark-mode-toggle.enabled span {
    @apply translate-x-6;
  }

  /* Card styles */
  .card {
    @apply bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 transition-all duration-300;
  }
  
  .card-hover {
    @apply hover:shadow-xl hover:-translate-y-1 transition-all duration-300;
  }
  
  /* Professional Button System */
  .btn-primary {
    @apply bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white font-medium py-2.5 px-4 rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 shadow-sm hover:shadow-md;
  }
  
  .btn-secondary {
    @apply bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 active:bg-gray-300 dark:active:bg-gray-500 text-gray-900 dark:text-gray-100 font-medium py-2.5 px-4 rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 shadow-sm hover:shadow-md border border-gray-300 dark:border-gray-600;
  }
  
  .btn-success {
    @apply bg-emerald-600 hover:bg-emerald-700 active:bg-emerald-800 text-white font-medium py-2.5 px-4 rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 shadow-sm hover:shadow-md;
  }
  
  .btn-danger {
    @apply bg-red-600 hover:bg-red-700 active:bg-red-800 text-white font-medium py-2.5 px-4 rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 shadow-sm hover:shadow-md;
  }
  
  .btn-warning {
    @apply bg-amber-600 hover:bg-amber-700 active:bg-amber-800 text-white font-medium py-2.5 px-4 rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 shadow-sm hover:shadow-md;
  }

  .btn-outline-primary {
    @apply bg-transparent hover:bg-blue-50 dark:hover:bg-blue-900/20 active:bg-blue-100 dark:active:bg-blue-900/30 text-blue-600 dark:text-blue-400 font-medium py-2.5 px-4 rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 border-2 border-blue-600 dark:border-blue-400 hover:border-blue-700 dark:hover:border-blue-300;
  }

  .btn-sm {
    @apply py-1.5 px-3 text-sm;
  }

  .btn-lg {
    @apply py-3 px-6 text-lg;
  }

  .btn-disabled {
    @apply opacity-50 cursor-not-allowed pointer-events-none;
  }

  /* Form styles */
  .form-input {
    @apply block w-full px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200;
  }
  
  .form-label {
    @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2;
  }

  .form-select {
    @apply block w-full px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200;
  }

  .form-textarea {
    @apply block w-full px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 resize-vertical;
  }

  .form-checkbox {
    @apply h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded transition-colors duration-200;
  }

  .form-radio {
    @apply h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 transition-colors duration-200;
  }
  
  /* Alert styles */
  .alert {
    @apply p-4 rounded-lg border-l-4 mb-4 animate-slide-in;
  }
  
  .alert-success {
    @apply bg-emerald-50 dark:bg-emerald-900/20 border-emerald-400 text-emerald-800 dark:text-emerald-300;
  }
  
  .alert-error {
    @apply bg-red-50 dark:bg-red-900/20 border-red-400 text-red-800 dark:text-red-300;
  }
  
  .alert-warning {
    @apply bg-amber-50 dark:bg-amber-900/20 border-amber-400 text-amber-800 dark:text-amber-300;
  }
  
  .alert-info {
    @apply bg-blue-50 dark:bg-blue-900/20 border-blue-400 text-blue-800 dark:text-blue-300;
  }

  /* Badge styles */
  .badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  }

  .badge-primary {
    @apply bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300;
  }

  .badge-success {
    @apply bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-300;
  }

  .badge-danger {
    @apply bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300;
  }

  .badge-warning {
    @apply bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300;
  }

  .badge-gray {
    @apply bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300;
  }

  /* Modal styles */
  .modal-content {
    @apply w-full max-w-2xl max-h-screen overflow-y-auto bg-white dark:bg-gray-800 rounded-xl shadow-2xl;
  }

  .modal-header {
    @apply px-6 py-4 border-b border-gray-200 dark:border-gray-700;
  }

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

  .modal-footer {
    @apply px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/50 rounded-b-xl;
  }
  
  /* Progress bar styles */
  .progress-bar {
    @apply w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5;
  }
  
  .progress-fill {
    @apply bg-blue-600 h-2.5 rounded-full transition-all duration-500 ease-out;
  }

  /* Table styles */
  .table {
    @apply w-full text-sm text-left text-gray-500 dark:text-gray-400;
  }

  .table-header {
    @apply text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400;
  }

  .table-row {
    @apply bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200;
  }

  .table-cell {
    @apply px-6 py-4;
  }

  .table-header-cell {
    @apply px-6 py-3;
  }

  /* Status indicators */
  .status-online {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-300;
  }
  
  .status-offline {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300;
  }
  
  .status-pending {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300;
  }

  /* College Board specific styles */
  .cb-progress-container {
    @apply w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 mb-2;
  }
  
  .cb-progress-fill {
    @apply bg-gradient-to-r from-blue-500 to-blue-600 h-3 rounded-full transition-all duration-700 ease-out;
  }
  
  .cb-subject-card {
    @apply bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 p-6 cursor-pointer transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
  }

  /* Responsive utilities */
  .container-fluid {
    @apply w-full px-4 sm:px-6 lg:px-8;
  }

  .section-header {
    @apply text-2xl font-bold text-gray-900 dark:text-gray-100 mb-6;
  }

  .section-subheader {
    @apply text-lg font-semibold text-gray-700 dark:text-gray-300 mb-4;
  }

  /* Loading states */
  .loading-spinner {
    @apply inline-block animate-spin rounded-full h-4 w-4 border-b-2 border-blue-600;
  }

  .loading-skeleton {
    @apply animate-pulse bg-gray-200 dark:bg-gray-700 rounded;
  }

  /* Dark mode toggle */
  .dark-mode-toggle {
    @apply relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800;
  }
  
  .dark-mode-toggle.enabled {
    @apply bg-blue-600;
  }
  
  .dark-mode-toggle.disabled {
    @apply bg-gray-200 dark:bg-gray-700;
  }
  
  .dark-mode-toggle span {
    @apply inline-block h-4 w-4 transform rounded-full bg-white transition-transform;
  }
  
  .dark-mode-toggle.enabled span {
    @apply translate-x-6;
  }
  
  .dark-mode-toggle.disabled span {
    @apply translate-x-1;
  }

  /* Mobile optimizations */
  @media (max-width: 768px) {
    .sidebar {
      @apply fixed top-0 left-0 bottom-0 z-50 w-64 transform -translate-x-full transition-transform duration-300 ease-in-out;
    }
    
    .sidebar.open {
      @apply translate-x-0;
    }
    
    .sidebar-overlay {
      @apply fixed inset-0 bg-black bg-opacity-50 z-40;
    }
    
    .main-content {
      @apply ml-0;
    }

    .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning {
      @apply py-3 px-4 text-base;
    }

    .modal-content {
      @apply mx-4 my-8 max-w-none;
    }

    .table {
      @apply text-xs;
    }

    .table-cell, .table-header-cell {
      @apply px-3 py-2;
    }
  }

  /* Print styles */
  @media print {
    .sidebar, .no-print {
      @apply hidden;
    }
    
    .main-content {
      @apply ml-0;
    }
  }
}