/* ========================================
   Desktop to Tablet (992px and below)
   ======================================== */
@media (max-width: 992px) {
  nav .nav-items {
    width: 100%;
    flex-direction: column !important;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg) !important;
  }

  .navbar-collapse {
    background: var(--color-bg-primary);
    z-index: var(--z-dropdown);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    margin-top: -10px;
  }

  .navbar-collapse .inner {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    padding: var(--spacing-lg);
  }

  nav .theme-btn-container {
    justify-content: space-between;
    width: 100%;
  }

  body.dark-theme .navbar-collapse {
    background-color: var(--color-bg-primary);
    border-color: var(--color-border);
  }

  .main-content .right {
    margin-top: var(--spacing-xl);
    width: 100%;
  }

  /* Upload container mobile optimizations */
  .upload-container {
    min-height: 350px;
    padding: var(--spacing-md);
  }

  .upload-area {
    min-height: 240px;
  }

  .upload-content {
    padding: var(--spacing-2xl) var(--spacing-md);
  }

  .upload-icon {
    width: 80px;
    height: 80px;
    margin-bottom: var(--spacing-lg);
  }

  .upload-main-text {
    font-size: var(--font-size-base);
  }

  .upload-description {
    font-size: var(--font-size-sm);
  }

  .format-tag {
    font-size: 10px;
    padding: 2px 6px;
  }

  .btn-browse {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
  }

  .main-content .left {
    display: flex;
    flex-direction: column-reverse;
    padding-right: calc(var(--spacing-lg) * 0.5);
    width: 100%;
  }

  .main-content .text-content h1 {
    font-size: var(--font-size-3xl);
    line-height: 1.2;
  }

  .lead {
    font-size: var(--font-size-base);
    line-height: 1.5;
  }

  .table tbody td {
    padding: var(--spacing-lg) var(--spacing-md);
    font-size: var(--font-size-xs);
  }

  .table tbody td i {
    font-size: var(--font-size-sm);
    margin-right: var(--spacing-sm);
  }

  .view-container {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }

  /* JPEG Compression Option Responsive */
  .compression-option {
    padding: var(--spacing-sm) var(--spacing-md) !important;
  }

  .compression-option .checkbox-label {
    font-size: var(--font-size-xs);
  }
}

/* ========================================
   Small Mobile Devices (460px and below)
   ======================================== */
