/* 
 * Main CSS Entry Point
 * Imports all modularized CSS files in the correct order
 */

/* 1. VARIABLES & BASE STYLES */
@import url('./variables.css');
@import url('./typography.css');

/* 2. COMPONENTS */
@import url('./buttons.css');
@import url('./forms.css');
@import url('./cards.css');
@import url('./modals.css');

/* 3. LAYOUT */
@import url('./sidebar.css');
@import url('./header.css');
@import url('./main.css');

/* 4. PAGES */
@import url('./login.css');
@import url('./roles.css');

/* 5. UTILITIES */
@import url('./utilities.css');

/* 
 * RESPONSIVE BREAKPOINTS
 * Customize as needed for your design
 */

@media (max-width: 1200px) {
    :root {
        --sidebar-width: 220px;
    }
}

@media (max-width: 768px) {
    :root {
        --sidebar-width: 200px;
        --space-lg: 14px;
        --space-xl: 16px;
    }

    body {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    :root {
        --space-md: 10px;
        --space-lg: 12px;
    }

    .modal {
        max-width: 90vw;
    }
}

/* PRINT STYLES */
@media print {
    .sidebar,
    .nav-menu,
    .header,
    .btn,
    button,
    input[type="submit"],
    input[type="button"] {
        display: none;
    }

    body {
        background: white;
        color: black;
    }

    .container {
        height: auto;
        display: block;
    }

    .content {
        padding: 0;
    }
}