.meals-view{
  padding:20px;
  height:100%;
  display:flex;
  flex-direction:column;
}

.meal-table-container{
  background:var(--surface);
  border-radius:20px;
  padding:20px;
  border:1px solid var(--border);
  overflow-y:auto;
  flex:1;
  min-height:0;
}

#meal-table th:nth-child(1),
#meal-table td:nth-child(1),
#meal-table th:nth-child(2),
#meal-table td:nth-child(2),
#meal-table th:nth-child(4),
#meal-table td:nth-child(4){
  white-space:nowrap;
}
#meal-table th:nth-child(3),
#meal-table td:nth-child(3){
  width:100%;
}

#meal-table th,
#meal-table td{
  padding:12px 8px;
  text-align:left;
  border-bottom: none;
}

#meal-table th{
  font-weight:600;
}

#meal-table tr:last-child td{
  border-bottom:none;
}
.daily-total-row{
  background: var(--background);
  font-weight: 700;
}

.daily-total-row td{
  border-top: 2px solid var(--background);
}


.meal-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.5);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1000;
}

.meal-modal.hidden{
  display:none;
}

.meal-modal-content{
  background:var(--surface);
  border-radius:20px;
  padding:30px;
  width:75vw;
  position:relative;
}

.meal-modal-content h2{
  font-size:36px;
  margin-top:0;
}

.meal-modal-content p{
  font-size:32px;
  margin:8px 0;
}

.close-modal{
  position:absolute;
  top:10px;
  right:15px;
  border:none;
  background:none;
  font-size:28px;
}