/**
 * Delt mobiloptimalisering for alle eksempelsider
 * Inkluder denne filen i alle HTML-sider under /eksempler/
 *
 * Fikser:
 * - Horisontal overflow på body/html
 * - A4-rapportsider (fit-to-width på mobil)
 * - Tabeller med intern scroll
 * - Grid-layouts
 * - Bilder og media
 * - Lange ord/URLer
 */

/* ==========================================================================
   BASE: Forhindre horisontal overflow på body-nivå
   ========================================================================== */

html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Sikre at alle elementer respekterer viewport */
*, *::before, *::after {
  max-width: 100%;
}

/* Unntak for elementer som skal ha intern scroll */
.table-wrapper *,
.table-scroll *,
.benchmark-table *,
.overflow-scroll *,
table * {
  max-width: none;
}

/* ==========================================================================
   BILDER OG MEDIA: Responsiv skalering
   ========================================================================== */

img, svg, video, canvas, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

/* Unngå at SVG-ikoner blir for store */
svg:not([width]):not([class*="chart"]) {
  max-height: 100%;
}

/* ==========================================================================
   TEKST: Ordbryting for lange ord og URLer
   ========================================================================== */

body {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* Pre og code-blokker */
pre, code {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* Tabellceller skal ikke bryte ukontrollert */
td, th {
  overflow-wrap: normal;
  word-break: normal;
}

/* ==========================================================================
   TABELLER: Responsiv tabell-wrapper med intern scroll
   ========================================================================== */

/* Automatisk wrapper for alle tabeller */
.table-wrapper,
.table-scroll,
.benchmark-table {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1rem;
}

/* Sikre at tabeller kan scrolle horisontalt */
.table-wrapper table,
.table-scroll table,
.benchmark-table table {
  width: auto;
  min-width: 100%;
}

/* Visuell indikator for scrollbar på touch-enheter */
.table-wrapper::-webkit-scrollbar,
.table-scroll::-webkit-scrollbar,
.benchmark-table::-webkit-scrollbar {
  height: 8px;
}

.table-wrapper::-webkit-scrollbar-track,
.table-scroll::-webkit-scrollbar-track,
.benchmark-table::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.table-wrapper::-webkit-scrollbar-thumb,
.table-scroll::-webkit-scrollbar-thumb,
.benchmark-table::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.table-wrapper::-webkit-scrollbar-thumb:hover,
.table-scroll::-webkit-scrollbar-thumb:hover,
.benchmark-table::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* ==========================================================================
   MOBILE: Media queries for mobilvisning
   ========================================================================== */

@media screen and (max-width: 480px) {
  /* Reduser padding på små skjermer */
  body {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .container,
  .rapport-container,
  .content-wrapper,
  main {
    padding-left: 8px;
    padding-right: 8px;
  }

  /* Fjern faste bredder på A4-sider */
  .rapport-page,
  .page,
  .a4-page,
  [class*="page"] {
    max-width: 100% !important;
    width: 100% !important;
    min-height: auto !important;
    padding: 16px !important;
    margin: 0 auto 16px !important;
    box-sizing: border-box;
  }

  /* Grid-layouts - stack på mobil */
  .metrics-grid,
  .kpi-grid,
  .rapport-kpi-grid,
  .grid,
  [class*="-grid"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* To-kolonner grid for små KPI-kort */
  .rapport-kpi-grid,
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Downloads-grid: Sentrert på mobil */
  .downloads-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 16px !important;
  }

  .downloads-grid .download-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: auto !important;
  }

  /* Persona-grid til én kolonne */
  .persona-grid {
    grid-template-columns: 1fr !important;
  }

  /* Navigasjon */
  .nav-header {
    flex-direction: column;
    gap: 12px;
    padding: 12px !important;
    top: 48px;
  }

  .nav-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px !important;
  }

  .nav-link {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }

  /* PDF-knapp full bredde */
  .pdf-button {
    width: 100%;
    justify-content: center;
  }

  /* Rapport-overskrifter */
  .rapport-header {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .rapport-meta {
    text-align: center !important;
  }

  /* Tabeller - sikre scroll */
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
  }

  /* Reduser font-størrelser */
  .rapport-kpi-value {
    font-size: 18pt !important;
  }

  h1 {
    font-size: 1.5rem !important;
  }

  h2 {
    font-size: 1.2rem !important;
  }

  /* Charts - mindre høyde */
  .chart-container,
  .line-chart-container {
    height: 150px !important;
  }

  /* Disclaimer-banner */
  .disclaimer-banner {
    padding: 10px 12px !important;
    font-size: 12px !important;
  }
}

@media screen and (max-width: 375px) {
  /* Ekstra små skjermer (iPhone SE) */

  .rapport-page,
  .page,
  .a4-page {
    padding: 12px !important;
  }

  /* KPI-grid til én kolonne på veldig små skjermer */
  .rapport-kpi-grid,
  .kpi-grid {
    grid-template-columns: 1fr !important;
  }

  .rapport-kpi-value {
    font-size: 16pt !important;
  }

  .nav-link {
    padding: 6px 10px !important;
    font-size: 11px !important;
  }
}

/* ==========================================================================
   A4 RAPPORTER: Fit-to-width skalering på mobil
   ========================================================================== */

@media screen and (max-width: 800px) {
  /* Fjern A4-dimensjoner på mobil */
  .rapport-page,
  .page,
  .a4-page,
  [style*="210mm"],
  [style*="297mm"] {
    max-width: 100% !important;
    min-height: auto !important;
    width: 100% !important;
  }

  /* Container for rapport */
  .rapport-container {
    padding: 12px !important;
  }
}

/* ==========================================================================
   PRESENTASJONS-SLIDES: Responsive scaling
   ========================================================================== */

@media screen and (max-width: 800px) {
  .slide-container,
  .slides-wrapper {
    width: 100%;
    overflow-x: auto;
  }

  .slide {
    transform-origin: top left;
    min-width: auto !important;
  }
}

/* ==========================================================================
   CTA / KNAPPER: Full bredde på mobil
   ========================================================================== */

@media screen and (max-width: 480px) {
  .cta-button,
  .btn,
  .button,
  .export-btn,
  [class*="btn"],
  [class*="button"],
  a[download] {
    display: block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }

  /* Unntak for inline-knapper */
  .btn-inline,
  .button-inline {
    display: inline-block;
    width: auto;
  }
}

/* ==========================================================================
   BACK-LINK / BREADCRUMB
   ========================================================================== */

@media screen and (max-width: 480px) {
  .back-link,
  .breadcrumb {
    font-size: 13px;
    padding: 8px 12px;
  }
}

/* ==========================================================================
   SPESIFIKKE FIKSER FOR KJENTE PROBLEMER
   ========================================================================== */

/* Benchmark-tabeller med min-width */
@media screen and (max-width: 960px) {
  .benchmark-table table {
    min-width: 600px;
  }
}

@media screen and (max-width: 480px) {
  .benchmark-table table {
    min-width: 450px;
  }
}

/* Fjern white-space: nowrap på mobil der det skaper problemer */
@media screen and (max-width: 480px) {
  td.nowrap,
  .nowrap {
    white-space: normal !important;
  }
}

/* Fikser for filters/dropdowns */
@media screen and (max-width: 480px) {
  .filters {
    flex-direction: column;
  }

  .filter-group {
    width: 100%;
    min-width: 100% !important;
  }
}

/* Chart-grids */
@media screen and (max-width: 640px) {
  .charts-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   PRINT: Behold A4-format for utskrift
   ========================================================================== */

@media print {
  /* Tilbakestill mobile overrides for print */
  .rapport-page,
  .page,
  .a4-page {
    max-width: 210mm !important;
    min-height: 297mm !important;
    padding: 40px !important;
    margin: 0 auto !important;
  }

  .rapport-kpi-grid,
  .kpi-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Skjul mobile-only elementer */
  .mobile-only {
    display: none !important;
  }
}