/* ========================================
   RESPONSIVE.CSS - Media queries et responsive design
   ======================================== */

/* ========================================
   DESKTOP LARGE (1200px+)
   ======================================== */

@media (min-width: 1200px) {
  .app-container {
    padding: 2.5rem 2rem;
  }

  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .modal {
    max-width: 600px;
  }
}

/* ========================================
   TABLET & SMALL DESKTOP (768px - 1199px)
   ======================================== */

@media (max-width: 1199px) {
  .app-container {
    padding: 2rem 1.5rem;
  }

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

/* ========================================
   TABLET (768px - 1023px)
   ======================================== */

@media (max-width: 1023px) {
  .app-title {
    font-size: var(--text-2xl);
  }

  .heatmap-container {
    overflow-x: auto;
    padding: 1rem;
  }

  .heatmap-grid {
    min-width: 600px;
  }
}

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

@media (max-width: 768px) {
  /* Container */
  .app-container {
    padding: 1rem;
  }

  /* Header */
  .app-header {
    flex-direction: column;
    gap: var(--spacing-md);
    align-items: flex-start;
    padding-bottom: var(--spacing-md);
  }

  .app-title {
    font-size: var(--text-2xl);
  }

  .app-actions {
    width: 100%;
    justify-content: flex-end;
  }

  /* Navigation tabs */
  .nav-tabs {
    padding: 0.375rem;
    gap: 0.375rem;
  }

  .nav-tab {
    padding: 0.625rem 1rem;
    font-size: var(--text-xs);
    flex: 1;
    text-align: center;
  }

  /* Stats */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
  }

  .stat-card {
    padding: 1rem;
  }

  .stat-icon {
    font-size: 1.5rem;
  }

  .stat-value {
    font-size: var(--text-2xl);
  }

  /* Habit items */
  .habit-item {
    padding: 0.875rem;
    gap: 0.75rem;
  }

  .habit-icon {
    font-size: 1.25rem;
    width: 2rem;
    height: 2rem;
  }

  .habit-name {
    font-size: var(--text-sm);
  }

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

  .streak-fire {
    font-size: 0.875rem;
  }

  /* Modal */
  .modal {
    margin: 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-height: 95vh;
    position: fixed;
    bottom: 0;
    top: auto;
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding: 1rem;
  }

  .modal-title {
    font-size: var(--text-lg);
  }

  /* Form */
  .emoji-picker,
  .color-picker {
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    padding: 0.75rem;
  }

  .emoji-option,
  .color-option {
    width: 2rem;
    height: 2rem;
  }

  .emoji-option {
    font-size: 1.25rem;
  }

  /* Buttons */
  .btn {
    padding: 0.5rem 1rem;
    font-size: var(--text-sm);
  }

  .btn-icon {
    width: 2.25rem;
    height: 2.25rem;
    font-size: var(--text-lg);
  }

  /* Progress */
  .progress-summary {
    padding: 1rem;
  }

  .summary-date {
    font-size: var(--text-lg);
  }

  /* Quote */
  .motivational-quote {
    padding: 1rem;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .quote-icon {
    font-size: var(--text-xl);
  }

  .quote-text {
    font-size: var(--text-sm);
  }

  /* Toast */
  .toast {
    bottom: 1rem;
    right: 1rem;
    left: 1rem;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--text-xs);
  }

  /* Heatmap */
  .heatmap-container {
    padding: 0.75rem;
  }

  .heatmap-grid {
    min-width: 500px;
    gap: 2px;
  }

  /* View title */
  .view-title {
    font-size: var(--text-xl);
  }

  /* Card */
  .card {
    padding: 1rem;
  }

  .card-title {
    font-size: var(--text-base);
  }

  /* Settings */
  .settings-section {
    margin-bottom: var(--spacing-lg);
  }

  .settings-section h4 {
    font-size: var(--text-base);
  }

  .setting-item {
    padding: 0.75rem;
  }
}

/* ========================================
   MOBILE SMALL (max-width: 480px)
   ======================================== */

