/* Dashboard Responsive Styles */
/* Mobile and tablet breakpoint adjustments */

/* ===================================
   LARGE SCREENS (max-width: 1200px)
   =================================== */

@media (max-width: 1200px) {
    /* Timekeeping Tab */
    .employee-table-header,
    .employee-row {
        grid-template-columns: 1.5fr 1fr 1.2fr 1fr 0.8fr 1fr 0.6fr;
        gap: var(--space-sm);
    }
    
    .timeline-stats {
        flex-wrap: wrap;
        gap: var(--space-md);
    }
    
    /* Three-panel layout */
    .three-panel-layout {
        grid-template-columns: var(--left-panel-width) var(--right-panel-width);
    }
    
    .panel-resize-handle,
    .resizable-handle {
        display: none;
    }
    
    /* Timeline responsive adjustments now in timeline.css */
}

/* ===================================
   TABLETS (max-width: 1024px)
   =================================== */

@media (max-width: 1024px) {
    /* Timeline responsive adjustments now in timeline.css */
}

/* ===================================
   MOBILE (max-width: 768px)
   =================================== */

@media (max-width: 768px) {
    /* Core Dashboard */
    .dashboard-content {
        padding: var(--space-lg);
    }
    
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }
    
    .metric-grid,
    .card-grid {
        grid-template-columns: 1fr;
    }
    
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }
    
    .data-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }
    
    .table-4-col,
    .table-5-col {
        grid-template-columns: 1fr;
        gap: var(--space-xs);
    }
    
    .action-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    /* Property Matrix */
    .matrix-container {
        margin: 0 calc(-1 * var(--space-md));
        padding: 0 var(--space-md);
    }
    
    .matrix-header-cell,
    .matrix-cell {
        padding: 2px var(--space-xs);
        font-size: 10px;
        min-width: 60px;
        max-width: 70px;
    }
    
    .matrix-header-cell:first-child,
    .matrix-cell:first-child {
        min-width: 70px;
        max-width: 80px;
        font-size: 11px;
    }
    
    /* Tab Navigation */
    .tab-navigation {
        flex-wrap: wrap;
        gap: var(--space-xs);
    }
    
    .tab-button {
        min-width: 0;
        padding: var(--space-sm);
    }
    
    .tab-label {
        display: none;
    }
    
    .tab-icon {
        font-size: var(--text-lg);
    }
    
    /* Timeline responsive adjustments now in timeline.css */
    
    .rooms-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
    
    .cleaning-type-legend {
        display: none;
    }
    
    /* Three-panel layout - stack vertically */
    .three-panel-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas: 
            "requests"
            "tasks"  
            "allocation";
        max-height: none;
        --left-panel-width: 100%;
        --right-panel-width: 100%;
    }
    
    .three-panel-layout .dashboard-section {
        height: auto;
        min-height: 300px;
    }
    
    /* Filter bar */
    .filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-group {
        width: 100%;
    }
    
    /* Timekeeping - Employee table */
    .employee-table-header {
        display: none;
    }
    
    .employee-row {
        grid-template-columns: 1fr;
        gap: var(--space-xs);
        padding: var(--space-md);
    }
    
    .employee-row .col-actions {
        justify-content: flex-start;
        margin-top: var(--space-sm);
    }
    
    .timeline-track {
        height: 60px;
        min-width: 600px;
    }
    
    .timeline-labels {
        min-width: 600px;
    }
    
    /* Employees Tab */
    .add-employee-layout {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    
    .employee-details-grid {
        grid-template-columns: 1fr;
    }
    
    /* Forms */
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .form-actions {
        flex-direction: column-reverse;
    }
}