/* =====================================================
   Floating Action Button 
   - FAB simples (icon + label)
   - Compatível com tema claro/escuro
   - Usa tokens já definidos em main.css
===================================================== */

.fab {
  position: fixed;
  right: 18px;
  bottom: calc(76px + env(safe-area-inset-bottom)); /* acima da footer-nav */
  z-index: 1500;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-width: 56px;
  height: 56px;
  padding: 0 18px;

  border-radius: 999px;
  border: none;

  background: var(--primary-500);
  color: #fff;
  box-shadow: var(--shadow-lg);
  font-weight: 700;
  font-size: 0.95rem;

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.18s cubic-bezier(.22,.61,.36,1),
    box-shadow 0.18s ease,
    background 0.18s ease,
    opacity 0.15s ease;
}

/* Apenas ícone (mini FAB circular) */
.fab--icon {
  padding: 0;
  width: 56px;
}

/* Variante pequena */
.fab--sm {
  height: 44px;
  min-width: 44px;
  padding: 0 14px;
  font-size: 0.85rem;
}
.fab--sm.fab--icon {
  width: 44px;
}

/* Estados hover/active */
.fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
  opacity: .98;
}

.fab:active {
  transform: translateY(0);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16);
}

/* Desativado */
.fab:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
  box-shadow: var(--shadow-md);
}

/* Ícone interno */
.fab__icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fab__icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
}

/* Label opcional (extended FAB) */
.fab__label {
  white-space: nowrap;
}

/* Dark mode – usa tokens globais */
:root[data-theme="dark"] .fab {
  background: var(--primary-600);
  color: #0b1220;
}

/* Ajuste opcional para ecrãs sem footer-nav (ex.: desktop) */
@media (min-width: 769px) {
  .fab {
    bottom: 24px;
  }
}

/* Menos animações para quem prefere */
@media (prefers-reduced-motion: reduce) {
  .fab {
    transition: none;
  }
}

/* =====================================================
   FAB — Speed Dial (vários botões)
   Estrutura:
   <div class="fab-dial">
     <button class="fab-dial__item">...</button>
     ...
     <button class="fab-dial__main">+</button>
   </div>
===================================================== */

/* Container do dial (controla posição + estado) */
.fab-dial {
  position: fixed;
  right: 18px;
  bottom: calc(76px + env(safe-area-inset-bottom));
  z-index: 1500;

  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

/* Botões secundários (itens do menu) */
.fab-dial__item {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--ink-900);
  font-size: .9rem;
  font-weight: 600;
  box-shadow: var(--shadow-md);

  transform: translateY(10px);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity .2s ease,
    transform .2s ease;
}

/* Ícones dos itens */
.fab-dial__item svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.8;
  color: var(--primary-600);
}

/* Estado aberto — mostra itens */
.fab-dial.is-open .fab-dial__item {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* FAB principal do dial */
.fab-dial__main {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: none;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--primary-500);
  color: #fff;

  box-shadow: var(--shadow-lg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform .18s cubic-bezier(.22,.61,.36,1),
    box-shadow .18s ease;
}

.fab-dial__main:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
}

.fab-dial__main:active {
  transform: translateY(0);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16);
}

.fab-dial__main svg {
  width: 26px;
  height: 26px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  transition: transform .25s ease;
}

/* Roda o ícone principal quando o menu está aberto (ex.: + → x) */
.fab-dial.is-open .fab-dial__main svg {
  transform: rotate(45deg);
}

/* Dark mode – itens com fundo mais escuro */
:root[data-theme="dark"] .fab-dial__item {
  background: var(--surface-soft);
  color: var(--ink-900);
}


/* Ajuste opcional para ecrãs maiores (sem footer-nav) */
@media (min-width: 769px) {
  .fab-dial {
    bottom: 24px;
  }
}

/* Menos animações no dial */
@media (prefers-reduced-motion: reduce) {
  .fab-dial__item,
  .fab-dial__main {
    transition: none;
  }
}


/* =====================================================
   FAB Auto-Hide (esconde ao fazer scroll para baixo)
===================================================== */

.fab.is-hidden,
.fab-dial.is-hidden {
  transform: translateY(90px);
  opacity: 0;
  pointer-events: none;
}


/* Quando fechado, não bloquear cliques por trás */
.fab-dial { pointer-events: none; }

/* Mas o botão principal continua clicável */
.fab-dial__main { pointer-events: auto; }

/* Quando aberto, o dial volta a aceitar eventos (itens + main) */
.fab-dial.is-open { pointer-events: auto; }