/* ============================================
   STYLES.CSS - GStock Application
   ============================================
   Auteur: Claude Code
   Date: 2025-11-09
   Version: 2.0
   Description: Système CSS modulaire mobile-first responsive
   ============================================ */

/* ===== CORE (Fondations) ===== */
@import url(core/variables.css);
@import url(core/reset.css);
@import url(core/base.css);

/* ===== LAYOUT (Structure) ===== */
@import url(layout/navigation.css);
@import url(layout/header.css);
@import url(layout/main.css);
@import url(layout/footer.css);

/* ===== COMPONENTS (Composants réutilisables) ===== */
@import url(components/buttons.css);
@import url(components/forms.css);
@import url(components/tables.css);
@import url(components/cards.css);
@import url(components/badges.css);
@import url(components/modals.css);
@import url(components/flash-messages.css);

/* ===== PAGES (Pages spécifiques) ===== */
@import url(pages/dashboard.css);
@import url(pages/inventory.css);
@import url(pages/auth.css);
@import url(pages/organizations.css);
@import url(pages/references.css);
@import url(pages/404.css);

/* ===== UTILITIES (Classes utilitaires) ===== */
@import url(utilities/helpers.css);

/* ===== RESPONSIVE (Media queries globales) ===== */
@import url(responsive.css);

/* ============================================
   NOTES DE DÉVELOPPEMENT
   ============================================

   Architecture CSS:
   - Mobile-First: Les styles de base sont pour mobile, puis tablette, puis desktop
   - Variables CSS: Toutes les valeurs sont centralisées dans core/variables.css
   - BEM-like: Nommage cohérent et prévisible des classes
   - Modulaire: Chaque fichier est autonome et peut être modifié indépendamment

   Breakpoints:
   - Mobile: < 768px (par défaut)
   - Tablette: 768px - 1366px
   - Desktop: > 1366px
   - Note: 1366px couvre iPad Pro en paysage

   Structure des fichiers:
   ├── core/           → Variables, reset, base
   ├── layout/         → Navigation, header, main, footer
   ├── components/     → Boutons, forms, tables, cards, badges, modals, flash-messages
   ├── pages/          → Dashboard, inventory, auth, organizations, references
   ├── utilities/      → Classes helpers et utilitaires
   └── responsive.css  → Media queries responsive globales

   Performance:
   - @import est utilisé pour faciliter le développement
   - En production, envisager de concaténer tous les fichiers en un seul
   - Minifier le CSS en production

   Maintenance:
   - Chaque fichier est documenté
   - Les variables facilitent les changements globaux
   - L'architecture modulaire permet des modifications ciblées

   ============================================ */