body {
  outline: 6px solid red !important;
}

/* Mobil/laptop-smal: stack alt i én kolonne så kart ikke blir "skygget" */
@media (max-width: 980px) {

  /* === MOBIL: EKTE FULL BREDDE (viewport), ikke bare 100% av container === */
  .container,
  .container-fluid {
    max-width: 100vw !important;
    width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Main wrapper (viktig: nuller ALL padding, pga inline padding:12px i Python) */
  .strom-page {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important; /* <-- NYTT: fjerner topp/bunn også */
  }

  /* Fjern Bootstrap "gutter" som gir hvite kanter */
  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .col, [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 1 kolonne: kart på topp, tabeller under */
  .strom-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    min-width: 0 !important;
  }

  /* Slipp desktop grid-låsing */
  .strom-map-col,
  .strom-side-col,
  .strom-scatter-col {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    width: 100% !important;     /* layout-flyt */
    min-width: 0 !important;
  }

  /* Kart-kolonnen: fjern også padding (ikke bare margin) */
  .strom-map-col {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;

    /* Kartet full bredde (viewport) */
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* Plotly må også få full bredde (viewport) */
  .strom-map-graph,
  .strom-map-graph > div,
  .strom-map-graph .js-plotly-plot,
  .strom-map-graph .plot-container,
  .strom-map-graph .svg-container {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
  }

  /* Hvis du bruker 100vw: sentrer mot viewport så parent-padding ikke klemmer */
  .strom-map-col,
  .strom-map-graph {
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  /* Mobilvennlig høyde */
  .strom-map-graph {
    height: 58vh !important;
    min-height: 380px !important;
  }

  /* Skjul legend på mobil */
  .strom-map-graph .legend {
    display: none !important;
  }

  /* Plotly modebar (de svake ikonene) – valgfritt å skjule */
  .modebar, .modebar-container {
    display: none !important;
  }

  /* Tabeller skal ikke "sprenge" bredden */
  .dash-table-container,
  .dash-spreadsheet-container {
    width: 100% !important;
    max-width: 100% !important;
  }

  .strom-side-col { margin-top: 10px; }
  .strom-scatter-col { margin-top: 10px; }
}

/* Veldig små skjermer */
@media (max-width: 420px) {
  .strom-map-graph {
    height: 52vh !important;
    min-height: 340px !important;
  }
}

/* (Valgfritt) litt "hover" for start-knappen på intro, hvis du vil */
.strom-start-btn:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}