body {
  margin: 0;
  font-family: sans-serif;
  background-color: #1e1e1e;
  color: #eee;
  padding: 1em;
}

h1 {
  text-align: center;
  color: #ccc;
  margin-bottom: 1em;
}

.dashboard {
  display: flex;
  flex-direction: column;
  gap: 1em;
  max-width: 1200px;
  margin: 0 auto;
}

.row {
  display: flex;
  gap: 1em;
}

/* Bred vänstersida */
iframe.wide {
  flex: 4;
  height: 300px;
  border: none;
  border-radius: 8px;
}

/* Smal högersida */
.column-narrow {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.5em;
  /* height: 300px; */
}

.column-narrow iframe {
  height: 100px; /* Lägg till fast höjd per iframe */
  /* flex: 1; */
  border: none;
  border-radius: 8px;
}

/* Lufttryck tar två kolumner */
.row.full iframe {
  width: 100%;
  height: 300px;
  border: none;
  border-radius: 8px;
}

/* Två stora paneler som fyller bredden */
.split {
  display: flex;
  gap: 1em;
  width: 100%;
}

.split iframe {
  flex: 1 1 0;      /* tvingar två lika breda kolumner som fyller raden */
  width: 100%;
  height: clamp(380px, 42vw, 600px);  /* inte "låga", växer med bredden */
  border: none;
  border-radius: 8px;
}

/* (valfritt) Stapla på smal skärm */
@media (max-width: 900px) {
  .split { flex-direction: column; }
  .split iframe { height: 420px; }
}