/* Berichte / Management Report — responsive screen preview only.
   Print and PDF keep the existing A4 rules from styles.css. */
@media screen {
  #reportsView,
  #reportsView .report-layout,
  #reportsView .report-builder,
  #reportsView .report-paper,
  #reportsView .report-section {
    min-width: 0;
  }

  #reportsView {
    container: reports / inline-size;
  }

  /* Configuration and preview are deliberate full-width rows. This also
     prevents the mobile toggle from changing desktop grid placement. */
  #reportsView .report-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    gap: 22px;
    align-items: start;
  }

  #reportsView .mobile-section-toggle {
    display: none !important;
  }

  #reportsView .report-builder {
    grid-column: 1;
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
    width: 100%;
    max-height: none;
    overflow: visible;
  }

  #reportsView .report-builder .report-block {
    min-width: 0;
    margin: 0;
  }

  #reportsView .report-builder > .primary-btn {
    grid-column: 1 / -1;
  }

  #reportsView .report-filter-grid,
  #reportsView .template-grid,
  #reportsView .date-pair,
  #reportsView .section-checks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }

  #reportsView .template-grid button,
  #reportsView .report-builder select {
    min-width: 0;
    width: 100%;
  }

  #reportsView .report-paper {
    grid-column: 1;
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    overflow: visible;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.55;
  }

  #reportsView .report-paper,
  #reportsView .report-paper p,
  #reportsView .report-paper span,
  #reportsView .report-paper strong,
  #reportsView .report-paper small,
  #reportsView .report-paper th,
  #reportsView .report-paper td {
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
  }

  #reportsView .report-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, auto);
    gap: 24px;
    align-items: start;
  }

  #reportsView .report-header > div {
    min-width: 0;
  }

  #reportsView .report-header > div:last-child {
    width: min(240px, 100%);
    min-width: 190px;
    font-size: 13px;
  }

  #reportsView .report-header h1 {
    font-size: 26px;
    line-height: 1.2;
  }

  #reportsView .report-header p,
  #reportsView .report-header small {
    font-size: 13px;
  }

  #reportsView .report-section h2 {
    font-size: 17px !important;
    line-height: 1.35;
  }

  #reportsView .management-summary {
    width: 100%;
    max-width: none;
    font-size: 14px;
    line-height: 1.65;
  }

  #reportsView .report-kpis {
    display: grid;
    grid-template-columns: minmax(150px, 1fr);
    gap: 10px;
  }

  #reportsView .report-kpis > div {
    min-width: 0;
  }

  #reportsView .report-kpis span {
    font-size: 13px;
    line-height: 1.35;
  }

  #reportsView .report-kpis strong {
    font-size: 20px;
    line-height: 1.25;
  }

  #reportsView .report-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  #reportsView .report-table-wrap table {
    width: 100%;
    min-width: 1000px;
    table-layout: auto;
  }

  #reportsView .report-table-wrap th,
  #reportsView .report-table-wrap td {
    font-size: 13px !important;
    line-height: 1.45;
    padding: 9px 10px !important;
  }

  #reportsView .report-table-wrap th {
    white-space: nowrap;
  }

  /* The seven-column defects table receives readable working widths. */
  #reportsView .report-table-wrap:has(th:nth-child(7):last-child) th:nth-child(1),
  #reportsView .report-table-wrap:has(th:nth-child(7):last-child) td:nth-child(1) { min-width: 130px; }
  #reportsView .report-table-wrap:has(th:nth-child(7):last-child) th:nth-child(2),
  #reportsView .report-table-wrap:has(th:nth-child(7):last-child) td:nth-child(2) { min-width: 260px; }
  #reportsView .report-table-wrap:has(th:nth-child(7):last-child) th:nth-child(3),
  #reportsView .report-table-wrap:has(th:nth-child(7):last-child) td:nth-child(3) { min-width: 200px; }
  #reportsView .report-table-wrap:has(th:nth-child(7):last-child) th:nth-child(4),
  #reportsView .report-table-wrap:has(th:nth-child(7):last-child) td:nth-child(4) { min-width: 140px; }
  #reportsView .report-table-wrap:has(th:nth-child(7):last-child) th:nth-child(6),
  #reportsView .report-table-wrap:has(th:nth-child(7):last-child) td:nth-child(6) { min-width: 120px; }
  #reportsView .report-table-wrap:has(th:nth-child(7):last-child) th:nth-child(7),
  #reportsView .report-table-wrap:has(th:nth-child(7):last-child) td:nth-child(7) { min-width: 110px; }
}

@media screen {
  @container reports (min-width: 520px) {
    #reportsView .report-kpis {
      grid-template-columns: repeat(2, minmax(150px, 1fr));
    }
  }

  @container reports (min-width: 900px) {
    #reportsView .report-kpis {
      grid-template-columns: repeat(4, minmax(150px, 1fr));
    }
  }

  @container reports (max-width: 760px) {
    #reportsView .report-header {
      grid-template-columns: minmax(0, 1fr);
    }

    #reportsView .report-header > div:last-child {
      width: auto;
      min-width: 0;
      margin-top: 0;
      text-align: left;
    }

    #reportsView .report-filter-grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }
}

@media screen and (max-width: 760px) {
  #reportsView .mobile-section-toggle {
    display: flex !important;
  }

  #reportsView .report-builder {
    grid-template-columns: minmax(0, 1fr);
  }

  #reportsView .report-builder > .primary-btn {
    grid-column: auto;
  }

  #reportsView .template-grid,
  #reportsView .date-pair,
  #reportsView .section-checks {
    grid-template-columns: minmax(0, 1fr);
  }

  #reportsView .report-paper {
    padding: 18px !important;
  }
}