/* responsive.css - Enhanced responsive design for dark theme */

/* Mobile First Approach */
@media (max-width: 479px) {
  .container {
    padding: var(--spacing-sm);
  }
  
  .header {
    padding: var(--spacing-sm);
    height: 56px;
  }
  
  .header-logo {
    height: 28px;
  }
  
  .header-actions .btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.875rem;
    background: transparent !important;
    border: none !important;
    color: var(--text-secondary) !important;
    transition: all 0.3s ease !important;
  }

  .header-actions .btn:hover {
    background: var(--accent-color) !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
    transform: translateY(-1px) !important;
  }

  .header-actions .btn:active,
  .header-actions .btn:focus {
    background: var(--accent-color) !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
    transform: translateY(0) !important;
  }
  
  .header-actions .btn span {
    display: none;
  }
  
  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
  
  .summary-grid {
    grid-template-columns: 1fr;
  }
  
  .chart-row {
    grid-template-columns: 1fr;
  }
  
  .sidebar {
    width: 100%;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  
  .sidebar.open {
    transform: translateX(0);
  }
  
  .main-content {
    margin-left: 0;
    padding: var(--spacing-md);
  }
  
  .modal-content {
    margin: var(--spacing-sm);
    width: calc(100% - 2 * var(--spacing-sm));
    max-height: calc(100vh - 2 * var(--spacing-sm));
  }
  
  .report-filters {
    flex-direction: column;
    gap: var(--spacing-sm);
  }
  
  .table-container {
    margin: 0 calc(-1 * var(--spacing-md));
    padding: 0 var(--spacing-md);
  }
}

/* Enhanced mobile optimization */

/* Touch-friendly interactions */
@media (max-width: 768px) {
    .btn {
        min-height: 44px; /* iOS/Android touch target minimum */
        padding: var(--spacing-md) var(--spacing-lg);
    }
    
    .form-input, .form-select {
        min-height: 44px;
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    /* Better spacing for mobile */
    .dashboard-stats {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }
    
    .dashboard-content {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: var(--spacing-lg);
    }
    
    .chart-section,
    .history-section {
        width: 100%;
    }
    
    /* Mobile modal improvements */
    .modal-content {
        margin: var(--spacing-md);
        max-width: calc(100vw - 2rem);
        max-height: calc(100vh - 2rem);
    }
    
    .modal-header {
        padding: var(--spacing-md);
    }
    
    .modal-body {
        padding: var(--spacing-md);
    }
    
    .modal-footer {
        padding: var(--spacing-md);
        flex-direction: column-reverse;
    }
    
    .modal-footer .btn {
        width: 100%;
        margin-bottom: var(--spacing-sm);
    }
    
    /* Improved table responsiveness */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .table-mobile {
        min-width: 600px;
    }
    
    /* Mobile navigation improvements */
    .header-actions {
        gap: var(--spacing-xs);
    }
    
    .header-actions .btn {
        padding: var(--spacing-xs) var(--spacing-sm);
        background: transparent !important;
        border: none !important;
        color: var(--text-secondary) !important;
        transition: all 0.3s ease !important;
    }

    .header-actions .btn:hover {
        background: var(--accent-color) !important;
        color: var(--text-primary) !important;
        box-shadow: none !important;
        transform: translateY(-1px) !important;
    }

    .header-actions .btn:active,
    .header-actions .btn:focus {
        background: var(--accent-color) !important;
        color: var(--text-primary) !important;
        box-shadow: none !important;
        transform: translateY(0) !important;
    }
    
    .header-actions .btn i {
        margin-right: 0;
    }
    
    .header-actions .btn span {
        display: none;
    }
}

/* Tablet Portrait */
@media (min-width: 480px) and (max-width: 767px) {
  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .header-actions .btn span {
    display: inline;
  }
}

/* Tablet Landscape and Small Desktop */
@media (min-width: 768px) {
  .container {
    max-width: 800px;
    padding: var(--spacing-md);
  }
  
  .btn {
    width: auto;
  }
  
  .dashboard-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .summary-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .chart-row {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .sidebar {
    transform: translateX(0);
  }
  
  .main-content {
    margin-left: 250px;
    padding: var(--spacing-xl);
  }
  
  .sidebar.collapsed + .main-content {
    margin-left: 64px;
  }
}

/* Large Desktop */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
  }
  
  .dashboard-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .summary-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .chart-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Extra Large Desktop */
@media (min-width: 1440px) {
  .container {
    max-width: 1400px;
  }
  
  .dashboard-grid {
    grid-template-columns: repeat(5, 1fr);
  }
  
  .summary-grid {
    grid-template-columns: repeat(5, 1fr);
  }
  
  .chart-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* High DPI screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .header-logo {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

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

/* Dark mode preference (fallback) */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
}

/* Print styles override */
@media print {
  .sidebar,
  .header-actions,
  .menu-toggle,
  .sidebar-toggle {
    display: none !important;
  }
  
  .main-content {
    margin-left: 0 !important;
    padding: 0 !important;
  }
  
  .card,
  .stat-card,
  .summary-card {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  
  .chart-row {
    grid-template-columns: 1fr !important;
  }
}

/* Landscape orientation on mobile */
@media (max-height: 600px) and (orientation: landscape) {
  .sidebar {
    padding: var(--spacing-sm);
  }
  
  .nav-item {
    padding: var(--spacing-sm);
  }
  
  .main-content {
    padding: var(--spacing-md);
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --border: #ffffff;
        --text-secondary: #ffffff;
        --shadow-md: 0 4px 6px -1px rgba(255, 255, 255, 0.1);
    }
}