/* ===========================================
   ACTION BAR — estado Pedidos
   A barra verde exibe o botão "Fazer um pedido" no lugar da busca
   ======================================== */

/* ZONA DO MEIO que muda por aba: RECORTA (overflow) o trilho deslizante. Fica
   ENTRE o perfil (esq.) e os contratos (dir.), fixos — por isso ocupa o espaço
   restante (flex:1), sem as margens negativas de antes (o respiro das pontas
   vem do padding da barra + o gap da linha). */
.agenda-filters__action-row {
  position: relative;
  height: var(--control-h);
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* Trilho: agora só um CONTÊINER posicionado (as 3 linhas ficam EMPILHADAS e
   fazem CROSSFADE). NÃO desliza mais — a troca de aba na barra é FADE in/out
   (os painéis do feed e o slider das abas seguem deslizando por --panel-slide-dur). */
.agenda-filters__track {
  position: absolute;
  inset: 0;
}

/* Cada linha ocupa a zona do meio INTEIRA (empilhada). A ativa (por aba) aparece
   com FADE; as demais somem. Ordem no DOM: vagas | busca | pedidos. */
.agenda-filters__search-row,
.agenda-filters__vagas-row,
.agenda-filters__pedidos-row {
  position: absolute;
  inset: 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  /* Troca de visualização = FADE (opacity). visibility atrasada mantém a linha
     interativa enquanto aparece e a tira do hit-test após o fade de saída. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--fade-bar-zone) var(--ease), visibility 0s linear var(--fade-bar-zone);
}

/* Linha ATIVA por aba: default = busca (sem classe de estado); --vagas / --pedidos. */
.agenda-filters:not(.agenda-filters--vagas):not(.agenda-filters--pedidos) .agenda-filters__search-row,
.agenda-filters--vagas .agenda-filters__vagas-row,
.agenda-filters--pedidos .agenda-filters__pedidos-row {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--fade-bar-zone) var(--ease);
}

/* A linha de pedidos estica os botões à altura toda e usa gap um pouco maior */
.agenda-filters__pedidos-row {
  align-items: stretch;
  gap: var(--space-sm);
}

/* Botões da linha de vagas — COMPÕEM .btn (fundação única); aqui só os overrides
   do formato 40px, iguais ao .pedido-action__btn. O :active (fade) mora abaixo. */
.agenda-filters__vagas-btn {
  flex: 1;          /* 50/50 estável entre os dois botões */
  min-width: 0;     /* sem isso o texto define a largura mínima e o par "dança" ao trocar o rótulo */
  height: var(--control-h);
  padding: 0;       /* zera o padding 16px do .btn — a altura vem do height 40px */
  gap: 4px;   /* vão ícone↔texto compacto: fica <= à margem lateral mesmo no botão mais cheio */
  font-size: var(--fs-6);
  white-space: nowrap;
  overflow: hidden;
}

/* "Criar vaga" — AÇÃO principal da aba, à DIREITA: dourado (AMARELO = AÇÃO). */
.agenda-filters__vagas-btn--criar {
  background: var(--a-gold);
  color: var(--p-green-dark);
}


/* "Diárias" — à ESQUERDA (Criar vaga foi p/ a direita). Padrão AMARELO como os
   demais botões do topo (exceto contratos). */
.agenda-filters__vagas-btn--ajudante {
  background: var(--a-gold);
  color: var(--p-green-dark);
}

.agenda-filters__vagas-btn .icon {
  flex-shrink: 0;   /* tamanho/peso vêm do padrão único de ícone da barra (ver .pedido-action__icon…) */
}

/* ===========================================
   BARRA INFERIOR — controles flutuantes (FAB) sobre o feed
   transparente: o feed rola por baixo; só os controles capturam toque
   ======================================== */
.bottom-bar {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  padding-bottom: calc(var(--space-xs) + env(safe-area-inset-bottom, 0px));
  background: transparent;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-bar);
  pointer-events: none;            /* vãos transparentes deixam passar scroll/tap do feed */
}

/* apenas os controles (botões laterais e pílula) são clicáveis e ficam por cima do blur */
.bottom-bar > * {
  pointer-events: auto;
  position: relative;
  z-index: 1;
}

/* Faixa de vidro fosco ATRÁS dos controles: o feed rola por baixo e o desfoque
   melhora o contraste. Fica num ::before (z-index:-1) para os botões/abas
   continuarem nítidos por cima. A máscara faz a faixa sumir suavemente no topo. */
.bottom-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(var(--p-green-dark-rgb), 0.55), rgba(var(--p-green-dark-rgb), 0));
  backdrop-filter: blur(var(--blur-lg));
  -webkit-backdrop-filter: blur(var(--blur-lg));
  -webkit-mask-image: linear-gradient(to top, #000 60%, transparent);
  mask-image: linear-gradient(to top, #000 60%, transparent);
  pointer-events: none;
}

/* ===========================================
   FEED TABS — barra central na bottom-bar
   ======================================== */
.feed-tabs-pill {
  flex: 1;
  display: flex;
  align-items: stretch;        /* tabs preenchem toda a altura */
  position: relative;          /* âncora do slider absoluto */
  gap: 0;
  background: var(--p-green);
  border-radius: var(--radius-pill);
  padding: 4px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;            /* slider não vaza fora da barra */
}

/* Indicador deslizante — substitui o background do tab ativo. DOURADO de
   propósito (exceção deliberada à regra "seleção = azul"): a bottom bar é a
   barra de NAVEGAÇÃO/AÇÃO principal do app, não um seletor de formulário. */
.feed-tabs-pill__slider {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / 3);    /* 1/3 da área interna */
  background: var(--a-gold);
  border-radius: var(--radius-pill);
  pointer-events: none;
  transform: translateX(100%);      /* posição inicial: aba home (índice 1) */
  transition: transform var(--panel-slide-dur, 0.5s) var(--ease);
  will-change: transform;
}