@media (max-width: 460px) {
  .carousel {
    width: 100%;
  }

  .main-content .demo-images {
    padding: 0 var(--spacing-lg);
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .demo-image-container.after {
    margin-left: 0;
    margin-top: var(--spacing-lg);
  }

  .main-content .text-content h1 {
    font-size: var(--font-size-2xl);
    margin-top: 0;
    line-height: 1.2;
  }

  .lead {
    font-size: var(--font-size-sm);
    line-height: 1.4;
  }

  /* Hide text labels */
  .view-toggle-container .view-btn span {
    display: none;
  }

  .compression-option {
    padding: var(--spacing-sm) !important;
    min-width: 40px;
    justify-content: center;
  }
}
/* ========================================
   Mobile Devices (768px and below)
   ======================================== */
@media (max-width: 768px) {
  /* Footer */
  .footer .copyright {
    flex-direction: column;
    align-items: baseline;
  }

  /* Upload Container Responsive */
  .upload-container {
    padding: var(--spacing-lg);
    min-height: 320px;
  }

  .upload-area {
    min-height: 180px;
    margin-bottom: var(--spacing-md);
  }

  .upload-content {
    padding: var(--spacing-2xl) var(--spacing-md);
  }

  .upload-icon {
    width: 70px;
    height: 70px;
    margin-bottom: var(--spacing-lg);
  }

  .upload-main-text {
    font-size: var(--font-size-sm);
    line-height: 1.4;
  }

  .upload-description {
    font-size: var(--font-size-xs);
    margin-bottom: var(--spacing-md);
    line-height: 1.3;
  }

  .btn-browse {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-sm);
  }

  .upload-formats {
    gap: 6px;
  }

  .format-tag {
    padding: 4px 10px;
    font-size: 11px;
  }

  .upload-tip {
    padding: var(--spacing-sm) var(--spacing-sm);
    font-size: var(--font-size-xs);
  }

  .view-container {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  /* Results and Processing Screens Responsive */
  .comparison-label {
    font-size: var(--font-size-xs);
    padding: 6px 12px;
  }

  .slider-handle {
    width: 32px;
    height: 32px;
  }

  .slider-button {
    font-size: 12px;
  }

  .detail-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .detail-value {
    max-width: 100%;
    text-align: left;
  }

  #resultsThumbnailsGrid {
    grid-template-columns: repeat(2, 1fr);
  }

  .processing-title h1 {
    font-size: 24px;
  }

  .main-image-card {
    height: 400px;
  }

  .thumbnails-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .processing-header {
    padding: 15px 0;
  }

  .processing-content {
    padding: 20px 0;
  }

  .processing-spinner {
    width: 60px;
    height: 60px;
  }

  .processing-spinner::before {
    width: 40px;
    height: 40px;
    border-width: 3px;
  }

  .processing-spinner::after {
    width: 55px;
    height: 55px;
    border-width: 2px;
  }

  .particle {
    width: 3px;
    height: 3px;
  }

  .processing-text {
    font-size: var(--font-size-xs);
  }

  /* JPEG Compression Option - Mobile */
  .compression-option {
    padding: var(--spacing-sm) var(--spacing-md) !important;
  }

  .compression-option .checkbox-label {
    font-size: var(--font-size-xs);
  }

  /* History Stats Responsive */
  .history-stats-bar .row.g-3 {
    gap: var(--spacing-sm) !important;
  }

  .history-stats-bar .col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .history-stats-bar .col-lg-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .history-stat-card .card-body {
    padding: var(--spacing-md);
  }

  .history-stat-card h6 {
    font-size: var(--font-size-xs);
    margin-bottom: var(--spacing-sm);
  }

  .history-stat-card h5 {
    font-size: var(--font-size-xl);
  }

  /* History Filters and Controls Responsive */
  #historyGridView .view-container {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .history-controls .row {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .history-controls .col-md-6 {
    text-align: center !important;
  }

  /* History filters responsive adjustments */
  .filters-row {
    flex-direction: column;
    gap: var(--spacing-sm);
    align-items: stretch;
  }

  .filter-group {
    flex: none;
    width: 100%;
  }

  .filter-select {
    min-width: auto;
    width: 100%;
  }

  .clear-all-btn {
    align-self: stretch;
    width: 100%;
  }

  .view-toggle-group {
    width: 100%;
  }

  .history-list-item {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .history-list-thumbnail {
    width: 100%;
    height: 120px;
    margin: 0 auto;
  }

  .history-list-actions {
    justify-content: center;
    margin-top: var(--spacing-sm);
  }

  /* History message responsive adjustments */
  .history-card {
    padding: var(--spacing-sm) !important;
  }

  .history-card .view-history-btn {
    width: 100%;
    justify-content: center;
  }

  /* Dashboard Modal Responsive */
  .modal-xl {
    max-width: 95vw;
    margin: 0.5rem;
    max-height: 95vh;
  }

  .modal-content {
    max-height: 95vh;
    overflow: hidden;
  }

  .dashboard-sidebar {
    padding: var(--spacing-md);
    min-height: auto;
  }

  .dashboard-content {
    padding: var(--spacing-md);
    height: auto;
    max-height: 80vh;
    overflow-y: auto;
  }

  .dashboard-sidebar button {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
  }

  .dashboard-close-btn {
    right: 5px;
    top: 5px;
    width: 25px;
    height: 25px;
  }

  .row .col-lg-4 {
    margin-bottom: var(--spacing-md);
  }

  .card {
    margin-bottom: var(--spacing-sm);
  }

  .card-body {
    padding: var(--spacing-md);
  }

  .card h5 {
    font-size: var(--font-size-lg);
  }

  .card h6 {
    font-size: var(--font-size-sm);
  }
}

/* ========================================
   Tablet (768px - 991px)
   ======================================== */
@media (min-width: 768px) and (max-width: 991px) {
  .main-content .text-content h1 {
    font-size: var(--font-size-4xl);
    line-height: 1.2;
  }

  .lead {
    font-size: var(--font-size-lg);
    line-height: 1.5;
  }

  .upload-main-text {
    font-size: var(--font-size-lg);
  }

  .upload-description {
    font-size: var(--font-size-base);
  }
}

/* ========================================
   Large Screen (1200px+)
   ======================================== */
@media (min-width: 1200px) {
  .main-content .text-content h1 {
    font-size: var(--font-size-5xl);
    line-height: 1.1;
  }

  .lead {
    font-size: var(--font-size-xl);
    line-height: 1.5;
  }
}

/* ========================================
   Tablet Modal (769px - 991px)
   ======================================== */
@media (min-width: 769px) and (max-width: 991px) {
  .modal-xl {
    max-width: 90vw;
    margin: 1rem auto;
  }
}

/* ========================================
   Desktop Modal (992px+)
   ======================================== */
@media (min-width: 992px) {
  .modal-xl {
    max-width: 80vw;
    margin: 1.75rem auto;
  }
}

/* ========================================
   Extra Small Mobile Devices (576px and below)
   ======================================== */
@media (max-width: 576px) {
  .modal-xl {
    max-width: 100vw;
    margin: 0;
    max-height: 100vh;
  }

  .modal-content {
    max-height: 100vh;
  }

  .dashboard-content {
    padding-bottom: 30px;
    height: calc(100vh - 318px);
    overflow-y: auto;
  }

  /* History stats responsive for very small screens */
  .history-stats-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
  }

  .history-stat-card .card-body {
    padding: var(--spacing-sm);
  }

  .history-stat-card h6 {
    font-size: var(--font-size-xs);
  }

  .history-stat-card h5 {
    font-size: var(--font-size-lg);
  }
}

/* ========================================
   Small Tablet to Mobile (577px - 768px)
   ======================================== */
@media (min-width: 577px) and (max-width: 768px) {
  .history-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ========================================
   Tablet and Above (769px+)
   ======================================== */
@media (min-width: 769px) {
  .history-stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}