/* ============================================================================
   Parcelas a Pagar -- layout (SO VISUAL; nenhum botao, id, onclick ou funcao foi alterado)
   - Filtros: painel em grade (busca + acoes no topo, filtros embaixo). So no desktop (>=769px);
     no celular continua o botao "Filtros" + bottom sheet de sempre.
   - Barra de acoes em lote: barra escura unica, botoes do mesmo tamanho com cor suave;
     a acao principal (Pagar PIX) e a unica preenchida.
   Para desfazer: tirar o <link> deste arquivo do index.html.
   ============================================================================ */

/* ------------- FILTROS (desktop) ------------- */
@media (min-width: 769px) {
  #screen-parcelas-pagar #parcelas-toolbar {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 12px !important;
    align-items: end !important;
    padding: 14px 16px !important;
    margin-bottom: 16px !important;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .05);
  }
  /* ordem + largura de cada item (>= 1200px) */
  #screen-parcelas-pagar #parcelas-toolbar > #parcelas-search                         { order: 1;  grid-column: span 6; }
  #screen-parcelas-pagar #parcelas-toolbar > button[onclick*="aplicarFiltros"]        { order: 2;  grid-column: span 2; }
  #screen-parcelas-pagar #parcelas-toolbar > button[onclick*="limparFiltros"]         { order: 3;  grid-column: span 2; }
  #screen-parcelas-pagar #parcelas-toolbar > button[onclick*="RelatorioParcelas"]     { order: 4;  grid-column: span 2; }
  #screen-parcelas-pagar #parcelas-toolbar > div:has(#filtro-empresa-parc)            { order: 5;  grid-column: span 3; }
  #screen-parcelas-pagar #parcelas-toolbar > div:has(#filtro-filial-parc)             { order: 6;  grid-column: span 3; }
  #screen-parcelas-pagar #parcelas-toolbar > div:has(#filtro-data-inicio)             { order: 7;  grid-column: span 2; }
  #screen-parcelas-pagar #parcelas-toolbar > div:has(#filtro-data-fim)                { order: 8;  grid-column: span 2; }
  #screen-parcelas-pagar #parcelas-toolbar > div:has(#filtro-tipo-data)               { order: 9;  grid-column: span 2; }
  #screen-parcelas-pagar #parcelas-toolbar > #filtro-status                           { order: 10; grid-column: span 3; }
  #screen-parcelas-pagar #parcelas-toolbar > #filtro-origem                           { order: 11; grid-column: span 3; }
  #screen-parcelas-pagar #parcelas-toolbar > #filtro-categoria                        { order: 12; grid-column: span 3; }
  #screen-parcelas-pagar #parcelas-toolbar > #filtro-tipo-viagem-wrap                 { order: 13; grid-column: span 3; display: block !important; }

  /* campos: mesma altura, mesma borda */
  #screen-parcelas-pagar #parcelas-toolbar select,
  #screen-parcelas-pagar #parcelas-toolbar input[type="date"],
  #screen-parcelas-pagar #parcelas-toolbar #parcelas-search,
  #screen-parcelas-pagar #parcelas-toolbar #filtro-tipo-viagem-btn {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    padding: 0 12px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    background-color: #fff;
    color: #111827;
  }
  #screen-parcelas-pagar #parcelas-toolbar select:focus,
  #screen-parcelas-pagar #parcelas-toolbar input:focus {
    outline: none;
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .18);
  }
  #screen-parcelas-pagar #parcelas-toolbar > div > label {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .02em;
    color: #6b7280;
    margin: 0 0 0 2px;
  }

  /* botoes do topo: mesma altura; Atualizar e o principal */
  #screen-parcelas-pagar #parcelas-toolbar > button {
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    background: #fff !important;
    color: #374151 !important;
    border: 1px solid #d1d5db !important;
    transition: background .15s, border-color .15s;
  }
  #screen-parcelas-pagar #parcelas-toolbar > button:hover { background: #f3f4f6 !important; }
  #screen-parcelas-pagar #parcelas-toolbar > button[onclick*="aplicarFiltros"] {
    background: #4f46e5 !important; color: #fff !important; border-color: #4f46e5 !important;
  }
  #screen-parcelas-pagar #parcelas-toolbar > button[onclick*="aplicarFiltros"]:hover { background: #4338ca !important; }
  #screen-parcelas-pagar #parcelas-toolbar > button[onclick*="limparFiltros"] i { color: #d97706; }
  #screen-parcelas-pagar #parcelas-toolbar > button[onclick*="RelatorioParcelas"] i { color: #6d28d9; }
}

