/* ============================================================================
   MAIN CSS - ITCSS Architecture
   
   This is the main entry point for all CSS. Imports are organized following
   the ITCSS (Inverted Triangle CSS) methodology for optimal specificity
   and maintainability.
   
   BUILD-TIME CONCATENATION:
   All @import statements are processed by postcss-import at build time,
   producing a single bundled CSS file. This eliminates runtime HTTP requests.
   
   Development: main.css loads with @imports (browser resolves individually)
   Production:  bundle.css is a single concatenated, minified file
   
   Import Order (from generic to specific, low to high specificity):
   1. Settings  - Variables, tokens, themes (no output)
   2. Generic   - Resets, normalize (low specificity)
   3. Base      - Element defaults (low specificity)
   4. Layout    - Page structure (medium specificity)
   5. Components- Reusable UI components (medium-high specificity)
   6. Utilities - Helper classes (high specificity)
   7. Vendor    - Third-party overrides (highest specificity)
   ============================================================================ */

/* ============================================================================
   LAYER 1: SETTINGS
   Variables, design tokens, and theme configuration
   ============================================================================ */
@import './1-settings/tokens.css';
@import './1-settings/theme.css';
@import './1-settings/vendor-vars.css';

/* ============================================================================
   LAYER 2: GENERIC / RESET
   CSS resets and normalizations
   ============================================================================ */
@import './2-generic/normalize.css';

/* ============================================================================
   LAYER 3: BASE
   Unclassed HTML element styles
   ============================================================================ */
@import './3-base/typography.css';
@import './3-base/elements.css';
@import './3-base/scrollbars.css';

/* ============================================================================
   LAYER 4: LAYOUT
   Page structure and containers
   ============================================================================ */
@import './4-layout/containers.css';
@import './4-layout/sidePanel.css';
@import './4-layout/infoPane.css';

/* ============================================================================
   LAYER 5: COMPONENTS
   Reusable UI components and widgets
   ============================================================================ */

/* Route Box & Related Components */
@import './5-components/route-box/routeBox.css';
@import './5-components/route-box/routeRemovalModal.css';

/* Route Display Components */
@import './5-components/route-display/selectedRoute.css';
@import './5-components/route-display/routeDeck.css';
@import './5-components/route-display/routeInfoCard.css';
@import './5-components/route-display/tripOverview.css';

/* Visualizations */
@import './5-components/visualizations/priceChart.css';
@import './5-components/visualizations/sineWaveTimeline.css';

/* Map Components */
@import './5-components/map/map.css';
@import './5-components/map/lines.css';
@import './5-components/map/linePopups.css';
@import './5-components/map/markerPopups.css';

/* Navigation & UI */
@import './5-components/navigation/language-selector.css';
@import './5-components/navigation/currency-selector.css';

/* Modals - Base modal must be imported first */
@import './5-components/modals/baseModal.css';
@import './5-components/modals/helpModal.css';
@import './5-components/modals/airline-search-modal.css';
@import './5-components/modals/about-modal.css';
@import './5-components/modals/legal-modal.css';
@import './5-components/modals/contact-modal.css';
@import './5-components/modals/report-modal.css';

/* Feedback & Misc */
@import './5-components/misc/feedbackManager.css';
@import './5-components/booking/booking-options.css';
@import './5-components/misc/ui-elements.css';

/* ============================================================================
   LAYER 6: UTILITIES
   Helper classes and overrides
   ============================================================================ */
@import './6-utilities/spacing.css';
@import './6-utilities/helpers.css';

/* ============================================================================
   LAYER 7: VENDOR
   Third-party library base styles (structural only, loaded early)
   ============================================================================ */
@import './7-vendor/flatpickr_structural.css';
@import '../vendor/leaflet/leaflet.css';

/* ============================================================================
   LAYER 8: VENDOR OVERRIDES
   Custom theme overrides for third-party libraries
   ============================================================================ */

/* Date Picker Components - Loaded after vendor base for proper cascade */
@import './5-components/misc/datePicker.css';