/* #start .container */
#exportCsvBtn {
    color: white;
    background-color: #A30D4B;
    padding: 10px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 5px 5px 0px #F8675E;
    transition: all 0.3s ease-in-out;
}

.filters {
    padding-top:2rem;
    gap: 1rem;
}
select {
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
}

.container {
    display: flex;
    flex-direction: column; /* Default to column on mobile */
  }

@media (min-width: 768px) {
    .container {
      flex-direction: row; /* Change to row direction */
    }
} 

/* ==== Sidebar ==== */

.sidebar {
    flex: 1; /* Of een vaste breedte: bijvoorbeeld 200px */
    padding: 20px;
    box-sizing: border-box; /* Zorg ervoor dat padding niet de breedte beïnvloedt */
    height: 100%; /* Zorg ervoor dat de inhoudsopgave de volledige hoogte van de container inneemt */
    /*background-color: #f5f5f5; */
    background-color: #1F2937;
    color: #fff;
    border-right: 2px solid #eee;
  }

.sidebar h2,
.sidebar h3,
.sidebar a {
    color: #fff;
}

/* Full-width column on mobile */
.main, .sidebar {
    width: 100%;
}

    /* Tablet and up: Switch to two columns */
  @media (min-width: 768px) {

    .sidebar {
      width: 25%;  /* Sidebar takes 25% width */
      position: fixed; /* Fix the sidebar */
      top: 0;          /* Align it to the top of the page */
      left: 0;
      height: 100vh;   /* Full viewport height */
      overflow-y: auto; /* Add scrolling if sidebar content overflows */
    }
  }

    /* Logo */
/*    .pa_logo {
        padding: 2em 2em 2em 0;
    }*/

    .logo {
        flex: 0 0 30%; /* Neemt 30% van de beschikbare ruimte in */
        max-width: 100%; /* Zorgt ervoor dat het logo niet buiten zijn container groeit */
    }
    .happy {
        width: 17em;
        flex: 0 0 30%;
    }
    .contactinfo {
        font-size: 0.8em;
    }


    /* Report nav */
    .sidemenu {
        padding-left: 0;
        list-style: none;
    }
    .sidebar h3 {
        padding-top: 1em;
    }
    .pa_logo {
        background: #fff;
    }

    .sidebar a {
      text-decoration: none;
      padding: 4px 0;
      display: block;
      transition: background 0.3s ease;
    }

    .sidebar a.active {
      border-bottom: 3px solid #fff;
      font-weight: bold;
    }

/* ===== Main ===== */

   

/* .box  contaner voor de hoofdinhoud */

.main {
   
    padding:1.5em;
}

 @media (min-width: 768px) {
        .main {
          width: 75%;            /* Main content takes 75% width */
          margin-left: 25%;      /* Offset the main content to make room for the sidebar */
          max-height: 100vh;     /* Constrain main content to viewport height */
        }
    }
 @media (min-width: 1400px) {
        .main {
          width: 75%; 
          margin-left: 25%;           /* Main content takes 75% width */
          margin-left: 20%;      /* Offset the main content to make room for the sidebar */
          max-height: 100vh;     /* Constrain main content to viewport height */
        }
    }

/* Section .top metadata rapport */

.text {
    width: 75%;
}

.header-text {
    flex: 1; /* Neemt de resterende 70% van de beschikbare ruimte in */

}

#summary .text {
    padding-right: 2em;
}
.illustration {
    flex: 0 0 30%; /* neemt altijd 30% van de ruimte in */
}


/* Sections #summary */

.sc-table dt:last-of-type,
.sc-table dd:last-of-type {
    margin-top: .5em;
    }
#summary table,
#summary dl {
    padding-top: 3em;
}

#metadata {
    display: flex;
    padding: 2em 0;
}
.column {
    flex-grow: 1;
}

/* Sections #scope */


/* Sections #explanation */


/* Sections #sample */

    .sample-list {
        padding: 0;
        margin: 0;
    }

    .sample-list li {
        list-style: none;
        padding: 1.5em 0;
        counter-increment: sample-list;
        display: flex;
        flex-wrap: wrap;
    }

    .sample-list li strong::before {
        content: counter(sample-list) ": ";
    }

    .sample-list li:not(:first-child) {
        border-top: 1px solid lightgrey;
    }

    .sample-list a {
        font-family: Monaco, monospace;
        font-size: .75em;
        text-decoration: none;
        color: #474747;
        display: block;
        margin: .5em 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 90vw;
        width: 35em;
    }
    .sample-list img {
        margin-right: 2em;
        border: 1px solid #ccc;
        box-shadow: 0px 0px 8px -1px #ccc;
        max-width: 12em;
        max-height: 100%;
    }

/* Sections #issues */

.meta {
  display: flex;
  justify-content: space-between; /* verdeelt de spans over de hele breedte */
  align-items: start;           /* verticaal centreren */
}

.meta span {
  flex: 1;                       /* elk span neemt gelijke ruimte */
  text-align: left;            /* tekst in het midden */
}

.issue {
    padding: 1em 0em 1em;
    margin-bottom: 2em;
}

.issue h3 {
    padding-top: 10px;
    border-top: 2px solid #aaa;
    padding-top:20px;
}

.issue-content {
    padding: 10px;
    border-left: 2px solid #ddd;
}

 /* Charts */
    .charts {
      display: flex;
      flex-wrap: wrap;         /* laat ze netjes afbreken bij kleine schermen */
      justify-content: center;
      align-items: flex-start;
      gap: 30px;
      margin-bottom: 30px;
    }

    figure.chart {
      width: 380px;
      height: 280px;
      max-width: 380px;
      max-height: 280px;
      margin: 0;
    }

    figure.chart canvas {
      width: 100% !important;
      height: 100% !important;
      display: block;
      object-fit: contain;
    }

    figure.chart figcaption {
      margin-top: 8px;
      font-size: 0.9em;
      color: #333;
      line-height: 1.4;
    }

    /* WCAG lijst */
    .wcag-summary {
      margin-top: 30px;
      margin-bottom: 30px;
    }
    .wcag-summary h4 {
      margin-bottom: 10px;
    }
    .wcag-summary .wcag-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      list-style: none;
      padding: 0;
    }
    .wcag-summary .wcag-list li {
      background-color: #f0f0f0;
      border: 1px solid #ddd;
      border-radius: 12px;
      padding: 4px 10px;
      font-size: 0.9em;
      font-family: monospace;
    }

    /* Impact-badges basisstijl */
   .charts .impact {
        display: inline;
        background-clip: padding-box;
        padding: 1px 6px;
        border-radius: 4px;
        font-weight: 600;
        color: #fff;
        line-height: 1.2;
        vertical-align: middle;
        box-decoration-break: clone;
    }