/* Tokens */
:root {
  --color-50: #eee6e5;
  --color-100: #e6dad8;
  --color-200: #dabfbb;
  --color-300: #cba6a0;
  --color-400: #bd8d86;
  --color-500: #ae746b;
  --color-600: #935a51;
  --color-700: #71453e;
  --color-800: #4f302b;
  --color-900: #2b1c19;
  --color-950: #1b1110;

  --color-bg: var(--color-200);
  --color-surface: var(--color-50);
  --color-text: var(--color-900);
  --color-muted: var(--color-700);
  --color-border: var(--color-400);

  --color-error: #e34234;
  --color-warning: #dd7c00;

  --color-weather: #ffa500;
  --color-transport: #007fff;
  --color-temperature: #ff6347;
  --color-electricity: #9acd32;
  --color-tempo: #50c878;

  --sky-cloudy: #9e9e9e;
  --sky-fog: #b0b0b0;
  --sky-rain: #4a90d9;
  --sky-freezing: #7ec8e3;
  --sky-snow: #c8c8e8;
  --sky-thunder: #5c3d7a;

  --tariff-hp: #b07d4a;
  --tariff-hc: #d4a76a;
  --tariff-rhp: #c9453d;
  --tariff-rhc: #e07a73;
  --tariff-bchp: #a0a0a0;
  --tariff-bchc: #c8c8c8;
  --tariff-buhp: #3d7ec9;
  --tariff-buhc: #73a8e0;

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: var(--color-900);
    --color-surface: var(--color-700);
    --color-text: var(--color-50);
    --color-muted: var(--color-200);
    --color-border: var(--color-500);
  }
}

/* Internationalization */
[data-i18n="weather"]::after       { content: 'Weather'; }
[data-i18n="transport"]::after     { content: 'Transport'; }
[data-i18n="temperature"]::after   { content: 'Indoor'; }
[data-i18n="electricity"]::after   { content: 'Electricity'; }
[data-i18n="tempo"]::after         { content: 'Tempo'; }
[data-i18n="loading"]::after       { content: 'Loading…'; }
[data-i18n="no-departures"]::after { content: 'No upcoming departures'; }
[data-i18n="humidity"]::after      { content: ' humidity'; }
[data-i18n="today"]::after         { content: 'Today'; }
[data-i18n="tomorrow"]::after      { content: 'Tomorrow'; }
:root { --content-unknown: 'unknown'; --content-blue: 'blue'; --content-white: 'white'; --content-red: 'red'; }

:root:lang(fr) [data-i18n="weather"]::after       { content: 'Météo'; }
:root:lang(fr) [data-i18n="transport"]::after     { content: 'Transport'; }
:root:lang(fr) [data-i18n="temperature"]::after   { content: 'Intérieur'; }
:root:lang(fr) [data-i18n="electricity"]::after   { content: 'Électricité'; }
:root:lang(fr) [data-i18n="tempo"]::after         { content: 'Tempo'; }
:root:lang(fr) [data-i18n="loading"]::after       { content: 'Chargement…'; }
:root:lang(fr) [data-i18n="no-departures"]::after { content: 'Aucun départ prévu'; }
:root:lang(fr) [data-i18n="humidity"]::after      { content: ' humidité'; }
:root:lang(fr) [data-i18n="today"]::after         { content: "Aujourd'hui"; }
:root:lang(fr) [data-i18n="tomorrow"]::after      { content: 'Demain'; }
:root:lang(fr) { --content-unknown: 'inconnu'; --content-blue: 'bleu'; --content-white: 'blanc'; --content-red: 'rouge'; }

[data-wmo] { --wmo-text: var(--content-unknown); }

