/* Janelas de Cores e editor de Tecidos: desktop, tablet e celular */
dialog:has(#new-color),dialog:has(#color-form){
  width:min(920px,calc(100vw - 48px));
  max-width:920px;
  max-height:calc(100dvh - 48px);
  padding:0;
  border:0;
  border-radius:18px;
  overflow:hidden;
}
dialog:has(#new-color)>.modal-form,dialog:has(#color-form)>.modal-form{
  box-sizing:border-box;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  max-height:calc(100dvh - 48px);
  overflow:auto;
  padding:24px;
}
dialog:has(#new-color) .table{overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%}
dialog:has(#new-color) table{width:100%;min-width:0;table-layout:auto}
dialog:has(#new-color) th,dialog:has(#new-color) td{vertical-align:middle}
dialog:has(#new-color) td:nth-child(1){min-width:130px}
dialog:has(#new-color) td:nth-child(2){min-width:220px;white-space:normal;overflow-wrap:anywhere}
dialog:has(#new-color) td.actions{white-space:nowrap}
dialog:has(#color-form) .checks{display:flex;gap:10px 18px;flex-wrap:wrap}
dialog:has(#color-form) #color-product-list{max-height:min(340px,38dvh)!important}
/* O editor de tecido usa #color-form de propósito: estes estilos são os mesmos do editor de cor. */
dialog:has(#color-form) #fabric-product-group{width:190px;min-width:190px}

@media (max-width:900px){
  dialog:has(#new-color),dialog:has(#color-form){width:calc(100vw - 28px);max-height:calc(100dvh - 28px)}
  dialog:has(#new-color)>.modal-form,dialog:has(#color-form)>.modal-form{max-height:calc(100dvh - 28px);padding:20px}
  dialog:has(#new-color) .modal-head,dialog:has(#color-form) .modal-head{position:sticky;top:-20px;z-index:3;background:var(--card,#fff);padding-top:20px}
}

@media (max-width:600px){
  dialog:has(#new-color),dialog:has(#color-form){width:100vw;max-width:none;height:100dvh;max-height:100dvh;margin:0;border-radius:0}
  dialog:has(#new-color)>.modal-form,dialog:has(#color-form)>.modal-form{height:100dvh;max-height:100dvh;padding:16px;overflow-y:auto}
  dialog:has(#new-color) .modal-head,dialog:has(#color-form) .modal-head{top:-16px;padding:16px 0 10px;margin-bottom:8px}
  dialog:has(#new-color) .toolbar{display:flex}
  dialog:has(#new-color) #new-color{width:100%}
  dialog:has(#new-color) table,dialog:has(#new-color) thead,dialog:has(#new-color) tbody,dialog:has(#new-color) tr,dialog:has(#new-color) th,dialog:has(#new-color) td{display:block;min-width:0!important;width:auto}
  dialog:has(#new-color) thead{display:none}
  dialog:has(#new-color) tbody{display:grid;gap:12px}
  dialog:has(#new-color) tbody tr{border:1px solid var(--line,#e2e8f0);border-radius:14px;padding:14px;background:var(--card,#fff)}
  dialog:has(#new-color) tbody td{border:0;padding:4px 0;white-space:normal!important}
  dialog:has(#new-color) tbody td:nth-child(1){font-size:1rem;padding-bottom:7px}
  dialog:has(#new-color) tbody td:nth-child(2){font-size:.9rem}
  dialog:has(#new-color) tbody td:nth-child(3){padding-top:8px}
  dialog:has(#new-color) td.actions{display:flex;gap:8px;padding-top:12px;flex-wrap:wrap}
  dialog:has(#new-color) td.actions button{flex:1;min-width:100px}
  dialog:has(#color-form) .modal-actions{position:sticky;bottom:-16px;background:var(--card,#fff);padding:12px 0 16px;margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
  dialog:has(#color-form) .modal-actions button{width:100%}
  dialog:has(#color-form) #color-product-box>div:first-child{display:grid!important;grid-template-columns:1fr 1fr;align-items:stretch!important}
  dialog:has(#color-form) #color-product-box label{grid-column:1/-1;min-width:0!important}
  dialog:has(#color-form) #color-product-box button{width:100%}
  dialog:has(#color-form) #color-product-list{max-height:34dvh!important}
  dialog:has(#color-form) #color-product-list article{grid-template-columns:auto 70px 1fr!important;gap:8px}
  dialog:has(#color-form) #color-product-list article .muted{grid-column:2/-1}
  dialog:has(#color-form) #fabric-product-group{width:100%;min-width:0}
}