/* responsive.css - Media Queries for Mobile and Tablet Devices */

@media (max-width: 1024px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .app-container {
        grid-template-columns: 1fr;
    }

    /* Hide Sidebar by default on mobile */
    .app-sidebar {
        position: fixed;
        left: -260px;
        top: 0;
        bottom: 0;
        width: 260px;
        transition: left var(--transition-normal);
        z-index: 1000;
        box-shadow: var(--shadow-lg);
    }

    .app-sidebar.show {
        left: 0;
    }

    #sidebar-toggle {
        display: inline-block;
    }

    /* Show a dark overlay when sidebar is open */
    .app-container::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.6);
        z-index: 999;
        display: none;
        animation: fadeIn var(--transition-fast) forwards;
    }

    .app-container.sidebar-open::before {
        display: block;
    }

    /* Action bar stack on mobile */
    .action-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .search-form {
        max-width: 100%;
        flex-direction: column;
    }

    .filter-form select {
        width: 100%;
    }

    /* Form columns stack */
    .grid-2-columns {
        grid-template-columns: 1fr;
    }
    
    .border-right-sutil {
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        padding-right: 0;
        padding-bottom: var(--space-md);
    }

    .col-span-2 {
        grid-column: span 1 / span 1;
    }

    .service-details-fields {
        grid-template-columns: 1fr;
    }
}