/* public/css/main.css */
/* SlamPy Invoices - Master CSS Import File */

/*
 * =============================================================================
 * SlamPy INVOICES CSS ARCHITECTURE
 * =============================================================================
 * 
 * This file imports all CSS modules in the correct order to ensure proper
 * cascade and specificity management. The order matters for optimal performance
 * and maintainability.
 * 
 * Architecture Overview:
 * 1. Variables   → CSS custom properties and design tokens
 * 2. Base        → Reset, typography, utilities, animations
 * 3. Components  → Reusable UI components (buttons, forms, etc.)
 * 4. Layout      → Application structure (header, sidebar, main)
 * 5. Theme       → Theme switcher component
 * 6. Responsive  → Media queries and device adaptations
 * 
 * =============================================================================
 */

/* === DESIGN SYSTEM FOUNDATION === */
/*
 * Variables must be loaded first as they define the design system
 * that all other modules depend on. Contains:
 * - Color palette (light/dark themes)
 * - Spacing scale and typography
 * - Component-specific variables
 * - Animation timing and easing
 * - Layout dimensions
 */
 @import 'variables.css';

 /* === CORE FOUNDATION === */
 /*
  * Base styles establish the foundation including:
  * - Modern CSS reset for cross-browser consistency
  * - Typography system with responsive scaling
  * - Utility classes for common patterns
  * - Core animations and keyframes
  * - Animated background system
  * - Accessibility defaults
  */
 @import 'base.css';
 
 /* === COMPONENT LIBRARY === */
 /*
  * All reusable UI components that make up the interface:
  * - Button system (primary, secondary, sizes, states)
  * - Form controls (inputs, selects, validation)
  * - Card components with glassmorphism effects
  * - Modal dialogs and overlays
  * - Alert and notification components
  * - Progress indicators and spinners
  * - Badge and tooltip systems
  */
 @import 'components.css';
 
 /* === APPLICATION LAYOUT === */
 /*
  * Structural layout components specific to the invoice app:
  * - Fixed header with logo and user profile
  * - Collapsible sidebar with company/client management
  * - Main content area with responsive container
  * - Hamburger menu for mobile navigation
  * - Overlay system for mobile interactions
  * - Print-optimized layouts
  */
 @import 'layout.css';
 
 /* === THEME SYSTEM === */
 /*
  * Floating theme switcher component with:
  * - Light/Dark/System theme options
  * - Smooth animations and transitions
  * - Touch-friendly mobile optimization
  * - Accessibility features (keyboard nav, focus)
  * - Visual feedback and state indicators
  * - Integration with CSS variables system
  */
 @import 'theme-switcher.css';
 
 /* === RESPONSIVE ADAPTATIONS === */
 /*
  * Media queries and device-specific optimizations:
  * - Comprehensive breakpoint system (320px → 1400px+)
  * - Mobile-first responsive design
  * - Touch device optimizations
  * - High DPI display support
  * - Landscape orientation handling
  * - Print stylesheet integration
  * - Accessibility preferences (reduced motion)
  * 
  * Note: This must be loaded last to ensure media queries
  * can override any previous styles as needed.
  */
 @import 'responsive.css';
 
 /* === PERFORMANCE OPTIMIZATIONS === */
 /*
  * Additional optimizations for better performance
  */
 
 /* Optimize font loading */
 @font-face {
     font-family: system-ui;
     font-display: swap;
 }
 
 /* Improve scroll performance */
 html {
     scroll-behavior: smooth;
 }
 
 @media (prefers-reduced-motion: reduce) {
     html {
         scroll-behavior: auto;
     }
 }
 
 /* GPU acceleration for common animated elements */
 .app-sidebar,
 .modal-overlay,
 .floating-theme-selector,
 .theme-btn,
 .btn,
 .card,
 .sidebar-item {
     will-change: transform;
 }
 
 /* Optimize backdrop filters for better performance */
 @supports (backdrop-filter: blur(1px)) {
     .app-header,
     .app-sidebar,
     .modal-overlay,
     .card,
     .theme-btn {
         backdrop-filter: blur(20px);
         -webkit-backdrop-filter: blur(20px);
     }
 }
 
 /* Fallback for browsers that don't support backdrop-filter */
 @supports not (backdrop-filter: blur(1px)) {
     .app-header {
         background: var(--bg-secondary);
     }
     
     .app-sidebar {
         background: var(--bg-secondary);
     }
     
     .modal-overlay {
         background: rgba(0, 0, 0, 0.8);
     }
     
     .card {
         background: var(--bg-secondary);
     }
     
     .theme-btn {
         background: var(--bg-secondary);
     }
 }
 
 /* === CRITICAL CSS INLINING HINT === */
 /*
  * For production optimization, consider inlining critical CSS
  * (variables.css and base.css) in the HTML head, then loading
  * the rest of the CSS asynchronously.
  * 
  * Example implementation:
  * <style></style>
  * <link rel="preload" href="/css/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
  */
 
 /* === BROWSER COMPATIBILITY === */
 /*
  * Tested and optimized for:
  * - Chrome 90+ ✓
  * - Firefox 88+ ✓  
  * - Safari 14+ ✓
  * - Edge 90+ ✓
  * - iOS Safari 14+ ✓
  * - Chrome Mobile 90+ ✓
  * 
  * Graceful degradation for older browsers:
  * - IE 11: Basic functionality with simplified styling
  * - Older mobile browsers: Touch-optimized with reduced animations
  */
 
 /* === DARK MODE PREFERENCE === */
 /*
  * Automatically respect system dark mode preference
  * when no explicit theme is set by the user
  */
 @media (prefers-color-scheme: dark) {
     :root:not([data-theme]) {
         color-scheme: dark;
     }
 }
 
 @media (prefers-color-scheme: light) {
     :root:not([data-theme]) {
         color-scheme: light;
     }
 }
 
 /* === CUSTOM SCROLLBARS === */
 /*
  * Consistent scrollbar styling across the application
  * that matches the theme system
  */
 * {
     scrollbar-width: thin;
     scrollbar-color: var(--text-muted) var(--bg-tertiary);
 }
 
 /* === HIGH CONTRAST MODE === */
 /*
  * Enhanced styling for users who prefer high contrast
  */
 @media (prefers-contrast: high) {
     :root {
         --border-primary: currentColor;
         --card-border: currentColor;
         --input-border: currentColor;
     }
     
     .btn {
         border-width: 2px;
     }
     
     .card {
         border-width: 2px;
     }
     
     .form-input,
     .form-textarea,
     .form-select {
         border-width: 2px;
     }
 }
 
 /* === REDUCED DATA MODE === */
 /*
  * Simplified experience for users on slow connections
  * or with data usage concerns
  */
 @media (prefers-reduced-data: reduce) {
     .bg-animation,
     .bg-animation::before {
         animation: none;
         background: var(--bg-secondary);
     }
     
     .theme-btn[data-tooltip]::after {
         display: none;
     }
     
     .card:hover,
     .btn:hover,
     .theme-btn:hover {
         transform: none;
     }
 }
 
 /* === DEBUGGING UTILITIES === */
 /*
  * Uncomment during development for visual debugging
  */
 /*
 .debug * {
     outline: 1px solid rgba(255, 0, 0, 0.3);
 }
 
 .debug .app-header {
     outline-color: rgba(255, 0, 0, 0.8);
 }
 
 .debug .app-sidebar {
     outline-color: rgba(0, 255, 0, 0.8);
 }
 
 .debug .main-content {
     outline-color: rgba(0, 0, 255, 0.8);
 }
 */
 
 /* === VERSION AND BUILD INFO === */
 /*
  * SlamPy Invoices CSS Architecture v1.0
  * Built for modern browsers with progressive enhancement
  * 
  * Total CSS size target: < 50KB gzipped
  * Performance target: < 16ms paint time
  * Accessibility: WCAG 2.1 AA compliant
  * 
  * Last updated: 2024
  * Compatible with: CSS3, CSS Grid, CSS Custom Properties, CSS Backdrop Filter
  */