/* Custom CSS Variables */
:root {
  /* Primary Colors */
  --primary-blue: #2563eb;
  --primary-blue-hover: #1d4ed8;
  --privacy-green: #059669;
  --warning-amber: #d97706;
  --danger-red: #dc2626;
  
  /* Neutral Colors */
  --background: #ffffff;
  --surface: #f8fafc;
  --surface-elevated: #f1f5f9;
  --border: #e2e8f0;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  
  /* Status Colors */
  --success: #10b981;
  --error: #ef4444;
  --warning: #f59e0b;
  --info: #3b82f6;
  
  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  
  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

/* Global Styles */
* {
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.6;
}

/* Custom Button Styles */
.btn-primary {
  @apply bg-primary-blue hover:bg-primary-blue-hover text-white font-semibold py-3 px-6 rounded-lg transition-colors duration-200 shadow-md hover:shadow-lg;
}

.btn-secondary {
  @apply bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

.btn-outline {
  @apply border-2 border-gray-300 hover:border-gray-400 text-gray-700 font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

.btn-success {
  @apply bg-privacy-green hover:bg-green-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200;
}

.btn-danger {
  @apply bg-danger-red hover:bg-red-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200;
}

.btn-download {
  @apply bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200 flex items-center space-x-2;
}

/* Custom Card Styles */
.tool-category-card {
  @apply bg-white border border-gray-200 rounded-xl p-6 hover:shadow-lg transition-all duration-300 cursor-pointer hover:border-primary-blue transform hover:-translate-y-1;
}

.feature-card {
  @apply bg-white border border-gray-200 rounded-xl p-6 text-center hover:shadow-md transition-all duration-300;
}

/* Privacy Badge Styles */
.privacy-badge {
  @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-privacy-green text-white;
}

.privacy-banner {
  @apply bg-privacy-green text-white px-4 py-2 text-center text-sm font-medium flex items-center justify-center space-x-2;
}

/* Modal Styles */
.modal-overlay {
  @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4;
}

.modal-content {
  @apply bg-white rounded-xl shadow-2xl max-w-2xl w-full max-h-screen overflow-y-auto;
}

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

/* File Upload Zone */
.file-upload-zone {
  @apply border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-primary-blue transition-colors duration-200 cursor-pointer;
}

.file-upload-zone.dragover {
  @apply border-primary-blue bg-blue-50;
}

/* Progress Bar */
.progress-bar {
  @apply w-full bg-gray-200 rounded-full h-2;
}

.progress-fill {
  @apply bg-primary-blue h-2 rounded-full transition-all duration-300;
}

/* Status Indicators */
.status-indicator {
  @apply inline-flex items-center px-2 py-1 rounded-full text-xs font-medium;
}

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

.status-inactive {
  @apply bg-gray-100 text-gray-800;
}

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

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

/* Format Badges */
.format-badge {
  @apply inline-block px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded font-medium;
}

/* Results Tabs */
.tab-btn {
  @apply px-4 py-2 font-medium text-sm rounded-lg transition-colors duration-200;
}

.tab-btn.active {
  @apply bg-primary-blue text-white;
}

.tab-btn:not(.active) {
  @apply text-gray-600 hover:text-gray-800 hover:bg-gray-100;
}

/* Countdown Timer */
.countdown-timer {
  @apply flex space-x-4 justify-center;
}

.time-unit {
  @apply text-center;
}

.time-unit .number {
  @apply block text-3xl font-bold text-danger-red;
}

.time-unit .label {
  @apply block text-sm text-gray-600 uppercase tracking-wider;
}

/* Responsive Design */
@media (max-width: 640px) {
  .modal-content {
    @apply mx-4 max-w-sm;
  }
  
  .tools-grid {
    @apply grid-cols-1;
  }
  
  .countdown-timer {
    @apply flex-col space-x-0 space-y-2;
  }
  
  /* Mobile-specific adjustments */
  .dashboard-header .header-center {
    @apply hidden;
  }
  
  .dashboard-header .header-right {
    @apply flex-col space-y-2;
  }
  
  .api-key-section {
    @apply flex-col space-y-2;
  }
  
  .api-key-input {
    @apply w-full text-sm;
  }
  
  .hero h1 {
    @apply text-3xl;
  }
  
  .hero p {
    @apply text-lg;
  }
  
  .privacy-badges {
    @apply grid-cols-1 gap-2;
  }
  
  .features-preview {
    @apply grid-cols-1 gap-4;
  }
  
  .tool-interface .grid {
    @apply grid-cols-1;
  }
  
  .file-upload-zone {
    @apply p-4;
  }
  
  .download-buttons {
    @apply grid-cols-1 gap-2;
  }
  
  .session-modal {
    @apply p-4;
  }
}

@media (max-width: 768px) {
  .dashboard-header {
    @apply px-2;
  }
  
  .dashboard-header .flex {
    @apply flex-col items-start space-y-3;
  }
  
  .session-info {
    @apply flex-col text-xs;
  }
  
  .breadcrumb {
    @apply text-xs flex-wrap;
  }
  
  .tool-header {
    @apply px-2;
  }
  
  .tool-content {
    @apply px-2;
  }
}

@media (max-width: 1024px) {
  .hero {
    @apply py-12;
  }
  
  .hero h1 {
    @apply text-4xl;
  }
  
  .features-preview {
    @apply grid-cols-2;
  }
  
  .privacy-badges {
    @apply grid-cols-2;
  }
}

/* Touch-friendly buttons for mobile */
@media (max-width: 768px) {
  .btn-primary,
  .btn-secondary,
  .btn-outline,
  .btn-download {
    @apply min-h-12 py-3;
  }
  
  .tab-btn {
    @apply min-h-10 px-3 py-2;
  }
  
  .close-btn {
    @apply min-h-10 min-w-10;
  }
}

/* Animation Classes */
.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

.slide-up {
  animation: slideUp 0.3s ease-in-out;
}

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

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

/* Loading Spinner */
.spinner {
  @apply animate-spin rounded-full h-6 w-6 border-b-2 border-primary-blue;
}

/* Utility Classes */
.text-gradient {
  background: linear-gradient(135deg, var(--primary-blue), var(--privacy-green));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.glass-effect {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.9);
}

/* Print Styles */
@media print {
  .no-print {
    display: none !important;
  }
}