[data-wmo="0"]  { --wmo-text: 'Clear'; }
[data-wmo="1"]  { --wmo-text: 'Mostly clear'; }
[data-wmo="2"]  { --wmo-text: 'Partly cloudy'; }
[data-wmo="3"]  { --wmo-text: 'Overcast'; }
[data-wmo="45"] { --wmo-text: 'Fog'; }
[data-wmo="48"] { --wmo-text: 'Rime fog'; }
[data-wmo="51"] { --wmo-text: 'Light drizzle'; }
[data-wmo="53"] { --wmo-text: 'Drizzle'; }
[data-wmo="55"] { --wmo-text: 'Dense drizzle'; }
[data-wmo="56"] { --wmo-text: 'Light freezing drizzle'; }
[data-wmo="57"] { --wmo-text: 'Freezing drizzle'; }
[data-wmo="61"] { --wmo-text: 'Light rain'; }
[data-wmo="63"] { --wmo-text: 'Rain'; }
[data-wmo="65"] { --wmo-text: 'Heavy rain'; }
[data-wmo="66"] { --wmo-text: 'Light freezing rain'; }
[data-wmo="67"] { --wmo-text: 'Freezing rain'; }
[data-wmo="71"] { --wmo-text: 'Light snow'; }
[data-wmo="73"] { --wmo-text: 'Snow'; }
[data-wmo="75"] { --wmo-text: 'Heavy snow'; }
[data-wmo="77"] { --wmo-text: 'Snow grains'; }
[data-wmo="80"] { --wmo-text: 'Light showers'; }
[data-wmo="81"] { --wmo-text: 'Showers'; }
[data-wmo="82"] { --wmo-text: 'Heavy showers'; }
[data-wmo="85"] { --wmo-text: 'Light snow showers'; }
[data-wmo="86"] { --wmo-text: 'Snow showers'; }
[data-wmo="95"] { --wmo-text: 'Thunderstorm'; }
[data-wmo="96"] { --wmo-text: 'Thunderstorm with hail'; }
[data-wmo="99"] { --wmo-text: 'Heavy thunderstorm'; }

:root:lang(fr) [data-wmo="0"]  { --wmo-text: 'Dégagé'; }
:root:lang(fr) [data-wmo="1"]  { --wmo-text: 'Plutôt dégagé'; }
:root:lang(fr) [data-wmo="2"]  { --wmo-text: 'Partiellement nuageux'; }
:root:lang(fr) [data-wmo="3"]  { --wmo-text: 'Couvert'; }
:root:lang(fr) [data-wmo="45"] { --wmo-text: 'Brouillard'; }
:root:lang(fr) [data-wmo="48"] { --wmo-text: 'Brouillard givrant'; }
:root:lang(fr) [data-wmo="51"] { --wmo-text: 'Bruine légère'; }
:root:lang(fr) [data-wmo="53"] { --wmo-text: 'Bruine'; }
:root:lang(fr) [data-wmo="55"] { --wmo-text: 'Bruine dense'; }
:root:lang(fr) [data-wmo="56"] { --wmo-text: 'Bruine verglaçante légère'; }
:root:lang(fr) [data-wmo="57"] { --wmo-text: 'Bruine verglaçante'; }
:root:lang(fr) [data-wmo="61"] { --wmo-text: 'Pluie légère'; }
:root:lang(fr) [data-wmo="63"] { --wmo-text: 'Pluie'; }
:root:lang(fr) [data-wmo="65"] { --wmo-text: 'Forte pluie'; }
:root:lang(fr) [data-wmo="66"] { --wmo-text: 'Pluie verglaçante légère'; }
:root:lang(fr) [data-wmo="67"] { --wmo-text: 'Pluie verglaçante'; }
:root:lang(fr) [data-wmo="71"] { --wmo-text: 'Neige légère'; }
:root:lang(fr) [data-wmo="73"] { --wmo-text: 'Neige'; }
:root:lang(fr) [data-wmo="75"] { --wmo-text: 'Forte neige'; }
:root:lang(fr) [data-wmo="77"] { --wmo-text: 'Neige en grains'; }
:root:lang(fr) [data-wmo="80"] { --wmo-text: 'Averses légères'; }
:root:lang(fr) [data-wmo="81"] { --wmo-text: 'Averses'; }
:root:lang(fr) [data-wmo="82"] { --wmo-text: 'Fortes averses'; }
:root:lang(fr) [data-wmo="85"] { --wmo-text: 'Averses de neige légères'; }
:root:lang(fr) [data-wmo="86"] { --wmo-text: 'Averses de neige'; }
:root:lang(fr) [data-wmo="95"] { --wmo-text: 'Orage'; }
:root:lang(fr) [data-wmo="96"] { --wmo-text: 'Orage avec grêle'; }
:root:lang(fr) [data-wmo="99"] { --wmo-text: 'Orage violent'; }

