/* ==================================================
   DAGSOVERSIGT - Vertikal liste med fold-ud
   Opdateret: Februar 2026 v2.2
   
   VEJRIKON STØRRELSER:
   - "I Dag" kort: 180px × 180px (responsive: 150px)
   - Dagskort: 64px × 64px (responsive: 60px/56px/50px)
   - Time-for-time: 56px × 56px (responsive: 54px)
   - Temperatur i dagskort: 18px
================================================== */

/* Meget større vejrikoner for bedre proportioner */
.sv-hour-ic svg {
  width: 56px !important;
  height: 56px !important;
  display: block;
  overflow: visible !important;
}

.sv-hour-ic {
  overflow: visible !important;
  height: 90px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Gør time-items bredere for bedre plads */
.sv-hourly-item {
  width: 88px !important;
  min-width: 88px !important;
  overflow: visible !important;
}

/* Dagskort (daycard) ikoner - større for bedre synlighed */
.sv-daily-item .svg-ic,
.sv-daily-header svg {
  width: 64px !important;
  height: 64px !important;
  overflow: visible !important;
  display: block;
}

/* Dagskort temperatur - større for bedre læsbarhed */
.sv-daily-header [style*="font-size: 15px"],
.sv-daily-header [style*="font-size:15px"] {
  font-size: 18px !important;
}

/* Dagskort temperatur container */
.sv-daily-header > div > div:nth-child(3) {
  width: 70px !important;
}

.sv-current-ic svg {
  width: 180px !important;
  height: 180px !important;
  overflow: visible !important;
}

.sv-current-ic {
  overflow: visible !important;
  padding: 8px 0 !important;
}

/* Hero card dagens navn og temperatur */
.sv-current-info {
  text-align: center;
}

.sv-current-day {
  font-size: 16px;
  font-weight: 500;
  opacity: 0.85;
  margin-bottom: 4px;
  text-transform: capitalize;
  color: #ffffff;
}

@media (max-width: 520px) {
  .sv-current-ic svg {
    width: 150px !important;
    height: 150px !important;
    overflow: visible !important;
  }
  
  .sv-hour-ic svg {
    width: 54px !important;
    height: 54px !important;
    overflow: visible !important;
  }
  
  .sv-hourly-item {
    width: 82px !important;
    min-width: 82px !important;
    overflow: visible !important;
  }
  
  .sv-hour-ic {
    overflow: visible !important;
    height: 86px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Sørg for at SVG elementer vises korrekt */
.sv-current-ic svg,
.sv-hour-ic svg,
.sv-daily-list svg {
  fill: currentColor;
}

.sv-current-ic svg *,
.sv-hour-ic svg *,
.sv-daily-list svg * {
  vector-effect: non-scaling-stroke;
}

/* Bevar specifikke farver i SVG vejrikoner */
.sv-current-ic svg path[fill*="rgb(248,203,49)"],
.sv-hour-ic svg path[fill*="rgb(248,203,49)"],
.sv-daily-list svg path[fill*="rgb(248,203,49)"] {
  fill: rgb(248,203,49) !important;
}

.sv-current-ic svg path[fill*="rgb(255,255,255)"],
.sv-hour-ic svg path[fill*="rgb(255,255,255)"],
.sv-daily-list svg path[fill*="rgb(255,255,255)"] {
  fill: rgba(255,255,255,0.95) !important;
}

.sv-current-ic svg path[fill*="rgb(93,192,244)"],
.sv-hour-ic svg path[fill*="rgb(93,192,244)"],
.sv-daily-list svg path[fill*="rgb(93,192,244)"] {
  fill: rgb(93,192,244) !important;
}

.sv-current-ic svg path[fill*="rgba(200,200,200"],
.sv-hour-ic svg path[fill*="rgba(200,200,200"],
.sv-daily-list svg path[fill*="rgba(200,200,200"] {
  fill: rgba(200,200,200,0.6) !important;
}

/* Strokes for sol/måne stråler */
.sv-current-ic svg path[stroke*="rgb(248,203,49)"],
.sv-hour-ic svg path[stroke*="rgb(248,203,49)"],
.sv-daily-list svg path[stroke*="rgb(248,203,49)"] {
  stroke: rgb(248,203,49) !important;
}

.sv-current-ic svg path[stroke*="rgba(200,200,200"],
.sv-hour-ic svg path[stroke*="rgba(200,200,200"],
.sv-daily-list svg path[stroke*="rgba(200,200,200"] {
  stroke: rgba(200,200,200,0.6) !important;
}

/* Lyse farver til vejrikoner i dark mode */
html[data-theme="dark"] .sv-current-ic svg path[fill*="rgb(248,203,49)"],
html[data-theme="dark"] .sv-hour-ic svg path[fill*="rgb(248,203,49)"] {
  fill: rgb(255,220,80) !important;
}

html[data-theme="dark"] .sv-current-ic svg path[stroke*="rgb(248,203,49)"],
html[data-theme="dark"] .sv-hour-ic svg path[stroke*="rgb(248,203,49)"] {
  stroke: rgb(255,220,80) !important;
}

html[data-theme="dark"] .sv-current-ic svg path[fill*="rgb(255,255,255)"],
html[data-theme="dark"] .sv-hour-ic svg path[fill*="rgb(255,255,255)"] {
  fill: rgb(245,245,245) !important;
}

.sv-daily-list {
  background: var(--sv-card);
  border: 1px solid var(--sv-border);
  border-radius: 20px;
  box-shadow: var(--sv-shadow-soft);
  overflow: hidden;
  margin-bottom: 12px;
}

.sv-daily-item {
  border-bottom: 1px solid var(--sv-border);
  transition: background-color 0.2s;
}

.sv-daily-item:last-child {
  border-bottom: none;
}

.sv-daily-item.active {
  background: rgba(0, 0, 0, 0.02);
}

html[data-theme="dark"] .sv-daily-item.active {
  background: rgba(255, 255, 255, 0.03);
}

.sv-daily-header {
  padding: 18px 14px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Ekstra styling til dagsoversigt ikoner */
.sv-daily-list svg {
  flex-shrink: 0;
}

/* Responsivt layout for dagsoversigt på små skærme */
@media (max-width: 420px) {
  .sv-daily-header {
    padding: 14px 6px;
  }
  
  /* Komprimér layout på små skærme */
  .sv-daily-item svg,
  .sv-daily-item .svg-ic,
  .sv-daily-header svg {
    width: 56px !important;
    height: 56px !important;
    overflow: visible !important;
  }
  
  /* Vinddata styling - kompakt med m/s */
  .sv-daily-item .sv-daily-wind {
    font-size: 10px !important;
  }
  
  .sv-daily-item .sv-daily-wind span:first-child {
    font-size: 14px !important;
    font-weight: 900 !important;
  }
  
  .sv-daily-item .sv-daily-arrow {
    font-size: 18px !important;
    margin-left: 5px !important;
  }
}

/* Ekstra kompakt på meget små skærme */
@media (max-width: 360px) {
  .sv-daily-header {
    padding: 12px 4px;
  }
  
  .sv-daily-item svg,
  .sv-daily-item .svg-ic,
  .sv-daily-header svg {
    width: 50px !important;
    height: 50px !important;
    overflow: visible !important;
  }
  
  .sv-daily-wind {
    font-size: 9px !important;
  }
  
  .sv-daily-wind span:first-child {
    font-size: 13px !important;
  }
  
  .sv-daily-arrow {
    margin-left: 4px !important;
  }
}

.sv-daily-header:hover {
  background: rgba(0, 0, 0, 0.02);
}

html[data-theme="dark"] .sv-daily-header:hover {
  background: rgba(255, 255, 255, 0.03);
}

.sv-daily-header:active {
  background: rgba(0, 0, 0, 0.05);
}

html[data-theme="dark"] .sv-daily-header:active {
  background: rgba(255, 255, 255, 0.05);
}

.sv-daily-arrow {
  transition: transform 0.3s ease;
  display: inline-block;
}

.sv-daily-foldout {
  padding: 8px 6px 12px;
  background: var(--sv-surface);
  border-top: 1px solid var(--sv-border);
  animation: slideDown 0.3s ease;
  overflow: hidden;
}

@keyframes slideDown {
  from {
    max-height: 0;
    opacity: 0;
  }
  to {
    max-height: 300px;
    opacity: 1;
  }
}

/* Touch carousel i fold-ud */
.sv-daily-foldout .touchcarousel-container {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 0;
}

.sv-daily-foldout .touchcarousel-container::-webkit-scrollbar {
  display: none;
}

/* Hourly carousel styling (top slider + fold-ud) */
.sv-hourly-carousel .touchcarousel-container,
.sv-daily-foldout .touchcarousel-container {
  padding: 4px 0;
}

/* Mobil optimering */
@media (max-width: 520px) {
  .sv-daily-header {
    padding: 14px 12px;
  }
  
  .sv-daily-foldout {
    padding: 6px 4px 10px;
  }
  
  /* Dagskort ikoner ved medium skærme */
  .sv-daily-item svg,
  .sv-daily-item .svg-ic,
  .sv-daily-header svg {
    width: 60px !important;
    height: 60px !important;
  }
}