/* Import all CSS files */
@import url('base/reset.css');
@import url('base/variables.css');
@import url('components/material.css');
@import url('components/buttons.css');
@import url('components/cards.css');
@import url('components/modals.css');
@import url('components/notifications.css');
@import url('components/forms.css');
@import url('components/tables.css');
@import url('components/tabs.css');
@import url('components/map.css');
@import url('components/ratings.css');
@import url('components/dashboard.css');
@import url('components/utilities.css');
@import url('components/contractor-details.css');
@import url('components/stats-cards.css');
@import url('components/auth.css');
@import url('components/bottom-nav.css');
@import url('./components/bottom-sheet.css');
@import url('components/feedback.css');
@import url('components/confirmation-modal.css');
@import url('components/categories.css');
@import url('components/search.css');
@import url('components/profile.css');
@import url('layout.css');

/* ===== GLOBAL BASE STYLES ===== */
* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    color: var(--text-primary);
    background-color: var(--background);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

/* ===== LAYOUT CONTAINERS ===== */
.app-container {
    position: relative;
    background-color: var(--background);
    min-height: 100vh;
}

.main-content {
    background-color: var(--background);
    min-height: calc(100vh - var(--app-bar-height, 64px));
    position: relative;
}

.container {
    background-color: var(--background);
    position: relative;
    max-width: var(--container-max-width);
    margin: 0 auto;
}

/* ===== UTILITY CLASSES ===== */
.hidden {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===== MOBILE LIST VIEW FIXES - OVERRIDE ALL CONTAINER PADDING ===== */
@media (max-width: 599px) {
    /* Remove padding from ALL layout containers for full-width list view */
    .app-container,
    .main-content,
    .container {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Remove padding from all utility panels when containing contractors */
    .section-panel,
    .content-panel,
    .main-panel,
    .filter-section,
    .search-section,
    .controls-section {
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    
    /* Ensure any dashboard containers also get overridden */
    .dashboard-container,
    .content-container,
    .list-container,
    [class*="container"] {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Target specific containers that might wrap contractor lists */
    .contractors-container,
    .cards-wrapper,
    .list-wrapper,
    .grid-wrapper {
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        background: transparent !important;
    }
}

/* ===== THEME SUPPORT ===== */
@media (prefers-color-scheme: dark) {
    body {
        background-color: var(--background);
    }
    
    .main-content,
    .container {
        background-color: var(--background);
    }
}

@media (prefers-contrast: high) {
    /* High contrast overrides can be added here if needed */
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media print {
    body {
        background-color: var(--bg-white) !important;
        color: var(--text-primary) !important;
    }
    
    .main-content,
    .container {
        background-color: var(--bg-white) !important;
    }
    
    .no-print {
        display: none !important;
    }
}