/* Reset & Base */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
}

/* Layout */
.dashboard {
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--space-md);
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) 0;
  margin-bottom: var(--space-sm);
}

.dashboard-title {
  font-size: var(--text-xl);
  font-weight: 600;
}

.dashboard-timestamp {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.widgets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

/* Widget System */
.widget {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}

.widget[data-type="weather"]     { grid-column: 1 / -1; }
.widget[data-type="temperature"] { grid-column: 1; }
.widget[data-type="transport"]   { grid-column: 2 / -1; }
.widget[data-type="electricity"] { grid-column: 1 / 4; }
.widget[data-type="tempo"]       { grid-column: 4; }

.widget-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-border);
  font-size: var(--text-base);
  font-weight: 500;
}

.widget-header h2 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: inherit;
  font-weight: inherit;
  flex: 1;
}

.widget[data-type="weather"]     .widget-header { border-color: var(--color-weather); }
.widget[data-type="transport"]   .widget-header { border-color: var(--color-transport); }
.widget[data-type="temperature"] .widget-header { border-color: var(--color-temperature); }
.widget[data-type="electricity"] .widget-header { border-color: var(--color-electricity); }
.widget[data-type="tempo"]       .widget-header { border-color: var(--color-tempo); }

.widget-content {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  font-size: var(--text-sm);
  color: var(--color-muted);
  min-height: 4rem;
}

/* Widget States */
.widget-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm);
  z-index: 10;
}

.widget-overlay > span {
  max-width: 100%;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  text-align: center;
  color: #fff;
  overflow: hidden;
  border: 1px solid #fff2;
  box-shadow: 0 0.1rem var(--space-sm) #0003;
}

.widget-overlay > span > span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
  hyphens: auto;
}

.widget-overlay[data-level="error"] > span   { background: var(--color-error); }
.widget-overlay[data-level="warning"] > span { background: var(--color-warning); }

.widget-overlay[data-level="warning"] {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}

.widget:has(.widget-badge:hover) .widget-overlay[data-level="warning"] {
  opacity: 1;
  pointer-events: auto;
}

.widget-loading {
  color: var(--color-muted);
  font-size: var(--text-sm);
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.widget-badge {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--color-warning);
  color: #fff;
  font-weight: 700;
}

/* Tooltip */
.has-tooltip:hover {
  transform-style: preserve-3d;
  z-index: 1;
}

.has-tooltip:hover::after {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 100%;
  margin-bottom: var(--space-xs);
  padding: 2px 6px;
  background: var(--color-text);
  color: var(--color-surface);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
}

/* Indoor Widget */
.indoor-widget {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  text-align: center;
}

.indoor-value {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  margin-top: auto;
  padding-top: var(--space-sm);
}

.indoor-number {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
}

.indoor-unit {
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-muted);
}

.indoor-humidity {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.indoor-location {
  margin-top: auto;
  padding-top: var(--space-sm);
  font-size: var(--text-xs);
  color: var(--color-muted);
  opacity: 0.8;
}

/* Transport Widget */
.transport-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  padding: var(--space-xs);
  gap: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: opacity 0.15s;
}

.transport-row:hover {
  opacity: 0.8;
}

.transport-row.refreshed {
  animation: flash 0.4s ease-out;
}

@keyframes flash {
  0%   { background: var(--color-border); }
  100% { background: transparent; }
}

.transport-info {
  flex: 1 1 auto;
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  min-width: 0;
}

.line-badge {
  width: 1.6rem;
  height: 1.3rem;
}

.transport-dest {
  opacity: 0.7;
}

.transport-dest::before {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: var(--space-sm);
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  content: "";
  vertical-align: 0.15em;
}

.transport-times {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  margin-left: auto;
}

.transport-time {
  font-weight: 600;
  white-space: nowrap;
}

.transport-time:empty {
  display: inline-block;
  width: 1em;
  height: 1em;
  clip-path: polygon(18% 0%, 32% 0%, 32% 75%, 41% 66%, 50% 75%, 59% 66%, 68% 75%, 68% 0%, 82% 0%, 82% 75%, 91% 66%, 100% 75%, 75% 100%, 50% 75%, 25% 100%, 0% 75%, 9% 66%, 18% 75%);
  background: currentColor;
  transform: translateY(0.15em);
}