/* telas medias: busca em cima, botoes embaixo dela, filtros em 2-3 colunas */
@media (min-width: 769px) and (max-width: 1199px) {
  #screen-parcelas-pagar #parcelas-toolbar > #parcelas-search                     { grid-column: span 12; }
  #screen-parcelas-pagar #parcelas-toolbar > button[onclick*="aplicarFiltros"],
  #screen-parcelas-pagar #parcelas-toolbar > button[onclick*="limparFiltros"],
  #screen-parcelas-pagar #parcelas-toolbar > button[onclick*="RelatorioParcelas"] { grid-column: span 4; }
  #screen-parcelas-pagar #parcelas-toolbar > div:has(#filtro-empresa-parc),
  #screen-parcelas-pagar #parcelas-toolbar > div:has(#filtro-filial-parc)         { grid-column: span 6; }
  #screen-parcelas-pagar #parcelas-toolbar > div:has(#filtro-data-inicio),
  #screen-parcelas-pagar #parcelas-toolbar > div:has(#filtro-data-fim),
  #screen-parcelas-pagar #parcelas-toolbar > div:has(#filtro-tipo-data)           { grid-column: span 4; }
  #screen-parcelas-pagar #parcelas-toolbar > #filtro-status,
  #screen-parcelas-pagar #parcelas-toolbar > #filtro-origem,
  #screen-parcelas-pagar #parcelas-toolbar > #filtro-categoria,
  #screen-parcelas-pagar #parcelas-toolbar > #filtro-tipo-viagem-wrap             { grid-column: span 6; }
}

/* tema escuro: filtros */
html.dark-mode #screen-parcelas-pagar #parcelas-toolbar {
  background: var(--dk-surface) !important;
  border-color: var(--dk-border) !important;
  box-shadow: none;
}
@media (min-width: 769px) {
  html.dark-mode #screen-parcelas-pagar #parcelas-toolbar select,
  html.dark-mode #screen-parcelas-pagar #parcelas-toolbar input[type="date"],
  html.dark-mode #screen-parcelas-pagar #parcelas-toolbar #parcelas-search,
  html.dark-mode #screen-parcelas-pagar #parcelas-toolbar #filtro-tipo-viagem-btn {
    background-color: var(--dk-surface-2) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text) !important;
  }
  html.dark-mode #screen-parcelas-pagar #parcelas-toolbar > div > label { color: var(--dk-text-mut) !important; }
  html.dark-mode #screen-parcelas-pagar #parcelas-toolbar > button {
    background: var(--dk-surface-2) !important; color: var(--dk-text) !important; border-color: var(--dk-border) !important;
  }
  html.dark-mode #screen-parcelas-pagar #parcelas-toolbar > button:hover { background: #2f3550 !important; }
  html.dark-mode #screen-parcelas-pagar #parcelas-toolbar > button[onclick*="aplicarFiltros"] {
    background: #5b54f0 !important; color: #fff !important; border-color: #5b54f0 !important;
  }
  html.dark-mode #screen-parcelas-pagar #parcelas-toolbar > button[onclick*="aplicarFiltros"]:hover { background: #6d67ff !important; }
  html.dark-mode #screen-parcelas-pagar #parcelas-toolbar > button[onclick*="limparFiltros"] i { color: #fbbf24; }
  html.dark-mode #screen-parcelas-pagar #parcelas-toolbar > button[onclick*="RelatorioParcelas"] i { color: #c4b5fd; }
}

