/* styles.css */


body {
    font-family: Arial, sans-serif;
}


/* Styling for data-table-1 */
.table-responsive table-container {
    max-width: 400px; /* Angiv den ønskede maksimale bredde på tabellen */
    margin: 0 auto; /* Centrer tabellen */
}

.table-wrapper {
    border-radius: 10px; /* Afrundede hjørner for wrapper-div */
    overflow: hidden; /* Sørg for at indholdet ikke overskrider wrapper-div'en */
}

#data-table-1 {
    border-collapse: separate; /* Brug separate for at få afrundede hjørner */
    border-spacing: 0; /* For at fjerne den lille streg omkring tabellen */
    width: 100%; /* Tilpas efter behov */
}

#data-table-1 th,
#data-table-1 td {
    width: 33.33%; /* Angiv en fast bredde, f.eks. en tredjedel af tabellens bredde */
}


#data-table-1 th {
    background-color: transparent; /* Fjerne Baggrundsfarven for tabelhoveder i tables-container */
	height: 30px;
    padding: 1px; /* Lidt padding for at adskille indholdet */
}

#caption-head-section th {
    background-color: #F6CAF8; /* Gendan farven for denne sektion */
	height: 20px;
    font-weight: bold;
	text-align: left;
    border-radius: 0px !important; /* Afrundede hjørner */
}

#extra-head-section th {
    font-size: 15px; /* Sæt tekststørrelsen efter behov */
    height: 40px;/* Fastsæt max. højde */
	padding: 10px !important;
	background-color: #F6CAF8;
    line-height: 5px; /* Juster linjehøjden for at centrere teksten vertikalt */
    border-top-left-radius: 10px; /* Afrundede hjørner for øverste venstre celle */
    border-top-right-radius: 10px; /* Afrundede hjørner for øverste højre celle */
    overflow: hidden; /* Skjul overskydende tekst */
}



/* Styling for hver anden række */
#data-table-1 tbody tr:nth-child(even) {
    background-color: #f2f2f2; /* Lys grå baggrundsfarve for hver anden række */
}

#data-table-1 th,
#data-table-1 td {
    border: 1px solid #ddd; /* Ramme omkring celler */
    padding: 8px;
}

/* Container styling */
.container {
    display: flex; /* Anvend flexbox */
    padding: 2px; /* Tilføj lidt polstring */
}

.container div {
    width: auto; /* Automatisk bredde */
}

/* Tilføj margin mellem containere */
#last-updated-container {
    margin-right: 7px; /* Tilpas marginen til højre for kontaineren "last-updated-container" for at flytte datostemplet efter behov */
}

/* Venstrestil containerne */
#last-updated-container,
#date-container,
#seconds-since-update-container {
    text-align: left;
	font-weight: normal;
}

/* Responsiv styling */
@media only screen and (max-width: 768px) {
    #data-table-1 {
        width: 100%; /* Tilpasning til mindre skærme */
    }
    .container {
        flex-direction: column; /* Skift til lodret layout på mindre skærme */
    }
    .container div {
        width: 100%; /* Containerne fylder hele bredden på mindre skærme */
    }
}

/* Stylesettings for "last-updated-container", "date-container", "seconds-since-update-container" samt for kolonne 2 i alle tabeller der oprettes i tables-container - mr ikke ændres */
#last-updated-container,
#date-container,
#tables-container td:nth-child(2) {
    color: blue;
    font-weight: normal;
}

/* Stylesettings for blinkeffekter - når ikke ændres */
@keyframes blink-animation-red {
    0% {
        color: #FFFFFF;
        font-weight: normal;
    }   
    100% {
        color: red;
        font-weight: normal;
    }
}

.blink {
    animation: blink-animation-red 0.3s infinite alternate; /* Hvert blink varer nu 0.5 sekunder */
}




/* 3 blinks – genbrugger din @keyframes blink-animation-red */
td.blink3,
.value-text.blink3 {
  animation: blink-animation-red 0.3s linear 0s 3 alternate;
}









/* Vindpil som CSS-trekant + rotation */
/* Vindpil med hale (fra tidligere svar) */

/* Vindpil med tydelig hale bag spidsen (ingen “forlæns-hale”) */
/* Vindpil med kortere hale */
/* Wind arrow: fixed 12×12 box, rotates around its center */
/* Wind arrow: 16×16 box, rotates around its center */
.vindpil {
  display: inline-block;
  position: relative;
  width: 16px;
  height: 16px;
  margin-left: 6px;           /* space after the direction text */
  vertical-align: middle;
  transform-origin: 50% 50%;  /* rotate around its own center */
  transition: transform 0.2s ease;
  color: currentColor;         /* inherit text color */
}

/* Shaft */
.vindpil::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 2px;                  /* start closer to left edge to lengthen tail */
  right: 6px;                 /* leave room for the head */
  height: 2px;
  background: currentColor;
  transform: translateY(-50%);
  border-radius: 1px;
}