.transport-time.has-tooltip:hover::after {
  content: attr(data-value);
}

.transport-time.scheduled {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--color-border);
  text-underline-offset: 0.2rem;
}

/* Tempo Widget */
.tempo-days {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-content: space-evenly;
  gap: var(--space-sm);
}

.tempo-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding: 0 var(--space-md);
}

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

.tempo-badge {
  min-width: 5.5rem;
  padding: 0.2rem 0.7rem;
  font-size: var(--text-base);
  text-transform: uppercase;
  color: #fff;
  border: 1px solid #fff2;
}

.tempo-badge[data-color="blue"]  { background: var(--tariff-buhp); &::after { content: var(--content-blue); } }
.tempo-badge[data-color="white"] { background: var(--tariff-bchp); &::after { content: var(--content-white); } }
.tempo-badge[data-color="red"]   { background: var(--tariff-rhp); &::after { content: var(--content-red); } }
.tempo-badge[data-color="unknown"] {
  padding: 0.1375rem 0.6375rem;
  background: transparent;
  color: var(--color-muted);
  border: 2px dashed var(--color-border);
  &::after { content: var(--content-unknown); }
}

/* Chart System */
[data-tariff="hp"]   { background: var(--tariff-hp);   --tariff-text: 'HP'; }
[data-tariff="hc"]   { background: var(--tariff-hc);   --tariff-text: 'HC'; }
[data-tariff="rhp"]  { background: var(--tariff-rhp);  --tariff-text: var(--content-red) ' HP'; }
[data-tariff="rhc"]  { background: var(--tariff-rhc);  --tariff-text: var(--content-red) ' HC'; }
[data-tariff="bchp"] { background: var(--tariff-bchp); --tariff-text: var(--content-white) ' HP'; }
[data-tariff="bchc"] { background: var(--tariff-bchc); --tariff-text: var(--content-white) ' HC'; }
[data-tariff="buhp"] { background: var(--tariff-buhp); --tariff-text: var(--content-blue) ' HP'; }
[data-tariff="buhc"] { background: var(--tariff-buhc); --tariff-text: var(--content-blue) ' HC'; }

.bar-group {
  display: flex;
  gap: var(--space-sm) var(--space-md);
  justify-content: space-evenly;
}

.bar {
  display: flex;
  overflow: visible;
}

.bar-seg,
.bar-ext {
  flex: none;
  min-width: 0;
  min-height: 0;
}

.bar-seg.has-tooltip:hover::after {
  content: attr(data-value) ' kWh';
}

.bar-ext {
  border: 1.5px dashed var(--color-border);
  background: transparent;
}

.bar-label {
  flex: none;
  overflow: visible;
  position: relative;
}

.bar-label::after {
  content: attr(data-value);
  position: absolute;
  white-space: nowrap;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-muted);
}

.bar-title {
  font-size: var(--text-sm);
  color: var(--color-muted);
  white-space: nowrap;
  text-transform: capitalize;
}

.bar-h {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm);
  align-items: center;
}

.bar-h .bar-item {
  display: contents;
}

.bar-h .bar-title {
  text-align: right;
}

.bar-h .bar {
  flex-direction: row;
  height: 1.5rem;
  padding-right: var(--space-xl);
}

.bar-h .bar-label {
  width: 0;
  height: 100%;
}

.bar-h .bar-label::after {
  left: var(--space-xs);
  top: 50%;
  transform: translateY(-50%);
}

