/* MinhaHub — regra global de responsividade para pop-ups/modais.
 * Princípio: o conteúdo deve se adaptar à largura útil do pop-up em qualquer viewport.
 * Não usar overflow horizontal como solução para conteúdo maior que o modal.
 */

dialog,
dialog *,
dialog *::before,
dialog *::after{
  box-sizing:border-box;
}

/* Containers de modal já usados na plataforma. */
dialog > .entity-dialog-box,
dialog > .payment-box,
dialog > .workers-box,
dialog > .booking-detail-box,
dialog > .calendar-box,
dialog > [class$="-box"]{
  min-width:0;
  max-width:calc(100vw - 24px);
}

/* Todo bloco interno pode encolher junto com o modal. */
dialog > .entity-dialog-box > *,
dialog > .payment-box > *,
dialog > .workers-box > *,
dialog > .booking-detail-box > *,
dialog > .calendar-box > *,
dialog > [class$="-box"] > *{
  min-width:0;
  max-width:100%;
}

/* Flex/grid: remove o min-width:auto que costuma empurrar cards para fora. */
dialog :where(.payment-head,.modal-actions,.section-title,.view-list-row,.toolbar,.segmented,[class*="grid"],[class*="row"],[class*="actions"]){
  min-width:0;
  max-width:100%;
}

dialog :where(.payment-head,.modal-actions,.section-title,.view-list-row,.toolbar,.segmented,[class*="row"],[class*="actions"]) > *,
dialog :where([class*="grid"]) > *{
  min-width:0;
  max-width:100%;
}

/* Conteúdo textual e campos nunca devem impor largura mínima ao pop-up. */
dialog :where(strong,span,p,h1,h2,h3,h4,label,a,button,input,select,textarea){
  min-width:0;
  max-width:100%;
}

dialog :where(strong,span,p,h1,h2,h3,h4,label,a){
  overflow-wrap:anywhere;
  word-break:normal;
}

dialog :where(img,svg,video,canvas){
  max-width:100%;
}

/* Cards/blocos comuns devem sempre respeitar o espaço disponível. */
dialog :where(.card,.view-grid,.view-row,.client-detail-vehicle,.client-history-item,.client-history-list,.client-preferences-alert,.worker-choice,.vendor-card){
  min-width:0;
  max-width:100%;
}

@media(max-width:700px){
  dialog > .entity-dialog-box,
  dialog > .payment-box,
  dialog > .workers-box,
  dialog > .booking-detail-box,
  dialog > .calendar-box,
  dialog > [class$="-box"]{
    max-width:calc(100vw - 16px);
  }
}