/**
 * =============================================================================
 * 06-responsive.css
 * =============================================================================
 * Media queries i ajustaments responsive per dispositius mòbils i tablets.
 *
 * @package    temperatura.viladrau.online
 * @author     Andreu Pujol <hola@andreupujol.dev>
 * @version    1.0.0
 * @created    2025-11-27
 * =============================================================================
 */

/* =============================================================================
   1. Tablet i pantalla mitjana (max-width: 900px)
   ============================================================================= */
@media (max-width: 900px) {
  /* Grid passa a 1 columna */
  .grid,
  .info-grid {
    grid-template-columns: 1fr;
  }

  /* Tabs centrats */
  .tabs {
    justify-content: center;
  }
}

/* =============================================================================
   2. Dispositius mòbils (max-width: 768px)
   ============================================================================= */
@media (max-width: 768px) {
  /* Reduir padding global */
  body {
    padding: 12px;
  }

  /* Temperatura més petita */
  .temp {
    font-size: 2.4rem;
  }

  /* Legend més compacta */
  .legend {
    font-size: 0.82rem;
  }

  .legend-chip {
    padding: 5px 8px;
  }
  
  /* Predicció 7 dies: reduir gap i font */
  .forecast-5d-grid {
    gap: 6px;
  }
  
  .forecast-day {
    padding: 8px 4px;
  }
  
  .forecast-day-name {
    font-size: 0.6rem;
  }
  
  .forecast-icon {
    font-size: 1.4rem;
  }
  
  .forecast-temp-max {
    font-size: 1rem;
  }
  
  .forecast-temp-min {
    font-size: 0.85rem;
  }
  
  .forecast-confidence {
    font-size: 0.6rem;
  }
  
  /* Bloc fusionat de predicció: ajustar padding */
  .prediction-compact-view {
    padding: 12px;
  }
  
  .prediction-model-metrics {
    padding: 10px;
    gap: 8px;
  }
  
  .prediction-model-metrics > div {
    min-width: 100px;
  }
  
  .forecast-mini-chart-container {
    height: 120px;
  }
}

/* =============================================================================
   2b. Tablets en orientació vertical (max-width: 1023px)
   ============================================================================= */
@media (max-width: 1023px) {
  /* Predicció compact view: ajustar per tablets */
  .prediction-compact-view {
    padding: 14px;
  }
  
  .prediction-model-metrics {
    padding: 10px;
  }
  
  .prediction-model-metrics > div {
    flex: 1 1 calc(33.333% - 12px);
    min-width: 110px;
  }
  
  .forecast-mini-chart-container {
    height: 130px;
  }
  
  /* Gràfica de predicció: alçada intermèdia en tablet */
  #predictionChart {
    height: 300px !important;
  }
}

/* =============================================================================
   3. Pantalla petita (max-width: 640px)
   ============================================================================= */
@media (max-width: 640px) {
  /* Títol principal */
  h1,
  .page-title {
    font-size: 1.5rem;
  }

  /* Metrics grid més estret */
  .metrics-grid {
    grid-template-columns: 1fr;
  }

  /* Chart meta vertical */
  .chart-meta {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Toast alert més estret */
  .toast-alert {
    max-width: calc(100vw - 40px);
    right: 10px;
  }
}

/* =============================================================================
   4. Pantalla molt petita (max-width: 480px)
   ============================================================================= */
@media (max-width: 480px) {
  /* Metric value més petit */
  .metric-value {
    font-size: 1.8rem;
  }

  /* Tabs més compactes (ara són 8 botons) */
  .tab {
    padding: 6px 8px;
    font-size: 0.75rem;
    min-width: auto;
    flex: 1;
  }
  
  .tabs {
    gap: 4px;
    flex-wrap: wrap;
  }

  /* Footer apilat */
  .footer {
    flex-direction: column;
    align-items: flex-start;
  }
  
  /* Predicció 7 dies: ultra compacte */
  .forecast-5d-grid {
    gap: 4px;
    grid-template-columns: repeat(7, 1fr);
  }
  
  .forecast-day {
    padding: 6px 2px;
    flex-direction: column;
    gap: 4px;
  }
  
  .forecast-day-info {
    width: 100%;
    text-align: center;
  }
  
  .forecast-day-name {
    font-size: 0.5rem;
    letter-spacing: 0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .forecast-icon {
    font-size: 1.1rem;
  }
  
  .forecast-temps {
    gap: 1px;
  }
  
  .forecast-temp-max,
  .forecast-temp-min {
    font-size: 0.65rem;
  }
  
  .forecast-temp-max::before,
  .forecast-temp-min::before {
    display: none;
  }
  
  .forecast-confidence {
    display: none; /* Amagar en mòbil molt petit */
  }
  
  /* Bloc fusionat de predicció: ultra compacte */
  .prediction-compact-view {
    padding: 8px;
  }
  
  .prediction-model-metrics {
    padding: 8px;
    gap: 6px;
    font-size: 0.85rem;
  }
  
  .prediction-model-metrics > div {
    min-width: 80px;
    font-size: 0.9rem;
  }
  
  .prediction-model-metrics > div > div:first-child {
    font-size: 0.65rem;
  }
  
  .prediction-model-metrics > div > div:last-child {
    font-size: 1.1rem;
  }
  
  .forecast-mini-chart-container {
    height: 100px;
    padding: 8px;
  }
  
  /* Bloc temperatures: valors més compactes */
  .temps-value {
    font-size: 1.3rem;
  }
  
  .temps-item {
    padding: 10px 6px;
  }
  
  /* Gràfica de predicció: alçada reduïda en mòbil */
  #predictionChart {
    height: 300px !important;
  }
}

/* =============================================================================
   7. Rendiment Real del Model - Responsive
   ============================================================================= */
@media (max-width: 1200px) {
  .performance-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .chart-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .performance-period-selector {
    width: 100%;
  }
  
  .period-btn {
    flex: 1;
    font-size: 0.75rem;
    padding: 8px 6px;
  }
  
  .performance-stats-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .stat-icon-large {
    font-size: 2rem;
  }
  
  .stat-value-large {
    font-size: 1.8rem;
  }
  
  .error-bar-label {
    min-width: 150px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .error-badge {
    font-size: 0.65rem;
    padding: 3px 8px;
  }
}

@media (max-width: 480px) {
  .placeholder-icon {
    font-size: 3rem;
  }
  
  .placeholder-title {
    font-size: 1.1rem;
  }
  
  .placeholder-text {
    font-size: 0.85rem;
  }
  
  .error-bar-track {
    height: 28px;
  }
  
  .error-bar-value {
    font-size: 0.7rem;
  }
}