main{
  display:grid;
  gap:16px;
}

/* mobil = vše pod sebou */
@media (min-width:1100px){
  main{
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "filter filter filter"
      "table  chart1  chart2";
    align-items:start;
  }

  /* pořadí .default-box v tvém HTML */
  main > .default-box:nth-of-type(1){ grid-area:filter; }
  main > .default-box:nth-of-type(2){ grid-area:table; }
  main > .default-box:nth-of-type(3){ grid-area:chart1; }
  main > .default-box:nth-of-type(4){ grid-area:chart2; }
}

/* tabulka nesmí roztahovat box – bude mít svůj scroll */
#msTables .table-wrap{
  overflow:auto;
  max-width:100%;
}

/* canvas ať se natahuje do šířky */
#msChartCanvas, #msChartRolling{
  display:block;
  width:100%;
}


/* fallback pro prohlížeče bez :has() – můžeš přidat class "ms-currency-row" na ten form-row s měnami */
@media (min-width:1100px){
  #monthlySummaryFilter .ms-currency-row{
    grid-column: 4 / 5;
    margin:0;
  }
}


.table-wrap{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}

.monthly-summary-table{
  width:max-content;
  min-width:100%;
  border-collapse:separate;
  border-spacing:0;
  table-layout:auto;
}

.monthly-summary-table th,
.monthly-summary-table td{
  padding:3px 12px;
  border-bottom-width:1px;
  border-bottom-style:solid;
  white-space:nowrap;
  vertical-align:top;
  text-align:right;
}

.monthly-summary-table th{
  text-align:center;
  font-weight:600;
}

.monthly-summary-table thead th{
  position:sticky;
  top:0;
  z-index:4;
  border-bottom-width:1px;
  border-bottom-style:solid;
}

.monthly-summary-table thead th:first-child,
.monthly-summary-table tbody th{
  position:sticky;
  left:0;
  z-index:5;
}

.monthly-summary-table .ms-total-row th,
.monthly-summary-table .ms-total-row td{
  font-weight:700;
}

.monthly-summary-table .ms-avg-row th,
.monthly-summary-table .ms-avg-row td{
  font-weight:700;
}

.ms-cell-line{
  display:block;
  line-height:1.35;
}

.table-wrap::-webkit-scrollbar{ height:10px; }
.table-wrap::-webkit-scrollbar-thumb{ border-radius:10px; }
.table-wrap::-webkit-scrollbar-track{ border-radius:10px; }

.currency-button-list{
   text-align: center;
}

.filter-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(100px,1fr));
  gap:10px;
  margin-top:6px;
}

.filter-grid .form-row{ margin:0; }
.filter-grid .default-select{ width:100%; }

.filter-group-currency,
.filter-group-convert{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap: nowrap;
}

.filter-group-convert{
  border-radius: 15px;
  padding: 5px;
}