/* Complemento do Tailwind: só o que o design usa e não sai de utilitário.
   As cores das telas vêm escritas na própria classe (claro por padrão, escuro
   com o prefixo dark:), então aqui não há paleta — apenas as peças que
   dependem de seletor de tema ou de pseudo-elemento. */

html, body { margin: 0; padding: 0; }
body { overscroll-behavior: none; -webkit-font-smoothing: antialiased; }
main > :first-child { margin-top: 0 !important; }
main > :last-child { margin-bottom: 0 !important; }

/* ---------------------------------------------------------------- rolagem */
/* Barra da janela */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(135, 146, 155, .45); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(135, 146, 155, .7); }

/* Barra dentro de um cartão: sempre visível, pra não parecer que a lista acabou */
.scroll-thin { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #c6cbd4 transparent; }
.scroll-thin::-webkit-scrollbar { display: block; width: 8px; height: 8px; }
.scroll-thin::-webkit-scrollbar-track { background: transparent; }
.scroll-thin::-webkit-scrollbar-thumb { background: #c6cbd4; border-radius: 8px; }
.scroll-thin::-webkit-scrollbar-thumb:hover { background: #98a2b3; }
html.dark .scroll-thin { scrollbar-color: #3e4850 transparent; }
html.dark .scroll-thin::-webkit-scrollbar-thumb { background: #3e4850; }
html.dark .scroll-thin::-webkit-scrollbar-thumb:hover { background: #4a5560; }

/* ------------------------------------------------------------ tabela fixa */
/* O fundo vai na célula, não na linha: senão a lista aparece por baixo do cabeçalho ao rolar. */
.thead-sticky th { background: #f8f9fa; }
html.dark .thead-sticky th { background: #0c0e11; }

/* ---------------------------------------------------------------- números */
.mono-nums { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
.tab-num { font-variant-numeric: tabular-nums; }
.font-mono-num { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ blocos */
/* O breakpoint do Tailwind mede a janela, não o cartão. Aqui as duas colunas só
   ligam quando o cartão tem largura de verdade, evitando coluna espremida. */
.panel-body { container-type: inline-size; }

.acct-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 1024px) { .acct-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.5rem; } }

/* ----------------------------------------------------------- abre/fecha */
details summary::-webkit-details-marker { display: none; }
.details-arrow { display: inline-block; transition: transform .2s ease; }
details[open] summary .details-arrow { transform: rotate(180deg); }

/* --------------------------------------------------------------- animação */
@keyframes pulse-indeterminate { 0% { transform: translateX(-40%); } 100% { transform: translateX(190%); } }
.animate-indeterminate { animation: pulse-indeterminate 1.5s infinite ease-in-out; }
@keyframes pulse-subtle { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.animate-pulse-subtle { animation: pulse-subtle 2s cubic-bezier(.4, 0, .6, 1) infinite; }

@media (prefers-reduced-motion: reduce) {
  .animate-indeterminate, .animate-pulse-subtle { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* ----------------------------------------------------------------- ícones */
.material-symbols-outlined { font-variation-settings: 'opsz' 20, 'wght' 400, 'GRAD' 0, 'FILL' 0; line-height: 1; user-select: none; }

/* ----------------------------------------------------------------- avisos */
#toasts { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; gap: 8px; }