/* MESA 6.1.0 R4.1.3.6 — correção responsiva dos filtros de Clientes.
   Escopo exclusivamente visual: não altera filtros, eventos, API ou permissões. */

/* A grade passa a responder à largura real do cartão, não apenas à largura
   total da janela. Isso evita que sidebar, zoom ou notebook empurrem campos
   para fora da área visível. */
.ux-client-filters {
  container-name: mesa-client-filters;
  container-type: inline-size;
}

.ux-client-filters .filter-bar {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
  max-width: 100%;
  min-width: 0;
}

.ux-client-filters .filter-bar > * {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.ux-client-filters .filter-bar > :nth-child(1) { grid-column: span 3; }
.ux-client-filters .filter-bar > :nth-child(2) { grid-column: span 2; }
.ux-client-filters .filter-bar > :nth-child(3) { grid-column: span 2; }
.ux-client-filters .filter-bar > :nth-child(4) { grid-column: span 2; }
.ux-client-filters .filter-bar > :nth-child(5) { grid-column: span 2; }
.ux-client-filters .filter-bar > :nth-child(6) { grid-column: span 2; }
.ux-client-filters .filter-bar > :nth-child(7) { grid-column: span 1; }

.ux-client-filters input,
.ux-client-filters select,
.ux-client-filters .ux-multi-filter,
.ux-client-filters .ux-multi-filter summary {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.ux-client-filters #clear-client-filters {
  justify-self: end;
  align-self: end;
}

/* O painel nunca ultrapassa a janela e os nomes permanecem legíveis. */
.ux-client-filters .ux-multi-filter-panel {
  width: min(320px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  overscroll-behavior: contain;
}

html[data-theme="dark"] .ux-client-filters .ux-multi-filter-panel label {
  color: #dce7f7 !important;
}

html[data-theme="dark"] .ux-client-filters .ux-multi-filter-panel small {
  color: #91a3ba !important;
}

/* Notebook, sidebar aberta e zoom: duas linhas organizadas. */
@container mesa-client-filters (max-width: 1050px) {
  .ux-client-filters .filter-bar {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .ux-client-filters .filter-bar > :nth-child(1) { grid-column: span 3; }
  .ux-client-filters .filter-bar > :nth-child(2) { grid-column: span 2; }
  .ux-client-filters .filter-bar > :nth-child(3) { grid-column: span 2; }
  .ux-client-filters .filter-bar > :nth-child(4) { grid-column: span 2; }
  .ux-client-filters .filter-bar > :nth-child(5) { grid-column: span 2; }
  .ux-client-filters .filter-bar > :nth-child(6) { grid-column: span 2; }
  .ux-client-filters .filter-bar > :nth-child(7) { grid-column: span 1; }
}

/* Tablet e janelas estreitas: busca e campanha ocupam a linha inteira. */
@container mesa-client-filters (max-width: 720px) {
  .ux-client-filters .filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ux-client-filters .filter-bar > :nth-child(1),
  .ux-client-filters .filter-bar > :nth-child(4) {
    grid-column: 1 / -1;
  }

  .ux-client-filters .filter-bar > :nth-child(2),
  .ux-client-filters .filter-bar > :nth-child(3),
  .ux-client-filters .filter-bar > :nth-child(5),
  .ux-client-filters .filter-bar > :nth-child(6) {
    grid-column: span 1;
  }

  .ux-client-filters .filter-bar > :nth-child(7) {
    grid-column: 1 / -1;
    justify-self: end;
  }

  .ux-client-filters .ux-multi-filter-panel {
    position: fixed;
    left: 50%;
    right: auto;
    top: 120px;
    width: min(420px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    max-height: 60vh;
    transform: translateX(-50%);
  }
}

/* Celular: todos os filtros em uma coluna, sem corte horizontal. */
@container mesa-client-filters (max-width: 440px) {
  .ux-client-filters .filter-bar {
    grid-template-columns: minmax(0, 1fr);
  }

  .ux-client-filters .filter-bar > :nth-child(n) {
    grid-column: 1;
  }
}