/* Dashboard Bundle CSS - Optimized Component Order */
/* CRITICAL: @import statements must be at the very top, before any other CSS */

/* Core Foundation First - Variables, base styles, and utilities */
@import url('./components/base.css');
@import url('./components/utilities.css');

/* Layout & Structure - Page layout and navigation */
@import url('./components/layout.css');
@import url('./components/navigation.css');

/* UI Components - Reusable interface elements */
@import url('./components/cards.css');
@import url('./components/forms.css');
@import url('./components/buttons.css');
@import url('./components/tables.css');
@import url('./components/modals.css');
@import url('./components/notifications.css');

/* Page-Specific Styles - Individual page styling */
@import url('./components/dashboard.css');
@import url('./components/admin.css');
@import url('./components/vip.css');
@import url('./components/vip-panel.css');
@import url('./components/pages.css');

/* Effects & Animations - Visual enhancements */
@import url('./components/animations.css');
@import url('./components/glass.css');

/* Universal Styles - Cross-page components and overrides */
@import url('./components/universal.css');

/* 
 * CSS Architecture Notes:
 * 
 * IMPORT ORDER EXPLANATION:
 * 1. Foundation: base.css (CSS variables, resets) → utilities.css (helper classes)
 * 2. Structure: layout.css (page structure) → navigation.css (header/nav components)
 * 3. Components: cards, forms, buttons, tables, modals, notifications (reusable UI)
 * 4. Pages: dashboard, admin, vip (benefits page), vip-panel (panel page), pages (other pages)
 * 5. Effects: animations, glass (visual enhancements and effects)
 * 6. Universal: Cross-page overrides and final adjustments
 * 
 * CRITICAL RULES:
 * - All @import statements MUST be at the top for browser compatibility
 * - Foundation before structure before components before pages before effects
 * - VIP.css = VIP benefits page (vip.ejs) | VIP-PANEL.css = VIP panel page (vip-panel.ejs)
 * - Glass effects before universal to allow proper overlay layering
 * - Universal.css contains cross-page components used across multiple views
 */