// ================================================================
// Floating Action Buttons (FAB)
// Menu toggle, Add Person, Add Family — bottom-right fixed stack.
// ================================================================

// --- Container ---------------------------------------------------
.fab-container {
  position: fixed;
  bottom: 4.5rem; // Clear the Tabler footer
  right: 1.5rem;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
}

// --- Action buttons (Person / Family) ----------------------------
.fab-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: var(--tblr-primary);
  color: #fff;
  box-shadow: 0 4px 12px rgba(32, 107, 196, 0.35);
  text-decoration: none;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;

  &.fab-hidden {
    display: none;
  }

  // Nested .fab-icon should be transparent — the button itself is the circle
  .fab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: transparent;
    border-radius: 50%;
    box-shadow: none;
    color: inherit;
    font-size: 1.125rem;
  }

  // Hide the label tooltip — labels are set via JS but not needed in Tabler layout
  .fab-label {
    display: none;
  }

  &:hover {
    background-color: #1a5ca8;
    box-shadow: 0 6px 20px rgba(32, 107, 196, 0.45);
    transform: translateY(-2px);
    color: #fff;
  }

  // Family button uses success/green color
  &.fab-family {
    background-color: var(--tblr-success);
    box-shadow: 0 4px 12px rgba(47, 179, 68, 0.35);

    &:hover {
      background-color: #1f8c3b;
      box-shadow: 0 6px 20px rgba(47, 179, 68, 0.45);
    }
  }

  // Save button — green/success (primary action)
}

// --- Menu toggle (sidebar open on mobile/tablet) -----------------
.fab-menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: none;
  border-radius: 50%;
  background-color: #6c757d;
  color: #fff;
  box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
  font-size: 1.125rem;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;

  &:hover {
    background-color: #565e64;
    box-shadow: 0 6px 20px rgba(108, 117, 125, 0.5);
    transform: translateY(-2px);
  }
}

// --- Larger touch targets on mobile ------------------------------
@media (max-width: 767.98px) {
  .fab-button,
  .fab-menu-toggle {
    width: 3.5rem;
    height: 3.5rem;
  }
}
