/* Mensalidades: CSS modular — padrão verde (var(--finance)) com layout padronizado. */

/* Formulário de filtros: 4 colunas lado a lado */
body[data-route="mensalidades"] .finance-filter-form {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
@media (max-width: 900px) {
  body[data-route="mensalidades"] .finance-filter-form {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 560px) {
  body[data-route="mensalidades"] .finance-filter-form {
    grid-template-columns: 1fr !important;
  }
}

/* Painel "Ver mais" — fundo igual ao card padrão da página, botão em verde finance */
body[data-route="mensalidades"] .finance-more-panel {
  background: linear-gradient(180deg, rgba(20,22,26,.94), rgba(13,14,17,.96)) !important;
  border-color: rgba(255,255,255,.08) !important;
}

body[data-route="mensalidades"] .finance-more-panel summary > strong {
  background: rgba(53,180,125,.18) !important;
  border: 1px solid rgba(53,180,125,.32) !important;
  color: #c0f0dd !important;
  border-radius: 6px 18px 6px 18px !important;
}

/* Cards de filas: headers com estilo similar a Graduações */
body[data-route="mensalidades"] .finance-list-head {
  display: grid;
  gap: 5px;
  padding: 0 0 12px;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--line);
}

body[data-route="mensalidades"] .finance-list-head .eyebrow {
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

body[data-route="mensalidades"] .finance-list-head h3 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--text);
}

body[data-route="mensalidades"] .finance-list-head p {
  margin: 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.35;
}

/* Cards de filas sempre com fundo verde finance */
body[data-route="mensalidades"] .finance-simple-list.finance {
  border-left: 5px solid var(--finance) !important;
  background:
    radial-gradient(circle at 96% 10%, rgba(53,180,125,.22), transparent 32%),
    linear-gradient(135deg, rgba(21,40,32,.94), rgba(18,23,30,.98)) !important;
}

/* Stack com scroll — 5 itens visíveis (~430px), demais acessíveis por scroll */
body[data-route="mensalidades"] .finance-simple-stack {
  max-height: 248px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(53,180,125,.35) transparent;
}

body[data-route="mensalidades"] .finance-simple-stack::-webkit-scrollbar {
  width: 4px;
}

body[data-route="mensalidades"] .finance-simple-stack::-webkit-scrollbar-track {
  background: transparent;
}

body[data-route="mensalidades"] .finance-simple-stack::-webkit-scrollbar-thumb {
  background: rgba(53,180,125,.35);
  border-radius: 99px;
}

/* Títulos dos cards de fila visíveis */
body[data-route="mensalidades"] .finance-simple-list .section-title {
  display: flex !important;
}

/* Card de pagamentos recentes com mesma cor/estilo do card pendente */
body[data-route="mensalidades"] .finance-simple-list.success {
  border-left: 5px solid var(--finance) !important;
  background:
    radial-gradient(circle at 96% 10%, rgba(53,180,125,.22), transparent 32%),
    linear-gradient(135deg, rgba(21,40,32,.94), rgba(18,23,30,.98)) !important;
}