.bar-h .bar-seg:has(+ span) {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.bar-h .bar-ext {
  border-left: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.bar-h-container {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-md);
}

.bar-v-container {
  height: 12rem;
  margin-bottom: var(--space-md);
}

.bar-v {
  flex-direction: row;
  align-items: stretch;
  padding: var(--space-md) var(--space-sm);
}

.bar-v .bar-item {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 10%;
  max-width: 3rem;
  position: relative;
}

.bar-v .bar-title {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translate(-50%, 100%);
}

.bar-v .bar {
  flex-direction: column-reverse;
  flex: 1;
  height: 100%;
}

.bar-v .bar-label {
  height: 0;
  width: 100%;
  text-align: center;
}

.bar-v .bar-label::after {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.bar-v .bar-seg:has(+ span) {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.bar-v .bar-ext {
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.bar-dim {
  opacity: 0.8;
}

.bar-dim .bar-label::after {
  font-weight: 400;
}

.bar-h .bar-dim {
  height: 1rem;
}

.bar-v .bar-dim {
  max-width: 36%;
}

.bar-label ~ .bar-label::after {
  font-weight: 400;
}

.bar-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs) var(--space-md);
  margin-top: var(--space-sm);
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.bar-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.bar-legend-swatch {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 2px;
}

.bar-legend-label {
  background: transparent;
  text-transform: capitalize;
}

.bar-legend-label::after {
  content: var(--tariff-text);
}

/* Current Weather */
.weather-current {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.weather-current-icon {
  width: 2rem;
  height: 2rem;
  background: var(--icon) center / contain no-repeat;
}

.weather-current-temp {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
}

.weather-current-feels {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.weather-current-feels::before { content: '('; }
.weather-current-feels::after { content: ')'; }

.weather-current-text::after {
  content: var(--wmo-text, '');
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* Daily Forecast */
.forecast {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.forecast-day {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-xs);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  text-align: center;
}

.forecast-name {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text);
  text-transform: capitalize;
}

.forecast-icon {
  width: 1.5rem;
  height: 1.5rem;
  background: var(--icon) center / contain no-repeat;
}

.forecast-temps {
  display: flex;
  gap: var(--space-xs);
  font-size: var(--text-xs);
}

.forecast-max {
  font-weight: 600;
  color: var(--color-text);
}

.forecast-min {
  color: var(--color-muted);
}

/* Graph System */
.graph {
  --graph-height: 10rem;
  position: relative;
  height: var(--graph-height);
  margin-left: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.graph-scroll {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--space-md));
  overflow-x: auto;
  overflow-y: hidden;
}

.graph-area {
  position: relative;
  height: var(--graph-height);
  min-width: 100%;
  width: fit-content;
  overflow-x: clip;
}

.graph-sky {
  position: absolute;
  inset: 0;
  opacity: 0.25;
}

.graph-fill {
  position: absolute;
  inset: 0;
  background: var(--color-weather);
  opacity: 0.3;
}

.graph-now {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-weather);
  opacity: 0.7;
  pointer-events: none;
  z-index: 2;
}

.graph-line-y {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid var(--color-border);
  opacity: 0.4;
  pointer-events: none;
}

.graph-line-y > span {
  position: absolute;
  right: 100%;
  top: 0;
  transform: translateY(-50%);
  margin-right: var(--space-xs);
  font-size: var(--text-xs);
  color: var(--color-muted);
  line-height: 1;
}

.graph-segments {
  position: relative;
  display: flex;
  height: 100%;
  z-index: 1;
}

.graph-seg {
  flex: 1 0 0.4rem;
  position: relative;
}

.graph-seg:hover {
  box-shadow: inset 1px 0 0 0 var(--color-muted);
}

.graph-seg.has-tooltip:hover::after {
  content: attr(data-value);
  left: 0;
  transform: none;
  bottom: auto;
  top: 0;
  margin: 0;
  margin-top: var(--space-xs);
  z-index: 10;
  padding-left: calc(1.2rem + 6px);
  background-image: var(--icon);
  background-size: 1rem 1rem;
  background-position: 4px center;
  background-repeat: no-repeat;
}

/* WMO Weather Codes */
[data-wmo]            { --icon: url('/static/icon/unknown.svg'); }
[data-wmo="0"]        { --icon: url('/static/icon/clear_day.svg'); }
[data-wmo="0"].night  { --icon: url('/static/icon/clear_night.svg'); }
[data-wmo="1"]        { --icon: url('/static/icon/mostly_clear_day.svg'); }
[data-wmo="1"].night  { --icon: url('/static/icon/mostly_clear_night.svg'); }
[data-wmo="2"]        { --icon: url('/static/icon/partly_cloudy_day.svg'); }
[data-wmo="2"].night  { --icon: url('/static/icon/partly_cloudy_night.svg'); }
[data-wmo="3"]        { --icon: url('/static/icon/overcast.svg'); }
[data-wmo="45"]       { --icon: url('/static/icon/fog.svg'); }
[data-wmo="48"]       { --icon: url('/static/icon/rime_fog.svg'); }
[data-wmo="51"]       { --icon: url('/static/icon/drizzle_light.svg'); }
[data-wmo="53"]       { --icon: url('/static/icon/drizzle.svg'); }
[data-wmo="55"]       { --icon: url('/static/icon/drizzle_heavy.svg'); }
[data-wmo="56"]       { --icon: url('/static/icon/freezing_drizzle_light.svg'); }
[data-wmo="57"]       { --icon: url('/static/icon/freezing_drizzle.svg'); }
[data-wmo="61"]       { --icon: url('/static/icon/rain_light.svg'); }
[data-wmo="63"]       { --icon: url('/static/icon/rain.svg'); }
[data-wmo="65"]       { --icon: url('/static/icon/rain_heavy.svg'); }
[data-wmo="66"]       { --icon: url('/static/icon/freezing_rain_light.svg'); }
[data-wmo="67"]       { --icon: url('/static/icon/freezing_rain.svg'); }
[data-wmo="71"]       { --icon: url('/static/icon/snow_light.svg'); }
[data-wmo="73"]       { --icon: url('/static/icon/snow.svg'); }
[data-wmo="75"]       { --icon: url('/static/icon/snow_heavy.svg'); }
[data-wmo="77"]       { --icon: url('/static/icon/snow_grains.svg'); }
[data-wmo="80"]       { --icon: url('/static/icon/rain_showers_light_day.svg'); }
[data-wmo="80"].night { --icon: url('/static/icon/rain_showers_light_night.svg'); }
[data-wmo="81"]       { --icon: url('/static/icon/rain_showers_day.svg'); }
[data-wmo="81"].night { --icon: url('/static/icon/rain_showers_night.svg'); }
[data-wmo="82"]       { --icon: url('/static/icon/rain_showers_heavy_day.svg'); }
[data-wmo="82"].night { --icon: url('/static/icon/rain_showers_heavy_night.svg'); }
[data-wmo="85"]       { --icon: url('/static/icon/snow_showers_light_day.svg'); }
[data-wmo="85"].night { --icon: url('/static/icon/snow_showers_light_night.svg'); }
[data-wmo="86"]       { --icon: url('/static/icon/snow_showers_day.svg'); }
[data-wmo="86"].night { --icon: url('/static/icon/snow_showers_night.svg'); }
[data-wmo="95"]       { --icon: url('/static/icon/thunderstorm.svg'); }
[data-wmo="96"]       { --icon: url('/static/icon/thunderstorm_hail.svg'); }
[data-wmo="99"]       { --icon: url('/static/icon/thunderstorm_heavy.svg'); }

.graph-tick {
  position: absolute;
  top: 100%;
  left: 0;
  height: var(--space-md);
  padding-left: var(--space-xs);
  font-size: var(--text-xs);
  color: var(--color-muted);
  white-space: nowrap;
  text-transform: capitalize;
  line-height: 1.6;
  pointer-events: none;
}

.graph-seg:not(.main) > .graph-tick::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 5px;
  background: var(--color-border);
  opacity: 0.5;
}

.graph-seg.main > .graph-tick::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: calc(var(--space-md) + var(--graph-height));
  border-left: 1px dashed var(--color-border);
  opacity: 0.5;
}

/* Responsive Design */
@media (max-width: 700px) {
  .widgets {
    grid-template-columns: 1fr;
  }

  .widget {
    grid-column: 1 !important;
  }

  .widget[data-type="weather"]     { order: 1; }
  .widget[data-type="transport"]   { order: 2; }
  .widget[data-type="temperature"] { order: 3; }
  .widget[data-type="tempo"]       { order: 4; }
  .widget[data-type="electricity"] { order: 5; }

  .bar-v-container {
    height: 10rem;
  }
}

@media (max-width: 400px) {
  .bar-v-container {
    height: 8rem;
  }

  .bar-v .bar-title {
    font-size: var(--text-xs);
  }
}

@media (min-width: 700px) {
  .tempo-day {
    margin-top: -1.5rem;
  }
}