/* Wider forms keep related information together on desktop. */
#modal #fields > .client-control { grid-column: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: end; }
.client-control > button { padding: 10px 12px; }
.client-cpf-search { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.client-feedback { grid-column: 1 / -1; margin: 0; font-size: 13px; white-space: normal; }
@media (max-width: 600px) { #modal #fields > .client-control, .client-cpf-search { grid-template-columns: 1fr; } }
#modal { width: min(1000px, calc(100vw - 48px)); max-height: calc(100dvh - 48px); padding: 0; }
#modal #entry { padding: 26px 30px; gap: 18px; }
#modal #fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
#modal #fields > h3,
#modal #fields > p,
#modal #fields > div,
#modal #fields > label:has(textarea) { grid-column: 1 / -1; }
#modal #fields > h3 { margin: 6px 0 0; }
#modal label { min-width: 0; }
#modal input, #modal select { min-width: 0; padding: 10px 12px; }
#modal textarea { min-height: 76px; resize: vertical; }
#modal .actions { padding-top: 6px; }
/* Compact O.S editor: keep the font size and use the available width. */
#modal[data-view="orders"] { width: min(1650px, calc(100vw - 32px)); max-height: calc(100dvh - 24px); }
#modal[data-view="orders"] #entry { padding: 22px 24px; gap: 12px; }
#modal[data-view="orders"] #fields { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
#modal[data-view="orders"] .order-form-section { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; min-width: 0; padding: 12px; border: 1px solid #35415f; border-radius: 10px; }
#modal[data-view="orders"] #fields .order-form-section > h3 { grid-column: 1 / -1; margin: 0 0 2px; font-size: 15px; }
#modal[data-view="orders"] .order-form-section > p,
#modal[data-view="orders"] .order-form-section > div,
#modal[data-view="orders"] .order-form-section > label:has(textarea) { grid-column: 1 / -1; }
#modal[data-view="orders"] .order-form-section label { gap: 4px; }
#modal[data-view="orders"] .order-form-section input,
#modal[data-view="orders"] .order-form-section select { padding: 7px 9px; }
#modal[data-view="orders"] .order-form-section textarea { min-height: 56px; height: 56px; padding: 7px 9px; }
#modal[data-view="orders"] .client-control { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; align-items: end; }
#modal[data-view="orders"] .client-control > button { padding: 8px 9px; font-size: 13px; }
#modal[data-view="orders"] [data-field="photoFiles"] { grid-column: 1 / -1; }
#modal[data-view="orders"] #budget-total { margin: 0; color: var(--cyan); font-weight: 700; }
#modal[data-view="orders"] .actions { position: sticky; bottom: -18px; background: var(--panel); padding: 10px 0 0; }
@media (max-width: 1200px) { #modal[data-view="orders"] #fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px) { #modal[data-view="orders"] #fields { grid-template-columns: 1fr; } }
#modal[data-view="clients"] #fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#modal[data-view="clients"] [data-field="name"],
#modal[data-view="clients"] [data-field="street"] { grid-column: span 2; }
#modal[data-view="brands"] { width: min(600px, calc(100vw - 48px)); }
#modal[data-view="brands"] #fields { grid-template-columns: 1fr; }
@media (max-width: 900px) {
  #modal[data-view="clients"] #fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  #modal { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  #modal #entry { padding: 20px 16px; }
  #modal #fields, #modal[data-view="clients"] #fields { grid-template-columns: 1fr; }
  #modal[data-view="clients"] [data-field="name"],
  #modal[data-view="clients"] [data-field="street"] { grid-column: auto; }
  #modal .actions { flex-wrap: wrap; }
  #modal[data-view="orders"] { width: calc(100vw - 24px); }
  #modal[data-view="orders"] #entry { padding: 14px 12px; }
  #modal[data-view="orders"] .client-control { grid-template-columns: 1fr 1fr; }
  #modal[data-view="orders"] .client-control > label { grid-column: 1 / -1; }
}

#modal[data-view="models"]{width:min(900px,96vw)}
#modal[data-view="models"] h3{grid-column:1/-1;color:var(--cyan);margin:8px 0 0;font-size:15px}
main[data-view="models"] td{font-size:13px}

.client-name-search{grid-column:1/-1;display:grid;gap:8px}.client-name-results{display:grid;gap:6px;max-height:220px;overflow:auto}.client-name-results button{text-align:left;white-space:normal;overflow-wrap:anywhere}#modal[data-view="orders"] .client-control{grid-template-columns:repeat(3,minmax(0,1fr))}#modal[data-view="orders"] .client-control>label{grid-column:1/-1}