@import url('https://fonts.googleapis.com/css2?family=Syne:wght@500&display=swap');

/* ==========================================================================
   MAIN CSS ENTRY POINT - Wage Magic Application
   Contains organized imports in logical cascade order for maintainable styling
   ========================================================================== */

/* =========================
     BASE LAYER
     Foundation styles that set up the design system
=========================== */

/* CSS Variables and Design Tokens */
@import url('./base/variables.css');


/* Typography System */
@import url('./base/typography.css');

/* Layout Utilities and Grid System */
@import url('./base/layout.css');

/* Professional Grid System */
@import url('./base/grid.css');

/* Global Element Styling */
@import url('./base/global.css');

/* Professional spacing utilities are now included in grid.css */
/* Typography and layout improvements are now included in global.css */

/* =========================
     GLOBAL COMPONENTS
     Components that can appear on any page
=========================== */

/* Navigation (appears on every page) */
@import url('./components/nav.css');

/* Tour/Onboarding Modal (appears globally) */
@import url('./components/tour.css');

/* Modal Components (appears globally) */
@import url('./components/modals.css');

/* =========================
     COMPONENT LAYER
     Other components are now imported per-page in individual templates
     for better performance and dependency management
=========================== */

/* 
NOTE: Component CSS files are imported directly in individual templates
based on what each page actually needs. This provides:
- Better performance (only load what's needed)
- Clearer component dependencies per page
- Smaller CSS bundles per page
- Better caching and maintainability

Each page template should include only the components it uses:
<link rel="stylesheet" href="{% static 'assets/css/components/[component-name].css' %}">
*/

/* =========================
     PAGE LAYER
     Page-specific styles should be imported directly in templates
     This section intentionally left empty to prevent global conflicts
=========================== */

/* 
NOTE: Page-specific CSS files are now imported directly in individual templates
to prevent styling conflicts and redundancies. Each page template should include:
<link rel="stylesheet" href="{% static 'assets/css/pages/[page-name].css' %}">
*/

/* =========================
     PRINT STYLES
     Optimized styles for printing
=========================== */
@media print {
    /* Hide interactive elements when printing */
    .no-print,
    .tour-controls,
    .sidebar-actions,
    .glass-btn,
    .pushable {
        display: none !important;
    }
    
    /* Optimize typography for print */
    body {
        font-size: 12pt;
        line-height: 1.4;
        color: #000;
        background: #fff;
    }
    
    /* Ensure charts and tables print properly */
    .chart-container,
    .data-table {
        page-break-inside: avoid;
        border: 1px solid #000;
    }
    
    /* Remove shadows and effects for print */
    * {
        box-shadow: none !important;
        text-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* =========================
     UTILITY OVERRIDES
     Last-resort utilities and important overrides
=========================== */

/* High specificity utilities */
.hidden {
    display: none !important;
}

.visible {
    display: block !important;
}

.text-center {
    text-align: center !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mt-0 {
    margin-top: 0 !important;
}

/* Development helpers (remove in production) */
.debug-border {
    border: 2px solid red !important;
}

.debug-bg {
    background: rgba(255, 0, 0, 0.1) !important;
}

/* =========================
     TOAST NOTIFICATIONS
========================= */
.toast-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--primary_2);
    color: var(--text_primary);
    padding: 16px 24px;
    border-radius: var(--border_radius_card);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    opacity: 0;
    transform: translateX(400px);
    transition: all 0.3s ease;
    max-width: 400px;
    border-left: 4px solid var(--green_1);
}

.toast-notification.show {
    opacity: 1;
    transform: translateX(0);
}

.toast-notification.toast-success {
    border-left-color: var(--green_1);
}

.toast-notification.toast-error {
    border-left-color: var(--red_1);
}

.toast-notification.toast-info {
    border-left-color: var(--blue_1);
}

.toast-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.toast-content i {
    font-size: 1.2rem;
}

.toast-notification.toast-success .toast-content i {
    color: var(--green_1);
}

.toast-notification.toast-error .toast-content i {
    color: var(--red_1);
}

.toast-notification.toast-info .toast-content i {
    color: var(--blue_1);
}

/* =========================
     PERFORMANCE NOTES
     
     This CSS architecture follows these principles:
     
     1. ITCSS (Inverted Triangle CSS) methodology
     2. Specificity increases down the cascade
     3. Variables first, then reset, then utilities
     4. Components before pages
     5. Utilities and overrides last
     
     Benefits:
     - Maintainable and scalable
     - Clear separation of concerns
     - Prevents specificity wars
     - Easy to debug and modify
     - Follows modern CSS best practices
=========================== */