/* ------------- BARRA DE ACOES EM LOTE (todas as telas) ------------- */
#screen-parcelas-pagar #barra-acoes-lote {
  background: #111827 !important;
  background-image: none !important;
  border: 1px solid #1f2937;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  margin-bottom: 16px !important;
  box-shadow: 0 8px 24px rgba(17, 24, 39, .28) !important;
}
#screen-parcelas-pagar #barra-acoes-lote > div { gap: 12px !important; }
/* contador: mais enxuto; a legenda "Selecione parcelas..." some (so atrapalha quando ja ha selecao) */
#screen-parcelas-pagar #barra-acoes-lote > div > div:first-child { min-width: 180px !important; gap: 10px !important; }
#screen-parcelas-pagar #barra-acoes-lote > div > div:first-child > i { font-size: 20px !important; color: #34d399; }
#screen-parcelas-pagar #barra-acoes-lote #contador-selecionadas { font-size: 15px !important; color: #fff; }
#screen-parcelas-pagar #barra-acoes-lote > div > div:first-child > div > div:nth-child(2) { display: none; }
/* botoes */
#screen-parcelas-pagar #barra-acoes-lote > div > div:last-child { gap: 8px !important; align-items: center; }
#screen-parcelas-pagar #barra-acoes-lote button {
  height: 36px;
  padding: 0 14px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  border: 1px solid transparent !important;
  white-space: nowrap;
  transition: background .15s, border-color .15s, filter .15s !important;
}
#screen-parcelas-pagar #barra-acoes-lote button i { margin-right: 6px; }
#screen-parcelas-pagar #barra-acoes-lote button:hover { filter: brightness(1.18); }
/* cores suaves por tipo de acao */
#screen-parcelas-pagar #barra-acoes-lote button[onclick*="liberarLote"] {
  background: rgba(16, 185, 129, .16) !important; color: #6ee7b7 !important; border-color: rgba(16, 185, 129, .45) !important;
}
#screen-parcelas-pagar #barra-acoes-lote button[onclick*="bloquearLote"] {
  background: rgba(239, 68, 68, .16) !important; color: #fca5a5 !important; border-color: rgba(239, 68, 68, .45) !important;
}
#screen-parcelas-pagar #barra-acoes-lote button[onclick*="alterarVencimentoLote"] {
  background: rgba(245, 158, 11, .16) !important; color: #fcd34d !important; border-color: rgba(245, 158, 11, .45) !important;
}
#screen-parcelas-pagar #barra-acoes-lote button[onclick*="liberarApiLote"] {
  background: rgba(129, 140, 248, .18) !important; color: #c7d2fe !important; border-color: rgba(129, 140, 248, .5) !important;
}
/* acao principal: unica preenchida, separada das demais */
#screen-parcelas-pagar #barra-acoes-lote button[onclick*="pagarLotePix"] {
  background: #00bfa5 !important; color: #052e29 !important; border-color: #00bfa5 !important;
  font-weight: 700 !important; margin-left: 10px;
}
#screen-parcelas-pagar #barra-acoes-lote button[onclick*="desmarcarTodas"] {
  background: transparent !important; color: #cbd5e1 !important; border-color: #475569 !important;
}
html.dark-mode #screen-parcelas-pagar #barra-acoes-lote {
  background: #232a40 !important; border-color: #3b4560;
}

@media (max-width: 768px) {
  #screen-parcelas-pagar #barra-acoes-lote { padding: 10px 12px !important; border-radius: 10px !important; }
  #screen-parcelas-pagar #barra-acoes-lote > div > div:last-child { width: 100%; gap: 6px !important; }
  #screen-parcelas-pagar #barra-acoes-lote button {
    flex: 1 1 calc(50% - 6px);
    height: auto;
    min-height: 38px;
    padding: 6px 8px !important;
    font-size: 12.5px !important;
    line-height: 1.2;
    white-space: normal;
  }
  #screen-parcelas-pagar #barra-acoes-lote button[onclick*="pagarLotePix"] { flex-basis: 100%; margin-left: 0; order: 9; }
  #screen-parcelas-pagar #barra-acoes-lote button[onclick*="desmarcarTodas"] { order: 10; }
}