@media (max-width: 480px) {
  /* Header */
  .app-title {
    font-size: var(--text-xl);
  }

  .app-icon {
    font-size: var(--text-xl);
  }

  /* Navigation */
  .nav-tabs {
    padding: 0.25rem;
    gap: 0.25rem;
  }

  .nav-tab {
    padding: 0.5rem 0.75rem;
    font-size: 0.625rem;
  }

  /* Stats grid - Single column on very small screens */
  .stats-grid {
    grid-template-columns: 1fr;
  }

  /* Habit items */
  .habit-item {
    padding: 0.75rem;
  }

  .habit-checkbox {
    width: 1.5rem;
    height: 1.5rem;
  }

  .habit-icon {
    font-size: 1.125rem;
    width: 1.75rem;
    height: 1.75rem;
  }

  /* Buttons */
  .btn {
    padding: 0.5rem 0.875rem;
    font-size: var(--text-xs);
  }

  .btn-sm {
    padding: 0.375rem 0.625rem;
    font-size: 0.625rem;
  }

  /* Modal */
  .modal-header,
  .modal-body,
  .modal-footer {
    padding: 0.875rem;
  }

  /* Form */
  .emoji-picker,
  .color-picker {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.375rem;
    padding: 0.5rem;
  }

  .emoji-option,
  .color-option {
    width: 1.75rem;
    height: 1.75rem;
  }

  .emoji-option {
    font-size: 1.125rem;
  }

  .form-group {
    margin-bottom: var(--spacing-md);
  }

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

  .form-input,
  .form-select,
  .form-textarea {
    padding: 0.625rem 0.875rem;
    font-size: var(--text-sm);
  }

  /* Days selector */
  .days-selector {
    gap: 0.25rem;
  }

  .day-checkbox {
    padding: 0.375rem;
    font-size: 0.625rem;
  }

  /* Progress */
  .progress-bar {
    height: 0.5rem;
  }

  /* Empty state */
  .empty-state {
    padding: 2rem 1rem;
  }

  .empty-state-icon {
    font-size: 3rem;
  }

  .empty-state-title {
    font-size: var(--text-lg);
  }

  .empty-state-text {
    font-size: var(--text-sm);
  }
}

/* ========================================
   LANDSCAPE MODE MOBILE (max-height: 500px)
   ======================================== */

@media (max-height: 500px) and (orientation: landscape) {
  .modal {
    max-height: 100vh;
    overflow-y: auto;
  }

  .app-header {
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
  }

  .nav-tabs {
    margin-bottom: var(--spacing-md);
  }

  .progress-summary {
    margin-bottom: var(--spacing-md);
  }

  .motivational-quote {
    margin-top: var(--spacing-md);
  }
}

/* ========================================
   TOUCH DEVICE OPTIMIZATIONS
   ======================================== */

@media (hover: none) and (pointer: coarse) {
  /* Increase touch targets */
  .btn-icon {
    min-width: 44px;
    min-height: 44px;
  }

  .habit-checkbox {
    min-width: 44px;
    min-height: 44px;
  }

  .nav-tab {
    min-height: 44px;
  }

  /* Remove hover effects on touch devices */
  .habit-item:hover {
    transform: none;
  }

  .card:hover {
    transform: none;
  }

  .stat-card:hover {
    transform: none;
  }

  /* Show actions permanently on touch */
  .habit-actions {
    opacity: 1;
  }

  /* Adjust tooltips for touch */
  .heatmap-tooltip {
    display: none;
  }

  .heatmap-cell:active .heatmap-tooltip {
    display: block;
  }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
  /* Hide non-essential elements */
  .app-actions,
  .nav-tabs,
  .btn-add-habit,
  .habit-actions,
  .modal-overlay,
  .toast {
    display: none !important;
  }

  /* Optimize for print */
  body {
    background: white;
    color: black;
  }

  .app-container {
    max-width: 100%;
    padding: 0;
  }

  .card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #000;
  }

  .habit-item {
    break-inside: avoid;
    border: 1px solid #000;
  }

  /* Page breaks */
  .view-title {
    page-break-after: avoid;
  }

  .stats-grid {
    page-break-inside: avoid;
  }
}

/* ========================================
   HIGH DPI SCREENS (Retina)
   ======================================== */

@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
  /* Adjust for sharper rendering */
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Slightly adjust borders for retina */
  .habit-item,
  .card {
    border-width: 1px;
  }
}

/* ========================================
   FOLDABLE DEVICES
   ======================================== */

@media (min-width: 540px) and (max-width: 720px) and (min-height: 720px) {
  /* Optimize for foldable phones in unfolded state */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .modal {
    max-width: 90%;
  }
}

/* ========================================
   ULTRA-WIDE SCREENS (1920px+)
   ======================================== */

@media (min-width: 1920px) {
  .app-container {
    max-width: 1400px;
  }

  .stats-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .heatmap-grid {
    min-width: 900px;
  }
}

/* ========================================
   ACCESSIBILITY - INCREASED TEXT SIZE
   ======================================== */

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

@media (prefers-contrast: high) {
  .btn {
    border: 2px solid currentColor;
  }

  .habit-item {
    border-width: 2px;
  }

  .card {
    border-width: 2px;
  }
}

/* ========================================
   DARK MODE PREFERENCES
   ======================================== */

@media (prefers-color-scheme: dark) {
  /* Handled by themes.css data-theme attribute */
}

/* ========================================
   SAFE AREAS (iPhone X and similar)
   ======================================== */

@supports (padding: max(0px)) {
  .app-container {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }

  .modal {
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }

  .toast {
    bottom: max(2rem, calc(2rem + env(safe-area-inset-bottom)));
    right: max(2rem, calc(2rem + env(safe-area-inset-right)));
  }

  /* Calendar responsive */
  .calendar-day-number {
    font-size: var(--text-sm);
  }

  .calendar-day-dots {
    font-size: 0.5rem;
    padding: 0.0625rem 0.25rem;
  }

  .calendar-title {
    font-size: var(--text-lg);
  }
}