/* ===================================
   RESPONSIVE STYLES
   Diseño Adaptativo - StudyQuality
   ================================== */

/* Mobile First Approach */

/* Extra Small devices (phones, 320px and up) */
@media (min-width: 320px) {
  .container {
    padding: var(--spacing-sm);
  }
  
  .header {
    padding: var(--spacing-md);
    text-align: center;
  }
  
  .header h1 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-xs);
  }
  
  .header p {
    font-size: var(--font-size-xs);
  }
  
  .version-info {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
  }
  
  .version-info span {
    font-size: var(--font-size-xs);
    padding: var(--spacing-xs);
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius-sm);
  }
}

/* Small devices (landscape phones, 480px and up) */
@media (min-width: 480px) {
  .container {
    padding: var(--spacing-md);
  }
  
  .header h1 {
    font-size: var(--font-size-xl);
  }
  
  .header p {
    font-size: var(--font-size-sm);
  }
  
  .auth-section {
    margin: var(--spacing-md) auto;
  }
  
  .form-row {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
  
  .modal {
    padding: var(--spacing-md);
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .container {
    padding: var(--spacing-lg);
  }
  
  .header {
    padding: var(--spacing-lg);
  }
  
  .header h1 {
    font-size: var(--font-size-2xl);
  }
  
  .header p {
    font-size: var(--font-size-base);
  }
  
  .auth-section {
    max-width: 450px;
  }
  
  .form-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
  }
  
  .dashboard-header {
    flex-direction: row;
    text-align: left;
  }
  
  .user-info {
    flex-direction: row;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
  }
  
  .module-nav {
    justify-content: flex-start;
  }
  
  .module-btn {
    min-width: 120px;
  }
  
  .module-header {
    flex-direction: row;
    align-items: center;
  }
  
  .reports-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .filter-row {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .modal {
    padding: var(--spacing-lg);
  }
  
  .modal-content {
    max-width: 600px;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .header h1 {
    font-size: var(--font-size-3xl);
  }
  
  .auth-section {
    max-width: 500px;
  }
  
  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .module-btn {
    min-width: 140px;
  }
  
  .reports-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .filter-row {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .metrics-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .table-container {
    overflow-x: visible;
  }
  
  .users-table {
    min-width: auto;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .container {
    max-width: 1200px;
  }
  
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .reports-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .filter-row {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .metrics-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .modal-content {
    max-width: 800px;
  }
}

/* Extra extra large devices (1400px and up) */
@media (min-width: 1400px) {
  .container {
    max-width: 1400px;
    padding: var(--spacing-xl);
  }
  
  .header {
    padding: var(--spacing-xl);
  }
  
  .dashboard-header {
    padding: var(--spacing-2xl);
  }
  
  .module-content {
    padding: var(--spacing-2xl);
  }
}

/* Landscape orientation adjustments */
@media (orientation: landscape) and (max-height: 600px) {
  .modal-content {
    max-height: 85vh;
  }
  
  .loading-screen .loading-content h2 {
    font-size: var(--font-size-xl);
    margin: var(--spacing-md) 0 var(--spacing-xs);
  }
  
  .loading-screen .loading-content p {
    font-size: var(--font-size-base);
  }
  
  .dashboard-header {
    padding: var(--spacing-lg);
  }
  
  .avatar {
    width: 50px;
    height: 50px;
    font-size: var(--font-size-lg);
  }
}

/* High-density displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .spinner {
    border-width: 2px;
  }
  
  .avatar {
    box-shadow: var(--shadow-md);
  }
  
  .btn {
    box-shadow: var(--shadow-sm);
  }
  
  .modal-content {
    box-shadow: var(--shadow-2xl);
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .btn {
    min-height: 48px;
    min-width: 48px;
    font-size: var(--font-size-base);
  }
  
  .tab-button {
    min-height: 48px;
    font-size: var(--font-size-base);
  }
  
  .module-btn {
    min-height: 60px;
    padding: var(--spacing-lg);
  }
  
  .action-btn {
    min-height: 40px;
    min-width: 40px;
  }
  
  .form-group input,
  .form-group select,
  .form-group textarea {
    min-height: 48px;
    font-size: 16px; /* Prevents zoom on iOS */
  }
  
  .search-btn,
  .password-toggle,
  .modal-close {
    min-width: 44px;
    min-height: 44px;
  }
  
  /* Remove hover effects for touch devices */
  .hover-lift:hover {
    transform: none;
    box-shadow: var(--shadow-md);
  }
  
  .stat-card:hover,
  .report-card:hover {
    transform: none;
  }
  
  .btn:hover,
  .tab-button:hover,
  .module-btn:hover {
    transform: none;
  }
}

/* Print styles */
@media print {
  * {
    -webkit-print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
  
  body {
    background: white !important;
    color: black !important;
    font-size: 12pt;
    line-height: 1.4;
  }
  
  .container {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .loading-screen,
  .loading-overlay,
  .modal,
  .notification-container,
  .header-actions,
  .module-nav,
  .no-print {
    display: none !important;
  }
  
  .dashboard {
    display: block !important;
    background: white !important;
    box-shadow: none !important;
    border: none !important;
  }
  
  .dashboard-header {
    background: white !important;
    color: black !important;
    border-bottom: 2px solid black !important;
    page-break-after: avoid;
  }
  
  .module-content {
    display: block !important;
    background: white !important;
    padding: 0 !important;
  }
  
  .stat-card {
    background: white !important;
    border: 1px solid black !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }
  
  .users-table {
    border-collapse: collapse !important;
  }
  
  .users-table th,
  .users-table td {
    border: 1px solid black !important;
    padding: 8pt !important;
  }
  
  .users-table thead {
    background: #f0f0f0 !important;
  }
  
  .btn {
    border: 1px solid black !important;
    background: white !important;
    color: black !important;
  }
  
  .page-break {
    page-break-before: always;
  }
  
  .avoid-break {
    page-break-inside: avoid;
  }
}

/* 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;
  }
  
  .spinner {
    animation: none;
    border: 4px solid var(--border-color);
    border-top: 4px solid var(--primary-color);
  }
  
  .loading-screen,
  .modal,
  .stat-card,
  .report-card,
  .btn,
  .tab-button,
  .module-btn {
    animation: none;
    transition: none;
  }
  
  .hover-lift:hover {
    transform: none;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  :root {
    --primary-color: #0000ff;
    --danger-color: #ff0000;
    --success-color: #008000;
    --warning-color: #ff8c00;
    --text-primary: #000000;
    --text-secondary: #333333;
    --border-color: #000000;
    --surface-color: #ffffff;
    --background-color: #f0f0f0;
  }
  
  .btn {
    border: 2px solid currentColor !important;
  }
  
  .form-group input,
  .form-group select,
  .form-group textarea {
    border: 2px solid #000000 !important;
  }
  
  .modal-content {
    border: 3px solid #000000 !important;
  }
  
  .users-table th,
  .users-table td {
    border: 1px solid #000000 !important;
  }
}

/* Container queries (future-proofing) */
@container (min-width: 400px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@container (min-width: 600px) {
  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@container (min-width: 800px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Fallbacks for older browsers */
@supports not (display: grid) {
  .stats-grid,
  .reports-grid,
  .metrics-grid {
    display: flex;
    flex-wrap: wrap;
  }
  
  .stat-card,
  .report-card,
  .metric-item {
    flex: 1 1 300px;
    margin: var(--spacing-sm);
  }
}

@supports not (backdrop-filter: blur(10px)) {
  .auth-section,
  .dashboard {
    background: rgba(255, 255, 255, 0.98);
  }
  
  .loading-overlay {
    background: rgba(0, 0, 0, 0.8);
  }
}

/* Browser-specific fixes */

/* Safari */
@supports (-webkit-appearance: none) {
  .form-group input,
  .form-group select {
    -webkit-appearance: none;
  }
  
  .btn {
    -webkit-appearance: none;
    border-radius: var(--border-radius-md);
  }
}

/* Firefox */
@-moz-document url-prefix() {
  .form-group select {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23666' d='m2 0l-2 2h4zm0 5l2-2h-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 40px;
  }
}

/* Edge specific fixes */
@supports (-ms-ime-align: auto) {
  .grid {
    display: -ms-grid;
  }
  
  .flex {
    display: -ms-flexbox;
  }
}

/* Dark mode responsive adjustments */
@media (prefers-color-scheme: dark) {
  @media (max-width: 768px) {
    body {
      background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    }
  }
  
  .auth-section {
    background: rgba(44, 62, 80, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .dashboard {
    background: rgba(44, 62, 80, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
}