/* Layout Bento Grid */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

@media (min-width: 992px) {
  .bento-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    grid-auto-flow: dense;
  }
  
  /* Le graphique prend 2 colonnes */
  .tile-chart {
    grid-column: 2 / span 2;
  }
  
  /* Les trends prennent toute la largeur en haut */
  .tile-trends {
    grid-column: span 3;
    text-align: center;
    padding: 10px;
  }

  /* La carte prend 1 colonne */
  .tile-map {
    grid-column: span 1;
  }

  /* Les prévisions 10 jours prennent 2 colonnes */
  .tile-forecast {
    grid-column: span 2;
  }
  
  /* Le tableau brut prend 1 colonne */
  .tile-raw {
    grid-column: 1 / span 1;
    max-height: 620px; /* Match charts height */
  }
  
  /* Mode Full Width (sans carte) */
  .bento-grid.full-width {
    grid-template-columns: 1fr;
  }
  .bento-grid.full-width .tile-chart,
  .bento-grid.full-width .tile-trends,
  .bento-grid.full-width .tile-forecast,
  .bento-grid.full-width .tile-raw {
    grid-column: span 1;
  }
}

.bento-tile {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  padding: 20px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.bento-tile h3 {
  flex-shrink: 0;
  margin-top: 0;
}

.tile-content-scroll {
  flex-grow: 1;
  overflow: auto;
  min-height: 0;
}

/* Masquer le titre en double s'il est présent dans le contenu chargé */
.tile-content-scroll h3 {
  display: none;
}

/* Wrapper pour le scroll horizontal des graphiques */
.chart-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tile-trends {
  text-align: center;
}

/* Scroll pour la tuile forecast */
.tile-forecast {
  max-height: 450px;
}

/* Scroll pour la tuile raw data */
.tile-raw {
  max-height: 640px;
}

/* Carte Full Bleed dans la tuile */
#bento-city-map{
  width:100%;
  height:100%;
  min-height: 300px;
  border-radius: 15px; /* Match bento radius */
}
#bento-city-map canvas {
  display: block;
}

/* Forecast Cards */
.forecast-week-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 5px; /* Espacement vertical entre les semaines */
  justify-content: flex-start;
}
.forecast-card {
  flex: 1;
  min-width: 70px;
  background-color: rgba(255, 255, 255, 0.1); /* Plus clair que le noir pur */
  border-radius: 12px;
  padding: 10px 2px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
/*.forecast-card div.cloud:nth-of-type(2)::before{
  content:"PM";
  text-align: left;
  font-size:8px;
  writing-mode: tb-rl;
  transform: rotate(-180deg);
}
.forecast-card div.cloud:nth-of-type(3)::before{
  content:"AM";
  text-align: left;
  font-size:8px;
  writing-mode: tb-rl;
  transform: rotate(-180deg);
}*/
.forecast-card div.cloud{
  padding-top: 5px;
}
.forecast-card .weather-icon-svg {
  width: 60px;
  height: 60px;
  margin-bottom: 5px;
}
.forecast-card .middaywind {
  font-size: 10px;
  line-height: 1.1;
}

/* Style Trends */
.trend-item {
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.4;
  /*display: inline-flex;
  align-items: center;
  margin: 0 10px;*/
}
.trend-item .trend-icon {
  width: 60px;
  height: 60px;
  margin-right: 5px;
}

/* Wrapper for special icons like crossed-out */
.trend-icon-wrapper {
  display: inline-block;
  position: relative;
  width: 60px;
  height: 60px;
  margin-right: 5px;
}
.trend-icon-wrapper .trend-icon {
  margin-right: 0; /* The wrapper handles the margin */
}

.trend-icon-wrapper.icon-crossed-out::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -5%;
  width: 110%;
  height: 4px;
  background: #e74c3c;
  border-radius: 2px;
  transform: rotate(-30deg);
  transform-origin: center;
  box-shadow: 0 0 2px rgba(0,0,0,0.5);
}

/* Div Forecast Styles */
.div_forecast h2{
  color: white;
  font-weight: bold;
  font-size:30px;
}
.div_forecast .trend.wi-cloudy{
  color:#9baac4;
}
.div_forecast .trend.wi-day-sunny{
  color:#f7ca18;
}
.div_forecast .trend.wi-showers{
  color:#75a8f9;
}
.div_forecast .trend.wi-day-cloudy-high{
  color:#f7ca18;
}
.div_forecast .trend.fa-stack{
  font-size:13px;
  margin-bottom:5px;
}
.div_forecast h3{
  color: white;
  font-weight: bold;
  font-size:22px;
}
.div_forecast .previsions{
  color: white;
  font-weight: bold;
  font-size:20px;
}
.div_forecast{
  color: white;
  font-weight: bold;
  font-size:16px;
}

/* Raw Table Styles */
.forecast24hours thead{
  border:1px solid grey;
}
.forecast24hours td{
  border-top:1px solid grey;
  background-color:#080808;
}
.forecast24hours .wi {
  font-size:25px;
}
.forecast24hours td , .forecast24hours th{
  padding:5px;
  text-align :center;
}

/* Modals for Forecast */
#forecast_dialog .modal-body {
  background-color:#333333;
  color:white;
  padding: 0px;
  overflow: auto;
}
#forecast_dialog .modal-body h3{
  color:white;
  font-weight:bold;
}
#forecast_dialog .modal-header h1 {
  margin: 0px;
}

/* Optimisations Mobile */
@media (max-width: 767px) {
  .bento-grid {
    padding: 5px;
    gap: 10px;
  }
  .bento-tile {
    padding: 10px;
  }
  .tile-forecast .tile-content-scroll {
    overflow-x: auto; /* Scroll horizontal sur mobile */
  }
  .forecast-week-row {
    gap: 2px;
    flex-wrap: nowrap;
    width: max-content;
  }
  #bento-city-map {
    min-height: 200px;
  }
  .tile-raw {
    max-height: 300px;
  }
  .bento-tile h3 {
    text-align: center;
  }
  .modal-header h1, .modal-header h2 {
    font-size: 18px;
  }
}