.feed-tabs-pill__tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--touch-min);
  padding: 5px 2px;
  border-radius: var(--radius-pill);
  border: none;
  background: transparent;
  color: var(--on-green-med);
  cursor: pointer;
  position: relative;     /* fica acima do slider (z-index) */
  z-index: 1;
  transition: color 0.3s var(--ease);
}

.feed-tabs-pill__tab-label {
  font-size: var(--fs-1);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: 0.2px;
}

.feed-tabs-pill__tab .icon {
  font-size: 1.4rem;
}

/* Aba ativa: só cor muda (o slider amarelo é o fundo). O ícone agora é SVG do
   sprite (peso único assado no símbolo) — não há mais reforço de peso por estado
   como havia com a fonte (font-variation-settings). */
.feed-tabs-pill__tab--active {
  color: var(--p-green-dark);
}

.feed-tabs-pill__tab:not(.feed-tabs-pill__tab--active):active {
  color: var(--t-light);
}

.scroll-area {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-md);
  /* espaço para o último conteúdo passar acima dos controles flutuantes */
  padding-bottom: calc(var(--bottombar-clearance) + env(safe-area-inset-bottom, 0px));
}

/* Botões da action bar de pedidos (Histórico / Fazer pedido) — largura 50/50 */
.pedido-action__btn {
  flex: 1;
  min-width: 0;   /* largura ESTÁVEL 50/50: sem isso min-width:auto faz o botão
                     crescer com o texto (ex.: "Concluir pedido") e empurrar o vizinho */
  height: var(--control-h);
  padding: 0;     /* zera o padding 16px herdado do .btn — casa com Vagas/Perfil
                     (que têm padding 0); a altura vem do height 40px, o respiro
                     interno do justify-center + gap. Sem isso o espaçamento
                     ficava desregulado (vertical apertado + inset lateral maior). */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;   /* vão ícone↔texto compacto (<= margem lateral mesmo cheio) */
  font-size: var(--fs-6);
  white-space: nowrap;
  border-radius: var(--radius-md);   /* retângulo padrão do app */
}

/* ── PADRONIZAÇÃO dos botões do topo (action bar) ─────────────────────────
   Feedback de toque UNIFORME = FADE (opacity), no lugar do scale do .btn:active.
   O fade in/out vem da transição padrão (--transition = all 0.3s). Cobre os
   botões com rótulo (vagas/pedidos) e o de contratos; o avatar e a pílula de
   filtro têm as mesmas regras em historico.css (preservando o translateY de
   posição da pílula). O radius-pill do contrato mora em historico.css. */
.agenda-filters__vagas-btn:active,
.pedido-action__btn:active {
  transform: none;
  opacity: 0.6;
}

/* MODO "FECHAR": qualquer botão-abridor de submenu da action bar (Histórico,
   Fazer pedido, Criar vaga, Diárias) vira um botão de fechar padrão
   (X + "Fechar") enquanto seu submenu está aberto. ESPELHO da receita única
   .btn--close-on-green (buttons.css) com !important — vence o fundo de cada
   botão. Mudou a receita lá? Mude aqui junto. */
.action-close-mode {
  background: var(--on-green-soft) !important;
  color: var(--t-light) !important;
}
.action-close-mode .icon {
  color: var(--t-light) !important;
}

/* PADRÃO ÚNICO de ícone dos botões da barra de ação superior — Histórico, Fazer
   pedido/Pedido atual, Diárias, Criar vaga (add), Sair/Editar do perfil e o estado
   "Fechar" (close). Tamanho 1.1rem + bold, condizente com o texto (--fs-6, bold) ao
   lado. Um lugar só → todos ficam iguais. (O botão de contratos NÃO entra aqui: é
   só-ícone, sem rótulo, então usa um ícone maior — ver .agenda-filters__icon-btn.) */
.pedido-action__icon,
.agenda-filters__vagas-btn .icon,
.agenda-filters__profile-btn .icon,
.action-close-mode .icon {
  font-size: 1.1rem !important;
}

/* Contratos é SÓ-ÍCONE (sem rótulo nem badge): ícone maior, preenchido e
   centralizado pelo flex do .btn — o 1.1rem do grupo ficava pequeno e parecia
   deslocado num alvo de 40px. */
.agenda-filters__icon-btn .icon {
  font-size: 1.5rem;
}

/* MODO "CONCLUIR": ao ver o detalhe do pedido ATIVO, o botão Histórico vira o
   botão de ação "Concluir pedido" (dourado) — o !important vence o fundo do
   botão-abridor (hoje btn--accent) enquanto o modo está ativo. */
.action-conclude-mode {
  background: var(--a-gold) !important;
  color: var(--p-green-dark) !important;
}
.action-conclude-mode .icon {
  color: var(--p-green-dark) !important;
}