/* demo v3.1.7: horizontal daily trend chart + mobile RWD normalization + fixed favorite form */
.horizontal-bar-chart{
  display:grid;
  align-items:stretch;
  gap:10px;
  min-height:220px;
  padding-top:4px;
}
.horizontal-bar-item{
  display:grid;
  grid-template-columns:56px minmax(0,1fr) 72px;
  gap:10px;
  align-items:center;
  text-align:left;
  min-width:0;
}
.horizontal-bar-item .bar-label{
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
  font-weight:800;
}
.horizontal-bar-item .bar-track{
  height:18px;
  background:#edf2f7;
  border-radius:999px;
  overflow:hidden;
  min-width:0;
}
.horizontal-bar-item .bar{
  height:100%;
  min-height:18px;
  border-radius:999px;
  background:linear-gradient(90deg,#60a5fa,#2563eb);
  transition:width .25s ease;
}
.horizontal-bar-item .bar-value{
  font-size:12px;
  color:#334155;
  text-align:right;
  white-space:nowrap;
}
.progress-bar.over-benefit{
  background:linear-gradient(90deg,#2563eb,#14b8a6,#059669);
}

#records .table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
#records table{
  table-layout:auto;
}
#records th,
#records td{
  white-space:nowrap;
  vertical-align:middle;
}
#records td:nth-child(3),
#records td:nth-child(7){
  max-width:260px;
  overflow:hidden;
  text-overflow:ellipsis;
}
#records .row-actions{
  flex-wrap:nowrap;
}

#favorites .split-grid{
  align-items:start;
}
#favoriteForm{
  align-self:start;
  height:auto;
  min-height:0;
}
#favoriteForm.form-card{
  grid-auto-rows:auto;
}
#favoriteForm input,
#favoriteForm select{
  min-height:46px;
  height:46px;
}
#favoriteForm .check-card{
  height:58px;
  min-height:58px;
  align-items:center;
}
#favoriteForm .primary-btn{
  min-height:48px;
  height:48px;
  align-self:start;
}
#favoriteForm .form-header{
  min-height:40px;
}
#favoriteForm .form-header .ghost-btn{
  min-height:40px;
  height:40px;
}
#favoriteList{
  align-content:start;
}

@media (max-width: 920px){
  .main-content{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }
  .tab-panel.active,
  .panel-card,
  .form-card,
  .tips-card,
  .metric-card,
  .progress-card{
    width:100%;
    max-width:100%;
  }
  .analytics-grid,
  .split-grid,
  .metric-grid,
  .dashboard-summary-grid,
  .progress-used-row{
    grid-template-columns:minmax(0,1fr)!important;
    width:100%;
  }
  .analytics-grid > *,
  .split-grid > *,
  .metric-grid > *,
  .progress-used-row > *{
    min-width:0;
  }
  .primary-metric,
  .used-days-card,
  .progress-row-card{
    min-height:auto;
  }
  .horizontal-bar-chart{
    min-height:auto;
  }
}

@media (max-width: 520px){
  .main-content{
    padding:14px;
  }
  .topbar-actions{
    width:100%;
  }
  .pass-picker,
  .topbar-actions .secondary-btn{
    width:100%;
  }
  .panel-card,
  .form-card,
  .tips-card,
  .metric-card,
  .progress-card{
    border-radius:20px;
  }
  .horizontal-bar-item{
    grid-template-columns:48px minmax(0,1fr) 64px;
    gap:8px;
  }
  .horizontal-bar-item .bar-track{
    height:16px;
  }
  .horizontal-bar-item .bar{
    min-height:16px;
  }
  #records .panel-card{
    padding:14px;
  }
  #records .table-wrap{
    margin-inline:-4px;
    padding-inline:4px;
  }
  #records table{
    min-width:760px;
    border-spacing:0 8px;
  }
  #records th,
  #records td{
    padding:10px 8px;
    font-size:12px;
    line-height:1.25;
  }
  #records td:nth-child(3){
    max-width:180px;
  }
  #records td:nth-child(7){
    max-width:120px;
  }
  #records .icon-btn{
    padding:7px 8px;
    font-size:12px;
  }
  #favoriteForm input,
  #favoriteForm select{
    min-height:44px;
    height:44px;
  }
}