/**
 * Poupex Play 4.0 — Abas (componente unificado)
 * Namespace: .pp4-* / --pp4-*
 *
 * Sprint 9 do redesign — consolidação.
 *
 * A plataforma tinha TRÊS famílias de aba com marcações diferentes e
 * comportamento visual idêntico:
 *
 *   .history-tabs / .history-tab   extrato          (historico.php)
 *   .finance-tabs  / .finance-tab  ganhos, carteira (ganhos.php, financeiro.php)
 *   .task-tabs     / .task-tab     equipe, tarefas  (team.php)
 *
 * Este arquivo trata as três como um só componente. Os blocos de aba que
 * estavam em `statement.css` e `wallet.css` foram removidos de lá.
 *
 * Duas variantes, escolhidas pela marcação existente:
 *   PÍLULA   `.history-tab` — lista longa de categorias, rolável
 *   SEGMENTO `.finance-tab` e `.task-tab` — 2 a 4 opções, dentro de um trilho
 *
 * Carregado por último: precisa vencer as regras de aba de app.css e
 * brand-theme.css, e também as versões antigas nos arquivos anteriores.
 */

/* ============================================================
   1 · TRILHO — variante segmento
   ============================================================ */

.pp4-shell .content .finance-tabs,
.pp4-shell .content .task-tabs,
html[data-theme] .pp4-shell .content .finance-tabs,
html[data-theme] .pp4-shell .content .task-tabs {
  display: inline-flex;
  align-self: flex-start;
  width: auto;
  max-width: 100%;
  gap: var(--pp4-space-1);
  padding: var(--pp4-space-1) !important;
  margin: 0 !important;
  border: 1px solid var(--pp4-color-border) !important;
  border-radius: var(--pp4-radius-md) !important;
  background: var(--pp4-color-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow-x: auto;
  scrollbar-width: none;
}

.pp4-shell .content .finance-tabs::-webkit-scrollbar,
.pp4-shell .content .task-tabs::-webkit-scrollbar { display: none; }

.pp4-shell .content .finance-tab,
.pp4-shell .content .task-tab,
html[data-theme] .pp4-shell .content .finance-tab,
html[data-theme] .pp4-shell .content .task-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pp4-space-2);
  flex: 0 0 auto;
  min-width: 132px;
  min-height: 40px;
  padding: 0 var(--pp4-space-4) !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--pp4-color-text-muted) !important;
  font-family: inherit;
  font-size: var(--pp4-text-md);
  font-weight: var(--pp4-weight-semibold);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none !important;
  transition: background var(--pp4-duration) var(--pp4-ease), color var(--pp4-duration) var(--pp4-ease);
}

.pp4-shell .content .finance-tab svg,
.pp4-shell .content .task-tab svg { width: 18px; height: 18px; color: inherit !important; }

.pp4-shell .content .finance-tab span,
.pp4-shell .content .task-tab span { color: inherit !important; }

.pp4-shell .content .finance-tab:hover,
.pp4-shell .content .task-tab:hover {
  background: var(--pp4-color-surface-2) !important;
  color: var(--pp4-color-text) !important;
}

.pp4-shell .content .finance-tab--active,
.pp4-shell .content .task-tab--active,
html[data-theme] .pp4-shell .content .finance-tab--active,
html[data-theme] .pp4-shell .content .task-tab--active {
  background: var(--pp4-color-blue) !important;
  color: #ffffff !important;
}

.pp4-shell .content .finance-tab:focus-visible,
.pp4-shell .content .task-tab:focus-visible {
  outline: 2px solid var(--pp4-color-blue-bright);
  outline-offset: 2px;
}

/* ============================================================
   2 · PÍLULA — variante lista longa
   ============================================================ */

.pp4-shell .content .history-tabs,
html[data-theme] .pp4-shell .content .history-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pp4-space-2);
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.pp4-shell .content .history-tab,
html[data-theme] .pp4-shell .content .history-tab {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 var(--pp4-space-4) !important;
  border: 1px solid var(--pp4-color-border) !important;
  border-radius: var(--pp4-radius-pill) !important;
  background: var(--pp4-color-surface) !important;
  background-image: none !important;
  color: var(--pp4-color-text-muted) !important;
  font-size: var(--pp4-text-sm);
  font-weight: var(--pp4-weight-semibold);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none !important;
  transition: background var(--pp4-duration) var(--pp4-ease), color var(--pp4-duration) var(--pp4-ease);
}

.pp4-shell .content .history-tab:hover {
  background: var(--pp4-color-surface-2) !important;
  color: var(--pp4-color-text) !important;
}

.pp4-shell .content .history-tab--active,
html[data-theme] .pp4-shell .content .history-tab--active {
  background: var(--pp4-color-blue) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

.pp4-shell .content .history-tab:focus-visible {
  outline: 2px solid var(--pp4-color-blue-bright);
  outline-offset: 2px;
}

/* ============================================================
   3 · COR DO RÓTULO — espelho da regra genérica de links
   ============================================================

   `brand-theme.css:808` = 0,8,1 com !important. Aqui 0,9,1. */

.pp4-shell .content a.history-tab:not(.btn):not(.btn-primary):not(.app-topbar__deposit):not(.dep-submit):not(.page-header__back):not(.app-topbar__tab),
.pp4-shell .content a.finance-tab:not(.btn):not(.btn-primary):not(.app-topbar__deposit):not(.dep-submit):not(.page-header__back):not(.app-topbar__tab),
.pp4-shell .content a.task-tab:not(.btn):not(.btn-primary):not(.app-topbar__deposit):not(.dep-submit):not(.page-header__back):not(.app-topbar__tab) {
  color: var(--pp4-color-text-muted) !important;
}

.pp4-shell .content a.history-tab--active:not(.btn):not(.btn-primary):not(.app-topbar__deposit):not(.dep-submit):not(.page-header__back):not(.app-topbar__tab),
.pp4-shell .content a.finance-tab--active:not(.btn):not(.btn-primary):not(.app-topbar__deposit):not(.dep-submit):not(.page-header__back):not(.app-topbar__tab),
.pp4-shell .content a.task-tab--active:not(.btn):not(.btn-primary):not(.app-topbar__deposit):not(.dep-submit):not(.page-header__back):not(.app-topbar__tab) {
  color: #ffffff !important;
}

/* ============================================================
   4 · RESPONSIVIDADE
   ============================================================ */

@media (max-width: 767px) {
  /* A lista longa rola em faixa em vez de quebrar em quatro linhas. */
  .pp4-shell .content .history-tabs,
  html[data-theme] .pp4-shell .content .history-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px !important;
  }
  .pp4-shell .content .history-tabs::-webkit-scrollbar { display: none; }

  .pp4-shell .content .finance-tabs,
  .pp4-shell .content .task-tabs { width: 100%; }

  .pp4-shell .content .finance-tab,
  .pp4-shell .content .task-tab { flex: 1 1 0; min-width: 0; padding: 0 var(--pp4-space-2) !important; }
}

/* Com quatro ou mais opções a faixa rolável esconde metade delas num
   celular. Abaixo de 480px o trilho quebra em duas linhas: todas ficam
   alcançáveis sem gesto horizontal. */
@media (max-width: 479px) {
  .pp4-shell .content .finance-tabs,
  .pp4-shell .content .task-tabs {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .pp4-shell .content .finance-tab,
  .pp4-shell .content .task-tab { flex: 1 1 40%; }
}

@media (max-width: 359px) {
  .pp4-shell .content .finance-tab,
  .pp4-shell .content .task-tab { font-size: var(--pp4-text-sm); }
}