/* MinhaHub Automotivo — correções responsivas específicas para Produto, Custos Fixos e lista de Clientes.
   Regra: o conteúdo deve caber no container real; nunca ampliar tela ou modal. */

#mhProductCreate,
#mhProductCreate .form-grid,
#fixedCostForm,
#fixedCostForm .form-grid{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}

#mhProductCreate .form-grid,
#fixedCostForm .form-grid{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}

#mhProductCreate .form-grid > *,
#fixedCostForm .form-grid > *,
#mhProductCreate label,
#fixedCostForm label{
  width:auto!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}

#mhProductCreate input,
#mhProductCreate select,
#mhProductCreate textarea,
#fixedCostForm input,
#fixedCostForm select,
#fixedCostForm textarea{
  display:block!important;
  width:calc(100% - 2px)!important;
  max-width:calc(100% - 2px)!important;
  min-width:0!important;
  inline-size:calc(100% - 2px)!important;
  max-inline-size:calc(100% - 2px)!important;
  min-inline-size:0!important;
  margin-left:1px!important;
  margin-right:1px!important;
  box-sizing:border-box!important;
}

/* Safari/iOS mantém largura intrínseca própria em date/month. */
#mhProductCreate input[type="date"],
#fixedCostForm input[type="month"]{
  -webkit-appearance:none!important;
  appearance:none!important;
  display:block!important;
  width:calc(100% - 4px)!important;
  max-width:calc(100% - 4px)!important;
  min-width:0!important;
  inline-size:calc(100% - 4px)!important;
  max-inline-size:calc(100% - 4px)!important;
  min-inline-size:0!important;
  margin-left:2px!important;
  margin-right:2px!important;
  box-sizing:border-box!important;
  border:1px solid #ccd2da!important;
  border-radius:9px!important;
  background:#fff!important;
  overflow:hidden!important;
  text-align:center!important;
  text-align-last:center!important;
}

#entityDialog:has(#mhProductCreate),
#entityDialog:has(#mhProductCreate) .entity-dialog-box,
#entityDialog:has(#mhProductCreate) #entityDialogContent,
#entityDialog:has(#mhProductCreate) #mhProductCreate,
#entityDialog:has(#mhProductCreate) #mhProductCreate > *{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
#entityDialog:has(#mhProductCreate) .entity-dialog-box,
#entityDialog:has(#mhProductCreate) #entityDialogContent,
#entityDialog:has(#mhProductCreate) #mhProductCreate{width:100%!important}

/* Clientes: card, conteúdo e ações respeitam a largura útil. */
#app:has(.nav-item[data-page="clients"].active) #content,
#app:has(.nav-item[data-page="clients"].active) #content .entity-list,
#app:has(.nav-item[data-page="clients"].active) #content .entity-row,
#app:has(.nav-item[data-page="clients"].active) #content .entity-main,
#app:has(.nav-item[data-page="clients"].active) #content .entity-actions{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
#app:has(.nav-item[data-page="clients"].active) #content .entity-list,
#app:has(.nav-item[data-page="clients"].active) #content .entity-row{width:100%!important}
#app:has(.nav-item[data-page="clients"].active) #content .entity-row > *{min-width:0!important;max-width:100%!important}
#app:has(.nav-item[data-page="clients"].active) #content .entity-meta{
  max-width:100%!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}

@media(max-width:700px){
  #mhProductCreate .form-grid,
  #fixedCostForm .form-grid{grid-template-columns:minmax(0,1fr)!important}

  #mhProductCreate input[type="date"],
  #fixedCostForm input[type="month"]{
    height:52px!important;
    min-height:52px!important;
    padding:0 10px!important;
    line-height:52px!important;
  }

  #app:has(.nav-item[data-page="clients"].active) #content .entity-row{
    display:block!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }
  #app:has(.nav-item[data-page="clients"].active) #content .entity-main{width:100%!important}
  #app:has(.nav-item[data-page="clients"].active) #content .entity-actions{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:8px!important;
    width:100%!important;
    margin-top:10px!important;
  }
  #app:has(.nav-item[data-page="clients"].active) #content .entity-actions > *{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
}