/* Ajustes do admin para celular (abaixo de 1024px, onde o unfold esconde
   o cabeçalho das tabelas de inline). Cada linha vira um "cartão" com o nome
   do campo acima de cada caixa. */
@media (max-width: 1023px) {
  .formset-wrapper { overflow-x: visible !important; }

  /* listas de escolha com nomes longos (ex.: obra) não podem alargar a página */
  select, .select2-container { max-width: 100% !important; min-width: 0 !important; }
  .select2-container .select2-selection__rendered { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .related-widget-wrapper, .flex.flex-row.gap-3 > .flex.flex-col.grow { min-width: 0; }
  #content form fieldset { min-width: 0; }
  select.select2-hidden-accessible { width: 1px !important; left: 0 !important; }

  table.formset > tbody > tr.form-row {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--color-base-200);
  }

  table.formset > tbody > tr.form-row > td {
    display: block;
    flex: 1 1 100%;
    min-width: 0;
    padding: 0.35rem 0 !important;
    border: 0 !important;
    min-height: 0 !important;
  }

  /* campos curtos lado a lado */
  table.formset > tbody > tr.form-row > td.field-horas,
  table.formset > tbody > tr.form-row > td.field-metragem,
  table.formset > tbody > tr.form-row > td.field-unidade,
  table.formset > tbody > tr.form-row > td.field-valor,
  table.formset > tbody > tr.form-row > td.field-data_prevista,
  table.formset > tbody > tr.form-row > td.field-data_recebida {
    flex: 1 1 calc(50% - 0.375rem);
  }

  table.formset > tbody > tr.form-row > td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--color-font-important-light, #111);
  }
  .dark table.formset > tbody > tr.form-row > td[data-label]::before {
    color: var(--color-font-important-dark, #eee);
  }

  table.formset > tbody > tr.form-row > td input,
  table.formset > tbody > tr.form-row > td select,
  table.formset > tbody > tr.form-row > td .select2-container {
    width: 100% !important;
    max-width: 100% !important;
  }

  table.formset > tbody > tr.form-row > td.delete {
    flex: 1 1 100%;
    padding-top: 0 !important;
  }
}

/* Linhas de título dos itens (ex.: "Aplicação de CBUQ") e abas no celular */
@media (max-width: 1023px) {
  table.formset, table.formset > tbody { display: block; width: 100%; }
  table.formset > tbody > tr:not(.form-row) { display: block; }
  table.formset > tbody > tr:not(.form-row) > td { display: block; width: auto; }
  .flex.flex-row.grow:has(> .ms-2.relative) { min-width: 0; max-width: 100%; }
  .flex.flex-row.grow:has(> .ms-2.relative) > :first-child { min-width: 0; overflow: hidden; }
}