/* Head (triangle) */
.vindpil::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1px;                 /* keep the head inside the box */
  transform: translateY(-50%);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid currentColor;  /* triangle points RIGHT */
}


/* Rotationer for de 16 kompasretninger (DK) */
.vindpil[data-dir="N"]   { transform: rotate(0deg); }
.vindpil[data-dir="NNØ"] { transform: rotate(22.5deg); }
.vindpil[data-dir="NØ"]  { transform: rotate(45deg); }
.vindpil[data-dir="ØNØ"] { transform: rotate(67.5deg); }
.vindpil[data-dir="Ø"]   { transform: rotate(90deg); }
.vindpil[data-dir="ØSØ"] { transform: rotate(112.5deg); }
.vindpil[data-dir="SØ"]  { transform: rotate(135deg); }
.vindpil[data-dir="SSØ"] { transform: rotate(157.5deg); }
.vindpil[data-dir="S"]   { transform: rotate(180deg); }
.vindpil[data-dir="SSV"] { transform: rotate(202.5deg); }
.vindpil[data-dir="SV"]  { transform: rotate(225deg); }
.vindpil[data-dir="VSV"] { transform: rotate(247.5deg); }
.vindpil[data-dir="V"]   { transform: rotate(270deg); }
.vindpil[data-dir="VNV"] { transform: rotate(292.5deg); }
.vindpil[data-dir="NV"]  { transform: rotate(315deg); }
.vindpil[data-dir="NNV"] { transform: rotate(337.5deg); }



/* Standardfarver (kan ændres globalt her) */
:root{
  --trend-up-color: #16a34a;      /* grøn */
  --trend-down-color: #dc2626;    /* rød */
  --trend-neutral-color: #9ca3af; /* grå */
}

/* Basis-stil for pilen */
.trend-arrow {
  margin-left: 6px;
  font-size: 0.9em;
  vertical-align: middle;
}

/* Standardfarver via klasser */
.trend-arrow.up      { color: var(--trend-up-color); }
.trend-arrow.down    { color: var(--trend-down-color); }
.trend-arrow.neutral { color: var(--trend-neutral-color); }

/* --- Valgfrie pr.-label overrides --- */
/* Eksempel: giv Temperatur særlige farver */
tr[data-label="Temperatur"] .trend-arrow.up   { color: #ff6600; } /* orange op */
tr[data-label="Temperatur"] .trend-arrow.down { color: #0066ff; } /* blå ned */

/* Eksempel: Luftfugtighed i andre nuancer */
tr[data-label="Luftfugtighed"] .trend-arrow.up   { color: #22c55e; }
tr[data-label="Luftfugtighed"] .trend-arrow.down { color: #ef4444; }

tr[data-label="Indendørs luftfugtighed"] .trend-arrow.up   { color: #ff6600; } /* orange op */
tr[data-label="Indendørs luftfugtighedr"] .trend-arrow.down { color: #0066ff; } /* blå ned */

tr[data-label="Out_Heat_Ix"] .trend-arrow.up   { color: #ff6600; } /* orange op */
tr[data-label="Out_Heat_Ix"] .trend-arrow.down { color: #0066ff; } /* blå ned */

tr[data-label="Aktuelle UV-indeks"] .trend-arrow.up   { color: #ff6600; } /* orange op */
tr[data-label="Aktuelle UV-indeks"] .trend-arrow.down { color: #0066ff; } /* blå ned */

tr[data-label="Solindstråling lige nu"] .trend-arrow.up   { color: #ff6600; } /* orange op */
tr[data-label="Solindstråling lige nu"] .trend-arrow.down { color: #0066ff; } /* blå ned */

tr[data-label="Råbarometer"] .trend-arrow.up   { color: #ff6600; } /* orange op */
tr[data-label="Råbarometer"] .trend-arrow.down { color: #0066ff; } /* blå ned */

tr[data-label="Hav-niveau barometer"] .trend-arrow.up   { color: #ff6600; } /* orange op */
tr[data-label="Hav-niveau barometer"] .trend-arrow.down { color: #0066ff; } /* blå ned */

tr[data-label="Vindretning i grader"] .trend-arrow.up   { color: #ff6600; } /* orange op */
tr[data-label="Vindretning i grader"] .trend-arrow.down { color: #0066ff; } /* blå ned */

tr[data-label="Sidst registrede vindstød"] .trend-arrow.up   { color: #ff6600; } /* orange op */
tr[data-label="Sidst registrede vindstød"] .trend-arrow.down { color: #0066ff; } /* blå ned */

tr[data-label="Vindhastigheden lige nu"] .trend-arrow.up   { color: #ff6600; } /* orange op */
tr[data-label="Vindhastigheden lige nu"] .trend-arrow.down { color: #0066ff; } /* blå ned */