frontend/src/css/main.css

/* Main CSS File - Imports all modular CSS files */

/* Import CSS Modules */
@import './variables.css';
@import './base.css';
@import './typography.css';
@import './responsive.css';

/* Import Component Styles */
@import './components/buttons.css';
@import './components/cards.css';
@import './components/forms.css';
@import './components/navigation.css';
@import './components/header.css';
@import './components/sidebar.css';
@import './components/modal.css';
@import './components/table.css';
@import './components/grid.css';
@import './components/utilities.css';
@import './components/linkedin.css';
@import './components/keyword-analysis.css';

/* Import Responsive Styles */
@import './responsive/mobile-nav.css';

/* Application-Specific Styles */
.App {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Main Layout */
.main-container {
  display: flex;
  flex: 1;
  min-height: calc(100vh - 4rem);
  margin-top: 4rem; /* Space for fixed header */
  margin-left: 250px; /* Space for sidebar */
  transition: margin-left var(--transition-slow);
}

.main-container.sidebar-collapsed {
  margin-left: 104px; /* Increased by 30% from 80px */
}

/* Global text formatting to preserve line breaks and spaces */
* {
  box-sizing: border-box;
}

/* Ensure all text content preserves formatting */
.content-text,
.post-text,
.text-content,
.post-content,
.generated-content {
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  line-height: 1.6 !important;
}

/* Handle paragraph breaks specifically */
.content-text p,
.post-text p,
.text-content p,
.post-content p,
.generated-content p {
  margin: 0 0 1rem 0 !important;
}

.content-text p:last-child,
.post-text p:last-child,
.text-content p:last-child,
.post-content p:last-child,
.generated-content p:last-child {
  margin-bottom: 0 !important;
}

/* Ensure consistent spacing for multi-line content */
.multi-line-content {
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  line-height: 1.6 !important;
  margin-bottom: 1rem !important;
}

/* Mobile sidebar behavior */
@media (max-width: 1023px) {
  .main-container {
    margin-left: 0;
  }
  
  .main-container.sidebar-collapsed {
    margin-left: 0;
  }
}

.content {
  flex: 1;
  padding: var(--spacing-6);
  overflow-y: auto;
  width: 100%;
}

/* Loading States */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  font-size: var(--font-size-lg);
  color: var(--color-secondary-600);
}

/* Error States */
.error {
  background: var(--color-error-50);
  border: 1px solid var(--color-error-200);
  color: var(--color-error-700);
  padding: var(--spacing-4);
  border-radius: var(--radius);
  margin: var(--spacing-4) 0;
}

/* Animation Classes */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

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

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

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

.animate-slide-down {
  animation: slideDown 0.3s ease-out;
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Responsive Layout Adjustments */
@media (max-width: 767px) {
  .main-container {
    flex-direction: column;
    margin-left: 0; /* No margin on mobile */
  }
  
  .main-container.sidebar-collapsed {
    margin-left: 0; /* No margin on mobile */
  }
  
  .content {
    padding: var(--spacing-4);
  }
  
  .sidebar {
    position: fixed;
    top: 4rem;
    left: 0;
    height: calc(100vh - 4rem);
    transform: translateX(-100%);
    transition: transform var(--transition-slow);
    z-index: var(--z-50); /* Higher than header */
  }
  
  .sidebar.active {
    transform: translateX(0);
  }
  
  .sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-40); /* Between sidebar and header */
    display: none;
  }
  
  .sidebar-overlay.active {
    display: block;
  }
}

/* Print Styles */
@media print {
  .no-print {
    display: none !important;
  }
  
  .main-container {
    display: block;
  }
  
  .sidebar {
    display: none;
  }
  
  .content {
    padding: 0;
  }
}

/* High DPI Support */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .sharp {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .dark-mode {
    --color-primary-50: #6B0021;
    --color-primary-100: #910029;
    --color-primary-200: #CC4444;
    --color-primary-300: #E65555;
    --color-primary-400: #FF6666;
    --color-primary-500: #FF8080;
    --color-primary-600: #FF9999;
    --color-primary-700: #FFB3B3;
    --color-primary-800: #FFCCCC;
    --color-primary-900: #FFE4E4;
    --color-primary-950: #FFF5F5;
    
    --color-secondary-50: #1A1E22;
    --color-secondary-100: #39404B;
    --color-secondary-200: #212529;
    --color-secondary-300: #343A40;
    --color-secondary-400: #495057;
    --color-secondary-500: #6C757D;
    --color-secondary-600: #ADB5BD;
    --color-secondary-700: #CED4DA;
    --color-secondary-800: #DEE2E6;
    --color-secondary-900: #E9ECEF;
    --color-secondary-950: #F8F9FA;
    
    --color-accent-50: #020617;
    --color-accent-100: #0F172A;
    --color-accent-200: #1E293B;
    --color-accent-300: #334155;
    --color-accent-400: #475569;
    --color-accent-500: #64748B;
    --color-accent-600: #94A3B8;
    --color-accent-700: #CBD5E1;
    --color-accent-800: #E2E8F0;
    --color-accent-900: #F1F5F9;
    --color-accent-950: #F8FAFC;
    
    background: var(--color-secondary-950);
    color: var(--color-secondary-100);
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-accent-100);
  border-radius: var(--radius);
}

::-webkit-scrollbar-thumb {
  background: var(--color-secondary-400);
  border-radius: var(--radius);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-secondary-500);
}

/* Focus Visible for Accessibility */
.focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

/* Skip to Content Link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-primary-600);
  color: white;
  padding: 8px;
  text-decoration: none;
  border-radius: var(--radius);
  z-index: var(--z-50);
  font-weight: var(--font-weight-medium);
}

.skip-link:focus {
  top: 0;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High Contrast */
@media (prefers-contrast: high) {
  * {
    border-width: 2px;
  }
  
  .btn {
    border: 2px solid currentColor;
  }
}

/* Mobile Optimization */
@media (max-width: 767px) {
  .mobile-optimized {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  
  .mobile-optimized:active {
    transform: scale(0.98);
  }
  
  /* Mobile menu optimizations */
  .mobile-menu-content {
    -webkit-overflow-scrolling: touch;
  }
  
  .mobile-menu-content::-webkit-scrollbar {
    display: none;
  }
}

/* Performance Optimization */
@media (max-width: 767px) {
  .will-change-transform {
    will-change: transform;
  }
  
  .backface-hidden {
    backface-visibility: hidden;
  }
  
  .transform-3d {
    transform: translateZ(0);
  }
}