/* ============================================================================
   MAIN STYLESHEET - HTS PRODUCTION SYSTEMS
   ============================================================================
   
   This is the main entry point for the CSS architecture.
   Import this single file to get access to all styles.
   
   Usage in HTML:
   <link rel="stylesheet" href="/css/main.css">
   
   Created: October 14, 2025
   Version: 2.0.2
   Last Updated: October 23, 2025 - Added Scanner Page Styles
   
   Architecture:
   - Core: Foundation styles (variables, reset, typography)
   - Components: Reusable UI components
   - Utilities: Helper classes for layout, spacing, animations
   - Pages: Page-specific styles
   
   Total Modules: 31 (3 core + 19 components + 3 utilities + 6 pages)
   
   DEPLOYMENT NOTE:
   All CSS modules are deployed to S3 with this main.css file. The @import
   statements work perfectly with S3 static hosting and modern browsers.
   The modular structure is preserved in production for easier debugging.
   ============================================================================ */


/* ============================================================================
   CORE FOUNDATION (Load First)
   ============================================================================ */

/* Design System Variables - Colors, spacing, typography, etc. */
@import 'core/variables.css';

/* Browser Reset & Normalize */
@import 'core/reset.css';

/* Typography Styles & Utilities */
@import 'core/typography.css';


/* ============================================================================
   COMPONENTS (UI Building Blocks)
   ============================================================================ */

/* Button Styles - All button variants and states */
@import 'components/buttons.css';

/* Form Inputs - Text inputs, selects, checkboxes, etc. */
@import 'components/forms.css';

/* Card Components - Content containers and module cards */
@import 'components/cards.css';

/* ===== BATCH 1: HIGH PRIORITY COMPONENTS (Added Oct 14, 2025) ===== */

/* Data Tables - Sortable tables with brand styling */
@import 'components/tables.css';

/* Status Badges - Type indicators and status pills */
@import 'components/badges.css';

/* Filter Controls - Search bars, filter panels, mobile toggles */
@import 'components/filters.css';

/* Modal Dialogs - Pop-up windows and overlays */
@import 'components/modals.css';

/* Alert Messages - Alerts, insights, recommendations, toasts */
@import 'components/alerts.css';

/* ===== BATCH 2: DASHBOARD COMPONENTS (Added Oct 14, 2025) ===== */

/* Metric Cards - Large number displays and stat boxes */
@import 'components/metrics.css';

/* Pagination Controls - Page navigation */
@import 'components/pagination.css';

/* Progress Bars - Visual progress indicators */
@import 'components/progress.css';

/* Detail Items - Key-value pair displays */
@import 'components/detail-items.css';

/* Empty States - No data and loading messages */
@import 'components/empty-states.css';

/* ===== BATCH 3: PRODUCTION FORMS (Added Oct 14, 2025) ===== */

/* Scanner Component - Barcode/QR code scanner interface */
@import 'components/scanner.css';

/* Quantity Controls - Increment/decrement inputs with validation */
@import 'components/quantity-controls.css';

/* Color Picker - Color swatches for E-coat and powder coat */
@import 'components/color-picker.css';

/* ===== BATCH 4: FINAL COMPONENTS (Added Oct 14, 2025) ===== */

/* Notifications - Toast notifications and notification center */
@import 'components/notifications.css';

/* Charts - Chart.js containers and responsive wrappers */
@import 'components/charts.css';

/* Recommendations - Actionable insights and suggestion cards */
@import 'components/recommendations.css';


/* ============================================================================
   UTILITIES (Helper Classes)
   ============================================================================ */

/* Layout Utilities - Flexbox, grid, containers, positioning */
@import 'utilities/layouts.css';

/* Spacing Utilities - Margin and padding helpers */
@import 'utilities/spacing.css';

/* Animation Utilities - Keyframes, transitions, loading spinners */
@import 'utilities/animations.css';

/* Auth Gate - Hides page content until authentication is confirmed */
@import 'utilities/auth-gate.css';


/* ============================================================================
   PAGE LAYOUTS (Page-Type Templates)
   ============================================================================ */

/* Landing Page Layout - System selection pages (index.html, select-system.html) */
@import 'layouts/landing-page.css';

/* System Landing Page Layout - System home pages (coatings/index.html, chassis/index.html) */
@import 'layouts/system-landing-page.css';


/* ============================================================================
   PAGE-SPECIFIC STYLES
   ============================================================================ */

/* Capacity Page - Capacity analysis and charts */
@import 'pages/capacity.css';

/* Production Forms - E-coat and powder coat form pages */
@import 'pages/production-forms.css';

/* Scanner Page - Barcode scanner interface with camera controls */
@import 'pages/scanner.css';

/* Active Dashboard - Active forms view and management */
@import 'pages/active-dashboard.css';

/* Admin Dashboard - System administration and management */
@import 'pages/admin-dashboard.css';

/* History Dashboard - All forms history with search and filters */
@import 'pages/history-dashboard.css';


/* ============================================================================
   SYSTEM INFORMATION
   ============================================================================
   
   CSS Custom Properties (Variables): 90+
   
   Breakpoints:
   - xs: 360px  (Extra small phones)
   - sm: 480px  (Small phones)
   - md: 768px  (Tablets)
   - lg: 1024px (Small laptops)
   - xl: 1280px (Laptops)
   - 2xl: 1536px (Desktops)
   
   Spacing Scale: xs, sm, md, lg, xl, 2xl, 3xl (4px - 64px)
   
   Color System:
   - Brand: --brand-top, --brand-bottom, --brand-accent
   - Backgrounds: --bg-dark, --bg-medium, --bg-light
   - Text: --text-primary, --text-secondary, --text-tertiary, --text-muted
   - States: --success-color, --error-color, --warning-color, --info-color
   
   Components: 31 modules
   - Core: 3 (variables, reset, typography)
   - Components: 19 (buttons, forms, cards, tables, badges, filters, modals,
     alerts, metrics, pagination, progress, detail-items, empty-states,
     scanner, quantity-controls, color-picker, notifications, charts,
     recommendations)
   - Utilities: 3 (layouts, spacing, animations)
   - Pages: 6 (capacity, production-forms, scanner, active-dashboard, 
     admin-dashboard, history-dashboard)
   
   Progress: 100% complete! 🎉
   
   ============================================================================ */